:root {
    --side-padding: 2rem;

    --bg-color: #121212;
    --text-color: #ffffff;
    --primary-color: #d4a54f;
}

@font-face {
    font-family: ShareTechMono;
    src: url(assets/fonts/Share_Tech_Mono/ShareTechMono-Regular.ttf);
}

body {
    font-family: ShareTechMono;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 1rem;
}

h1 {
    color: var(--primary-color);
    font-size: 2.5em;
    text-align: center;
}

pre {
    margin: 0;
    font-family: monospace;
}

#main-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    height: calc(100dvh - 2 * 1rem);
}

.text-content {
    padding: 0 var(--side-padding);
}

#gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: end;

    & > div {
        display: inherit;
        overflow: hidden;
    }
}

#cro {
    justify-content: start;
}
#cat {
    justify-self: end;
}

@media (max-width: 1250px) {
    #gallery {
        grid-template-columns: 1fr;

        & .ascii-art {
            justify-self: center;
            margin: 1rem 0;
        }
    }
}