:root { --bg-color: rgb(15, 15, 15); --primary: rgb(240, 240, 240); --secondary-color: hsl(210, 80%, 60%); --secondary-color2: hsl(210, 20%, 20%); --font-weight: 300; --font-family: "Lucida Console"; --link-font-weight: 700; --link-border-radius: 1000px; --page-max-width: 600px; } /* General */ body { background-color: var(--bg-color); color: var(--primary); font-family: var(--font-family), monospace; font-weight: var(--font-weight); overflow-x: hidden; /* if slim */ @media only screen and (max-width: 480px) { margin: 5px; } /* if wide */ @media only screen and (min-width: 480px) { margin: 20px; } & h1, p { margin: 0; } } main { max-width: var(--page-max-width); margin: 0 auto; /*border: 1px solid var(--secondary-color);*/ /*border-radius: 5px;*/ padding: 20px; filter: drop-shadow(0px 0px 1px var(--secondary-color)) brightness(1); } ::selection { color: var(--bg-color); background: var(--secondary-color); } /* 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 */ h2 { width: 100%; margin: 0; /* if slim */ @media only screen and (max-width: 480px) { text-align: center; margin: 10px auto; } } .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; } .links { padding: 10px; border: 1px solid var(--secondary-color); border-radius: 5px; } .linkGroup { margin: auto; /* 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: 5%; margin-right: 5%; } /* if wide */ @media only screen and (min-width: 480px) { padding: 5px; } } } .linkButton { font-weight: var(--link-font-weight); font-size: 25px; line-height: 25px; text-align: center; text-decoration: none; text-transform: lowercase; color: var(--bg-color); 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: 2px; 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 { /* if wide */ @media only screen and (min-width: 480px) { 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; }