69 lines
1.7 KiB
CSS
69 lines
1.7 KiB
CSS
|
/* Basic styling */
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
color: white;
|
||
|
|
font-family: Comic Mono;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
background-color: #141016;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Setting up the centered content */
|
||
|
|
section {
|
||
|
|
display: grid;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
padding: 50px 0;
|
||
|
|
}
|
||
|
|
section > * {
|
||
|
|
width: min(80vw, 700px)
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Styles for the header */
|
||
|
|
header p:first-of-type {
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 5em;
|
||
|
|
margin-top: 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
header {
|
||
|
|
text-align: center;
|
||
|
|
height: 100vh;
|
||
|
|
display: grid;
|
||
|
|
align-content: center;
|
||
|
|
background-color: #2A1A35;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Color Scheme */
|
||
|
|
h1, a {
|
||
|
|
color: #AA89FD;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
color: #F10385;
|
||
|
|
}
|
||
|
|
section {
|
||
|
|
counter-increment: section-number;
|
||
|
|
background-color: rgba(42, 26, 53, calc(1 - var(--section-number) / var(--section-count, 5)));
|
||
|
|
}
|
||
|
|
section:nth-child(1) { --section-number: 1 }
|
||
|
|
section:nth-child(2) { --section-number: 2 }
|
||
|
|
section:nth-child(3) { --section-number: 3 }
|
||
|
|
section:nth-child(4) { --section-number: 4 }
|
||
|
|
section:nth-child(5) { --section-number: 5 }
|
||
|
|
section:nth-child(6) { --section-number: 6 }
|
||
|
|
section:nth-child(7) { --section-number: 7 }
|
||
|
|
section:nth-child(8) { --section-number: 8 }
|
||
|
|
section:nth-child(9) { --section-number: 9 }
|
||
|
|
section:nth-child(10) { --section-number: 10 }
|
||
|
|
section:nth-child(11) { --section-number: 11 }
|
||
|
|
section:nth-child(12) { --section-number: 12 }
|
||
|
|
section:nth-child(13) { --section-number: 13 }
|
||
|
|
section:nth-child(14) { --section-number: 14 }
|
||
|
|
section:nth-child(15) { --section-number: 15 }
|
||
|
|
section:nth-child(16) { --section-number: 16 }
|
||
|
|
section:nth-child(17) { --section-number: 17 }
|
||
|
|
section:nth-child(18) { --section-number: 18 }
|
||
|
|
section:nth-child(19) { --section-number: 19 }
|
||
|
|
section:nth-child(20) { --section-number: 20 }
|