/* We use the pseudo-element root to make our variables globally available you can open the not forbidden tome here and read a bit about it. but be warned this is advanced stuff! https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties#declaring_custom_properties */ /* little reminder, the fibonacci sequence goes like this: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025, 121393, 196418, 317811, 514229, 832040, 1346269, 2178309, 3524578, 5702887, 9227465, 14930352, 24157817, 39088169, 63245986, 102334155 */ :root { /* our main colors bg-color for our background color color for our text color */ /* first trick, we want a black background color we can just use "black" but we want to use some serious magic so we use the hsl color space this is just another way of defining color hsl stands for hue saturation lightness https://en.wikipedia.org/wiki/HSL_and_HSV remember the color picker you see in any program? well this usually has hue for the color, lightness for how light/dark the color is and saturation how saturated the color should look and since we want black: 0 hue (we can ignore this, since no matter what hue we choose since lightness is 0, it always will be black) 0% saturation (again we can ignore this - it will always be black) 0% lightness (black) */ --main-bg-color: hsl(0, 0%, 0%); /* now the same for our text color here we want white so we just crank up the lightness to 100% */ --main-color: hsl(0, 0%, 100%); /* now why don't we just use the keywords white and black? well first of all we want to do some magic second of all we want some text that is somewhat lighter than the the previous we could just use some sort of gray that we picked out but where is the fun in that? we can just specify it with hsl! remember lightness 0% for black and lightness 100% for white we want something greyish, but not too gray let's go with the golden rule and choose something from the fibonacci sequence since we are doing some serious wizardry here */ --main-color-soft: hsl(0, 0%, 89%); /* sometimes we want it even ligther than before go with the next of the fibonacci sequence here */ --main-color-light: hsl(0, 0%, 55%); /* this will probably make the text illegible for most people but is perfect to play some naughty tricks hehe */ --main-color-faint: hsl(0, 0%, 13%); } /* You can specify multiple items with the , so this css selector applies to both the and tag */ html, body { /* well since html is parent of all elements it needs to be the biggest element and since the body contains anything we see and body is the direct child of html it also gets 100% the wizardry about who is biggest can get very complicated, but refer the manual here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/height */ height: 100%; } /* css selectors can be used multiple times you need to be careful with this as css can be finicky how these are applied generally avoid setting things multiple times and keep those with the same selector grouped together */ body { /* let's get rid ot hese damn margins that the browser automatically sets */ margin: 0; /* time for some color - remember we set the variable in :root and can reuse the color! https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties#referencing_custom_properties_with_var don't worry about the editor warning you. This works in all modern browsers. */ background-color: var(--main-bg-color); /* more of that sweet color, now let's set the text */ color: var(--main-color); /* because we are cool wizards we use the monospace to give that wizardry feel */ font-family: monospace; } a { color: var(--main-color); text-decoration: underline; } a:visited { color: var(--main-color-soft); } main { /* since main contains all our cool stuff we want to show off we also make it the biggest if it's smaller it can't contain, usually children should not outgrow their parents although some unruly children do, which is quite the riot */ height: 100%; /* we set any padding and margin to 0 no need to waste space */ padding: 0; margin: 0; /* cool wizardry to place things into the center of the screen this takes some serious effort and has for decades eluded all the wizards modern wizards have it easy for some guide to this wizardry check this out: https://css-tricks.com/centering-css-complete-guide/ */ display: flex; align-items: center; justify-content: center; flex-direction: column; } /* just a little familiars to help in our html to change the color of the text */ .text-color-soft { color: var(--main-color-soft); } .text-color-light { color: var(--main-color-light); } .text-color-illegible { color: var(--main-color-faint); } /* another little familiar to make the text size smol remember to use fibonacci */ .text-smol { font-size: 0.89em; } .text-draws-attention { font-weight: 600; } .draws-attention { font-weight: 600; color: var(--main-bg-color); background-color: var(--main-color); } .here-be-magic { font-weight: 600; padding: 0 2em; letter-spacing: 0.3em; } /* Okay this was the warmup now for some real magic not this oh set a color to this and that */ @keyframes blink { to { opacity: 0; } } .blink-forever { animation-name: blink; animation-duration: 1s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: none; }