/* GLOBAL CSS */
/* Define global variables and font */
:root {
    --bg-pink: #D3708F;
    --text-back: #7A253D;
    --text-base: white;
    --bg-base: black;
}

@font-face {
    font-family: cyberpunkWaifus;
    src: url(CyberpunkWaifus.ttf);
}

body {
    background-image: url("realimages/lainSpace.png");
    background-color: var(--bg-base);
    color: var(--text-base);
    font-family: cyberpunkWaifus;
}

* {
    box-sizing: border-box;
}

/* Define flex */
#flex {
    display: flex;
}

/* LAYOUT CSS */
/* Overall Container */
#container {
    /* This line impacts media queries, adjust accordingly. */
    max-width: 900px; 
    /* Center the entire page */
    margin: 0 auto;
}

#container a {
    color: var(--bg-pink);
    font-weight: bold;
}
#container a:hover {
    color: red;
    font-weight: bold;
}

/* Header Section */
#header {
    background-image: url(realimages/lainMonitor.gif);
    background-size: 100%;
    background-color: var(--bg-base);

    width: 100%;
    height:100px;

    margin-bottom: 10px; 

    border-style: solid;
    border-width: 1px;
    border-color: var(--bg-pink);

    text-align: center;
    font-size: xx-large;
}

/* Sidebars */
#leftBar {
    order: 1;
    width:200px;
    height: 760px;
    padding: 0px 20px 5px 20px;
    overflow: auto;

    font-size: smaller;
    background-color: var(--bg-base);
    border: 1px solid var(--bg-pink);
}

#rightBar {
    order: 3;
    width: 200px;
    height: 760px;
    padding: 20px;
    

    font-size: smaller;
    background-color: var(--bg-base);
    border: 1px solid var(--bg-pink);
}

/* Main/Center Box iFrame */
#centerBox {
    order: 2;
    flex: 1;

    background-color: var(--bg-base);
    border: 1px solid var(--bg-pink);
}

/* Footer Section */
#footer {
    text-align: center;
    background-color: var(--bg-base);
    border: 1px solid var(--bg-pink);

    width: 100%;
    height: 40px;
    padding: 10px;
}

/* START OF CONTENT CSS */

.navbox {
    background-color: var(--text-back);
    border: 1px solid var(--bg-pink);
    padding: 10px;
}

/* MEDIA QUERIES */
/* In order to get the max-width, take the current value of #container max-width (900px)-100 to get the @media max-width (800px) */
@media only screen and (max-width: 800) {
    #flex {
        flex-wrap: wrap;
    }
    
    aside {
        width: 100%;
    }

    /* Re-do flex order for smaller width */
    #centerBox {
        order: 1;
    }
    #leftBar {
        order: 2;
    }
    #rightBar {
        order: 3;
    }
}