:root {
    /* backgrounds */
    --header-image: url('../img/backgrounds/space_icePlanet.jpg');
    --body-bg-image: url('../img/backgrounds/stars3.gif');
    --navbar-bg-image : url('../img/backgrounds/sparklebackground.gif');

    /* colors */
    --content: #43256E;

    font-size: 16px;

}

    /* if you have the URL of a font, you can set it below */
    /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
 
 */ 
    @font-face {
        font-family: 'Industrial Faith';
        src: url('../font/indfait.ttf');
    }

    @font-face {
        font-family: 'Recharge';
        src: url('../font/recharge\ bd.ttf');
    }
 

    * { box-sizing: border-box; }

    body {
        font-family: 'Industrial Faith', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #08031A;

        color: #fceaff;
        background-image: var(--body-bg-image);
        
    }

    /* below this line is CSS for the layout */

        /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */

    #container {
        max-width: 1248px;
        /* this is the width of your layout! */
        /* if you change the above value, scroll to the bottom
            and change the media query according to the comment! */
        margin: 0 auto;
        /* this centers the entire page */
    }


    .header {
        width: 100%;
        background-color: #5e4e8c;
        /* header color here! */
        min-height: 9rem;
        /* this is only for a background image! */
        /* if you want to put images IN the header, 
    you can add them directly to the <div id="header"></div> element! */
        background-image: var(--header-image);
        background-size:100%;
        background-repeat: no-repeat;
    }

/* Navigation section: Start */
    #navbar {
        overflow: hidden;
    }

    #navbar nav{
        height: 40px;
        background-color: #280053;
        background-image: var(--navbar-bg-image);
        /* navbar color */
        width: 100%;
        overflow: hidden;
    }

    #navbar ul {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0;
        margin: 0;
        justify-content: space-evenly;
        height: 100%;
       /* border: 1px solid greenyellow; */
    }

    /* navigation links*/
    #navbar li a {
        color: white;
        /* navbar text color */
        font-weight: 800;
        text-decoration: none;
        /* filter: drop-shadow(0px 0px 7px #A5ECFE); */
        text-shadow: 2px 2px #5175FD;
    }

    /* navigation link when a link is hovered over */
    #navbar li a:hover {
        filter: drop-shadow(0px 0px 7px #A5ECFE);
    }

/* Navigation section: End */

/* Main section: Start */
    #flex {
        display: flex;
        flex-wrap: wrap;  /* shrinks the flex to one single column */
        margin: 0 auto;
    }

    .flex-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* shrinks the flex to one single column */
    }

    /* Top Row section: Start */
    #top-row {
        order: 1;
    }

        .welcome {
            order: 1;

            width: 100%;
            padding: 1rem;
            background-color: #3C216C;
        }

        .mood {
            order: 2;

            width: 100%;
            padding: 1rem;
            background-color: #2B0454;
            text-align: center;
        }

    /* Top Row section: End */
    

    /* Mid Row section: Start */
    #mid-row {
        order: 2;
    }
    

        aside {
            background-color: #2B0454;
            width: 100%;
            padding: 1rem; 
            font-size: smaller; /* this makes the sidebar text slightly smaller */
            order: 2;
        }
        
        /* this is the color of the main content area,
        between the sidebars! */
        main {
            background-color: #3C216C;
            width: 100%;
            padding: 1rem;
            order: 1;
        }

    /* Mid Row section: End */
    
    footer {
        background-color: #13092D;
        /* background color for footer */
        height: 40px;
        width: 100%;
        padding: 10px;
        text-align: center;
        /* this centers the footer text */
    }

    h1,
    h2,
    h3 {
        background-image: -webkit-linear-gradient(white 20%, #5175FD);
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0px 0px 7px #5175FD);
    }

    h1 {
        font-size: 1.5625rem; /* 25px */
    }

    strong {
        /* this styles bold text */
        color: #ED64F5;
    }

    /* this is just a cool box, it's the darker colored one */
    .box {
        background-color: #13092D;
        border: 1px solid #D432D6;
        padding: 1rem;

        overflow: scroll;
        max-height: 20rem;

        font-family: "Recharge";
        font-size: 1rem;
    }
/* Main section: End */


/* Media Query section: Start */

    /* tablet view */
    @media only screen and (min-width: 800px) {

        .header{
            min-height: 20rem;
        }
        

    }

    /* desktop view */
    @media only screen and (min-width: 1248px){
        .header {
            min-height: 31rem;
        }
        
        .flex-content {
            flex-wrap: nowrap;
            margin: 1rem auto 0 auto;
        }

        
        .welcome {
            order: 1;
            margin: 0 1rem 0 auto;
            width: 100%;
        }

        .mood {
            order: 2;
            margin: 0 auto;
            width: 20%;
        }


        aside {
            order: 1;
            width: 20%;
            margin: 0 1rem 0 auto;
        }

        main {
            order: 2;
            width: 100%;
        }

        #navbar ul {
            flex-wrap: nowrap;
        }

        footer {
            margin: 1rem auto 0 auto;
        }
        
    }

/* Media Query section: End */