/* ---------- GLOBAL RESET ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full-page background */
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'monospace';
    background-image: url("../assets/images/bkgs/fairyNight_bkg.jpg");
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
}
header, nav, main, aside, footer {
    margin: 2px;
    background: #c7a4c9;
    opacity: 50%;
    border: 2px outset #fff;
    border-radius: 13px;
    padding: 0.5rem;
    height: fit-content;
}

/* ---------- LAYOUT AREAS ---------- */
header { grid-area: header; padding: 0.5rem; background: linear-gradient(to right,#c7a4c9,#85a2dd); opacity: 60%; text-align: center; }
footer { grid-area: footer; padding: 0.5rem; background: #eee; opacity: 50%; text-align: center; font-size: 0.9rem; }
nav { grid-area: nav; padding: 0.3rem; background: #dcdcdc; }
main { grid-area: main; padding: 0.5rem; background: #ffafc0; }
aside { grid-area: aside1; padding: 0.5rem; background: #c7a4c9; }
aside#aside2 { grid-area: aside2; background: #c7a4c9; }

/* ---------- MOBILE / DEFAULT ---------- */
body.layout-2col {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    gap: 0.5rem;
}

body.layout-3col {
    display: grid;
    grid-template-columns: 150px 1fr 150px; /* Reduce nav width */
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
        "header header"
        "nav aside2"
        "main main"
        "aside1 aside1"
        "footer footer";
    gap: 0.5rem 0.25rem;
    font-size: 15px;
}

/*!* ---------- TABLET / MEDIUM SCREENS ---------- *!*/
/*@media (min-width: 600px) {*/
/*    body.layout-2col {*/
/*        grid-template-columns: 160px auto;*/
/*        grid-template-areas:*/
/*            "header header"*/
/*            "nav main"*/
/*            "footer footer";*/
/*    }*/
/*    body.layout-3col {*/
/*        grid-template-columns: 200px 1fr 200px;*/
/*        grid-template-areas:*/
/*            "header header header"*/
/*            "nav main aside2"*/
/*            "aside1 main aside2"*/
/*            "footer footer footer";*/
/*    }*/
/*}*/

/* ---------- DESKTOP / LARGE SCREENS ---------- */
@media (min-width: 900px) {
    body.layout-2col {
        grid-template-columns: 160px auto;
        grid-template-areas:
            "header header"
            "nav main"
            "footer footer";
    }
    body.layout-3col {
        grid-template-columns: 150px 1fr 150px; /* Reduce nav width */
        grid-template-areas:
            "header header header"
            "nav main aside2"
            "aside1 main aside2"
            "footer footer footer";
    }
}

/* ---------- NAVIGATION ---------- */
nav h4 { font-size: 0.6rem; margin-bottom: 0.5rem; }
.navLink {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem;
    margin: 0.1rem 0;
    background: #e0e0e0;
    border: 2px outset #fff;
    text-decoration: none;
    color: #000;
    font-size: 10px;
}
.navLink:hover { background: #bfbfbf; }
.navLink img { width: 20px; height: 20px; }

/* ---------- TYPOGRAPHY ---------- */
h1 { font-size: 20px; margin-bottom: 0.5rem; }
h3, h4 { text-align: center; font-size: 12px; }
p { margin: 10px; font-size: 15px; }

/* ---------- BUTTONS ---------- */
button {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    background: #dcdcdc;
    border: 2px outset #fff;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    display: inline-block;
}
button:active { border: 2px inset #fff; background: #bfbfbf; }