html {
    display: flex;
    width: 100%; min-height: 100%;
}
body {
    flex: 1;
    position: relative;
    margin: 0; padding: 0;
    background-color: #000;
}

h1, h2, h3 {
    margin: 0;
}
@keyframes bgLoader {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.emoji {
    width: 24px; height: 24px;
    vertical-align: center;
}

/* --- content --- */
#bg {
    position: absolute; z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0;
    background: url('noise.gif') #111 repeat; background-size: 480px;
    image-rendering: pixelated;
    animation: bgLoader 5s ease 1;

    @media (prefers-reduced-motion: reduce) {
        background: #161616;
    }
}
main {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%;
    background: radial-gradient(#0000 33%, #0006); color: #eaeaea;
    font-family: 'Inter', sans-serif; font-size: 1.2rem;
    animation: bgLoader 3s ease 1;
}

/* --- title --- */
#title {
    &:focus {
        outline: none;
    }
}

#logo {
    filter: drop-shadow(0 0 8px #0008);
    padding: 40px;
    transition: 2s;

    #title:focus &, &:hover {
        filter: drop-shadow(0 0 4px #ffc311) drop-shadow(0 0 18px #ffc10766);
        transition: .5s;
    }
}

/* --- intro --- */
#intro {
    max-width: 640px;
    margin: 0 40px
}

/* --- links --- */
#links {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.nav {
	display: inline-block;
	background: #ccc1; color: #fff;
	border: 2px solid #fff5; border-radius: 4px;
	margin: 4px; padding: 10px 20px;
	text-align: center; text-decoration: none;
    outline: 0 solid #fff0;
	box-shadow: 0 0 6px #1113, inset 0 6px 2px 0 #fff2, inset 0 -3px 5px -3px #fff2;
	/* backdrop-filter: blur(5px); */
	transition: .5s, background 0s;

    @media (max-width: 480px) {
        width: 100%;
    }

    *:focus-visible > &, *:hover > & {
        opacity: .7;
    }
    
    &:focus-visible, &:hover {
        background: linear-gradient(180deg, #fff1 30%, #fff7);
        border: 2px solid #fff6;
        box-shadow: 0 0 9px #1114, inset 0 6px 2px 0 #fff2;
        opacity: 1;
    }
    &:active {
        background: linear-gradient(180deg, #fff4 10%, #fff8);
        border: 2px solid #fff9;
    }
}
.nav-github {
    &:focus-visible, &:hover {
        background: linear-gradient(180deg, #558bb936 30%, #467cac90);
        border: 2px solid #a0d2fd;
        box-shadow: 0 0 8px 1px #448dcccf, inset 0 6px 2px 0 #fff2, inset 0 -3px 5px -3px #fff2;
    }
    &:active {
        background: linear-gradient(180deg, #2c6da560 10%, #3e73a1c0);
    }
}
.nav-reddit {
    &:focus-visible, &:hover {
        background: linear-gradient(180deg, #d5926436 30%, #ff910163);
        border: 2px solid #ffa950;
        box-shadow: 0 0 8px 1px #f98000d0, inset 0 6px 2px 0 #fff2, inset 0 -3px 5px -3px #fff2;
    }
    &:active {
        background: linear-gradient(180deg, #f9670061 10%, #f47200bf);
    }
}
.nav-pmc {
    &:focus-visible, &:hover {
        background: linear-gradient(180deg, #8eb9a036 30%, #4ac97f80);
        border: 2px solid #66ec9c;
        box-shadow: 0 0 8px 1px #45c47abf, inset 0 6px 2px 0 #fff2, inset 0 -3px 5px -3px #fff2;
    }
    &:active {
        background: linear-gradient(180deg, #36b56b60 10%, #36b56bc0);
    }
}
.nav-usw {
    &:focus-visible, &:hover {
        background: linear-gradient(180deg, #85b1af36 30%, #71e6de63);
        border: 2px solid #8afff9;
        box-shadow: 0 0 8px 1px #00f6eba2, inset 0 6px 2px 0 #fff2, inset 0 -3px 5px -3px #fff2;
    }
    &:active {
        background: linear-gradient(180deg, #60bdb861 10%, #40c2b9c0);
    }
}