:root { --bg-color: rgb(16, 16, 16); --primary: rgb(240, 240, 240); --secondary-color: hsl(210, 80%, 60%); --secondary-color2: hsl(210, 60%, 30%); --font-weight: 400; --font-family: "Lucida Console"; --link-font-weight: 700; --link-border-radius: 1000px; --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; & 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 */ .text-link { color: var(--secondary-color); text-decoration: underline solid var(--secondary-color2) 1px; top: 0; position: relative; padding: 0 2px; } .text-link:hover { text-decoration: underline solid var(--secondary-color) 1px; filter: drop-shadow(0px 0px 5px var(--secondary-color2)) brightness(1.02); top: -2px; } .linkGroup { /* 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(16, 16, 16); 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: 25px; height: 25px; 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); } .linkButton:active { transform: scale(0.95); top: +2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* 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; }