:root { --bg-color: rgb(16, 16, 16); --primary: rgb(240, 240, 240); --secondary-color: rgb(0, 138, 216); --font-weight: 400; --font-family: "Lucida Console"; --link-font-weight: 1000; --link-border-radius: 10px; --page-max-width: 800px; } /* General */ body { background-color: var(--bg-color); color: var(--primary); font-family: var(--font-family), monospace; font-weight: var(--font-weight); overflow-x: hidden; margin: 20px; & a { color: var(--secondary-color); } & a:hover { text-decoration: none; } & h1, p { margin: 0; } } main { max-width: var(--page-max-width); margin: 0 auto; } /* Header*/ header { text-align: center; width: max-content; margin: 0 auto; & .names { /*margin: 0 auto;*/ width: min-content; white-space: nowrap; & h1, p { text-align: left; color: var(--secondary-color); } } & img { border-radius: 50%; max-width: 300px; padding: 0; } } /* Links */ .linkGroup { margin: auto; box-sizing: border-box; /* if wide */ @media only screen and (min-width: 480px) { display: flex; flex-wrap: wrap; } & .link { height: fit-content; position: relative; top: 0; transition: top ease 100ms; /* if slim */ @media only screen and (max-width: 480px) { margin-bottom: 10px; margin-left: 10%; margin-right: 10%; } /* if wide */ @media only screen and (min-width: 480px) { padding: 5px; } } } .linkButton { font-weight: var(--link-font-weight); font-size: 25px; line-height: 30px; text-align: center; text-decoration: none; color: rgb(0, 0, 0); background-color: var(--secondary-color); display: block; box-sizing: border-box; padding: 10px 20px; border-radius: var(--link-border-radius); /* if slim */ @media only screen and (max-width: 480px) { width: 100%; } & .icon { width: 20px; height: 20px; padding-right: 10px; padding-bottom: 4px; vertical-align: middle; } } .link:hover { filter: drop-shadow(0px 0px 5px var(--secondary-color)) brightness(1.05); top: -2px; } .links:hover .link:not(:hover) a { filter: brightness(0.8); } /* Timers */ .timer p { /* if slim */ @media only screen and (max-width: 480px) { margin-bottom: 20px; } } .timer p span { color: var(--secondary-color); text-decoration: none; } /* Footer */ footer { text-align: center; & a { padding: 0 2px; } }