/*
    Programmer: Kayla Johnson
    Class: B102
    Year: Fall 2023
*/

/*
    Basic structure of the webpage. It styles the header and nav-menu, and anything else that is present
    in all the HTML files. 
    It's fluid and contains the MediaQueries
*/

/*The background of the document*/
html {
    background-color: #beaec0;
    font-size: 120%;
    font-family: "Montserret", sans-serif;
}

/*  Everything here is for the header contained in the body
    There is only one H1, so it isn't specified. 
    The headings have a Sacramento font
*/
header {
    background-color: #ce7bac;
    display:flex;
    justify-content: space-between;
}

h1 {
    margin-left: 3.33%;
    font-family: "Sacramento", cursive;
}

header h2 {
    margin-right: 3.33%;
    margin-top: 30px;
    font-family: "Sacramento", cursive;
}

/*CSS for the body*/
body {
    width: 90%;
    max-width: 1000px;
    min-height: 300px;
    margin: auto;
    border: 2px solid black;
    background-color: #FCFCFC;
}

/*  CSS for the navigation menu at the top of the website
    Programmed to be at the top
*/
#nav_menu ul {
    list-style-type: none;
    position: relative;
    padding: 0;
    width: 100%;
    margin: 0 0;
}

#nav_menu ul li {
    float: left;
    position: relative;
    width: 20%;
}

#nav_menu li a {
    padding: 0.6em 0;
    background-color: #ba4389;
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    font-weight: 100;
    border: 1px solid purple;
    border-bottom: 2px solid black;
}


#nav_menu a:hover, #nav_menu a:focus {
    background-color: purple;
    color: black;
}

ul::after {
    content: "";
    display: block;
    clear: both;
}

/*CSS for the "sections". Some sections might be named differently, but they are still sections*/
section a:hover, section a:focus {
    border: 2px solid purple;
    border-radius: 10px;
}

section {
    padding: 10px 3.33%;
}

/*mobile-menu for slicknav*/
#mobile_menu{
    display: none;
}

/*This mediaquery is for when the navigation menu starts bunching up and stops being straight*/
@media only screen and (max-width: 825px){
    nav{
        font-size: 60%;
    }
}

/*This starts slicknav at a certain size*/
@media only screen and (max-width: 604px) and (min-width: 480px){
   #mobile_menu{display: block; }
   #nav_menu{display: none;}
    
}

/*This is basically the mobile version. It only affects the header*/
@media only screen and (max-width: 480px) {
    #mobile_menu{display: block; }
   #nav_menu{display: none;}
    header{
        display: block;
        height: 139.8px;
        text-align: center;
    }

    header h1{
        margin: 0;
        padding-top: 10px;
    }

    header h2{
        margin: 0;
        padding-top: 20px;
    }

    body{
        width:100%;
        border:none;
    }
}