/* import the reusable classes into the main.css, so that
1. the main.css would be easier to distinguish from the reusables
2. not clog up the css code 

In other words: it makes it easier for me to change stuff without having to search for it. and it's prettier. idc if it might take some time to load it via the import method, fuck it.
*/

@import "classes.css";

* {
    box-sizing: border-box;
}

/* GENERAL LAYOUT */

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;

    /*styling*/
    background-image: var(--bgpage);
    background-color: var(--bgmobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

:root:has(#neon:checked) body {
    image-rendering: pixelated;
}

/*here's an idea:  what if creamy texture had a wooden texture for the box? */

/*
:root:has(#creamy:checked) .box {
    background-image: var(--box-texture);
}
*/

/*let's keep it here juuuust in case. still gotta figure out how to make navbar also get the texture */

.site-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(256px, 90%, 1024px);
}

header,
#navbar,
main {
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/*                       The GIANT header on every page                       */
/* -------------------------------------------------------------------------- */

header {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 20px;
    text-align: center;
    min-height: 50px;
    padding: 0;

    font-size: 44px;
    font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/*                               the main stuff                               */
/* -------------------------------------------------------------------------- */
main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* -------------------------------------------------------------------------- */
/*                            NAVIGATION BAR STUFF                            */
/* -------------------------------------------------------------------------- */

#navbar {
    margin: 20px 0;
}

nav {
    display: flex;
    gap: 25px;
}

.nav-links {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
}

.nav-links a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: var(--text-main);
    padding: 15px 0;
    border: none;
}

.nav-links a:hover {
    background-color: var(--bghover);
}

.theme-selector {
    padding: 0;
    flex: 1;
    position: relative;
}

/* -------------------------- NAVBAR THEME SELECTOR ------------------------- */

.theme-selector-button {
    border: none;
    height: 100%;
    width: 100%;
    color: var(--text-main);
    background-color: var(--bgbox);
    font-family: var(--font);
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    transition: 0.1s;
}

.theme-selector-button:hover {
    background-color: var(--bghover);
}

.theme-dropdown {
    z-index: 10;
    position: absolute;
    top: 100%;
    left: 0%;
    display: none;
    min-width: 100%;
}

.theme-selector:hover .theme-dropdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --------------------- THEME SELECTOR - INNER BUTTONS --------------------- */

.theme-dropdown label {
    padding: 5px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: 0.1s;
}

/* get rid off default browser radio button */
.theme-dropdown label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.theme-dropdown label:hover {
    background-color: var(--bghover);
}

.theme-dropdown label:has(:checked) {
    border: 4px solid var(--accent);
}

/* -------------------------------------------------------------------------- */
/*                                FOOTER STUFF                                */
/* -------------------------------------------------------------------------- */
#footer {
    /* Styling */
    min-height: 64px;
    background-color: var(--footer-bg);
    width: 100%;
    border-top: 3px solid var(--border);
    margin-top: 20px;
    padding: 10px;
    color: var(--footer-text);
    font-family: var(--font);
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

footer .footer-text {
    max-width: 1024px;
}

/* -------------------------------------------------------------------------- */
/*                                 PHONE QUERY                                */
/* -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    body {
        background-color: var(--bgmobile);
        background-image: none;
    }

    nav {
        flex-direction: column;
    }

    .nav-links {
        grid-template-columns: 1fr;
    }

    .theme-selector-button {
        padding: 25px;
    }

    footer {
        flex-direction: column;
    }
}