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

/* site.css is for ids, classes and stuff */
/* layering imports is cool! */

.button[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

.gmb {
    margin-bottom: var(--l);
}

.tac {
    text-align: center;
}

[hidden] {
    display: none;
}

ul[indented] {
    margin-left: var(--m);
    list-style: square;
}

#title {
    padding-block: 0;
    background: linear-gradient(0deg, var(--code), var(--black));
    background-clip: text;
    text-shadow: 0px 0px var(--code);
    filter: drop-shadow(2px 2px 2px var(--blue));
    animation: shadow_anim 2s steps(16) infinite;
    line-break: anywhere;
}

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

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

#uv {
    /* background-color: var(--code); */
    box-shadow: inset 0px 0px 5px var(--white);
    code {
        /* font-family: "slkscr"; */
        font-size: var(--s);
        padding-inline: var(--m);
        color: var(--white);
        background: linear-gradient(0deg, white, #0000);
        background-clip: text;
        background-size: 200% 200%;
    }
}

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

.button_1, .button_2 {
    width: max-content;
    border-radius: var(--s);
    transition: box-shadow .1s linear;
    &:hover {
        box-shadow: 0px 0px 5px 2px var(--code);
    }
}

.button_1 {
    color: var(--blue);
    text-decoration: none;
    box-shadow: 0px 0px 5px var(--code);
    cursor: pointer;
    user-select: none;
}

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

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

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

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

pre[class*="language-"] {
    padding-inline: var(--s);
}