@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300;400;500;700&display=swap');

html.lightmode {
    --background-color: #FFFFFF;
    --container-color: #F1F1F1;

    --accent-color: #BCBCBC;

    --text-title-color: #292929;
    --text-paragraph-color: #424245;
    --text-button-color: #FAF9F6;

    --button-color: #bdbdbd;
    --button-transparent-color: rgba(189, 189, 189, 0.5);
    --button-hover-color: #ababab;

    --highlight-color: #EF5552;
    --highlight-hover-color: #F56A67;

    --card-radius: 15px;
    --small-button-radius: 5px;
    --medium-button-radius: 10px;

    --theme-icon: url("/assets/lucide/sun.svg");
    --theme-icon-opposite: url("/assets/lucide/moon.svg");
}

html:not(.lightmode) {
    --background-color: #131517;
    --container-color: #1A1C20;

    --accent-color: #27282C;

    --text-title-color: #FAF9F6;
    --text-paragraph-color: #727478;
    --text-button-color: #FAF9F6;

    --button-color: #27282C;
    --button-transparent-color: rgba(39, 40, 44, 0.5);
    --button-hover-color: #35373B;

    --highlight-color: #EF5552;
    --highlight-hover-color: #F56A67;

    --card-radius: 15px;
    --small-button-radius: 5px;
    --medium-button-radius: 10px;

    --theme-icon: url("/assets/lucide/moon.svg");
    --theme-icon-opposite: url("/assets/lucide/sun.svg");
}

body, html {
    padding: 0;
    margin: 0;

    height: 100vh;

    font-family: 'JetBrains Mono', monospace;
    background-color: var(--background-color);
}

.navigation {
    display: flex;
    width: calc(100% - 100px);
    height: 40px;

    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 40px;

    padding: 10px 50px;

    font-size: 24px;
}

.content {
    min-height: calc(100vh - 114px);
}

.footer {
    height: 24px;
    width: 70%;

    display: grid;

    grid-template-columns: 1fr 1fr;
    padding: 20px 15% 10px;

    align-items: center;
}

.footer * {
    height: 24px;
    margin: 0;
    padding: 0;
}

.footer-links {
    display: flex;
    gap: 20px;

    white-space: nowrap;
}
.copyright {
    display: flex;
    flex-direction: row-reverse;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-title-color);
}

p, span, li, figcaption {
    color: var(--text-paragraph-color);
}

.theme-switcher {

    background: var(--theme-icon-opposite) no-repeat center, var(--button-color);

    position: fixed;
    width: 36px;
    aspect-ratio: 1/1;

    bottom: 10px;
    right: 10px;

    border-radius: var(--small-button-radius);
}

.theme-switcher:hover {
    cursor: pointer;
    background-color: var(--button-hover-color);
}

@media screen and (max-width: 1000px) {
    .copyright {
        flex-direction: row;
    }
    .footer {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;

        height: 48px;
    }
    .content {
        min-height: calc(100vh - 128px);
    }
}