@import url("gold.css");
@import url("root.css");

* {
    text-align: center;
}

h1 {
    font-family: "redros";
    padding-top: var(--m);
    background: linear-gradient(0deg, var(--code), var(--black));
    background-clip: text;
    text-shadow: 0px 0px var(--code);
    filter: drop-shadow(2px 2px 15px var(--blue));
    animation: shadow_anim 2s steps(16) infinite;
}

@keyframes shadow_anim {
    50% {
        text-shadow: 2px 0px var(--red);
    }
}

#tagline small {
    font-style: italic;
    text-shadow: -1px 1px 1px var(--red);
}

#uv {
    background-color: var(--code);
    border-radius: var(--s);
    code {
        background: linear-gradient(0deg, black, white);
        background-clip: text;
    }
}

#buttons {
    grid-template-columns: 1fr 1fr;
    @media (width > 567px) {
        gap: var(--l);
    }
}

.button_1 {
    background-color: var(--blue);
    border-radius: var(--m);
    text-decoration: none;
    box-shadow: 0px 0px 2px var(--code);
    cursor: pointer;
}

.button_2 {
    border: 1px solid var(--blue);
    box-shadow: 0px 0px 1px var(--blue);
    border-radius: var(--m);
    text-decoration: none;
    grid-template-columns: auto 1fr;
    img {
        width: var(--m);
    }
    cursor: pointer;
}

#time {
    color: var(--code);
}

#brag {
    font-size: var(--s);
}

#code_container {
    li {
        padding-bottom: var(--m);
    }
}