body{
    background-color: black;
    color: white;
    max-width: 100%;
}
                               /* Styling for the headers and bodys of all pages */
header{
    background-color: black;
    font-family: sans-serif;
    color: white;
}


#right-nav{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: auto;
    width: 42%;
    float:right
}
#left-nav{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: auto;
    width: 42%;
    float:left
}                               /* Styling for the nav bars on every page */
#right-nav a{
    text-decoration: none;
    color:white;
    margin-top:30px;
    border: 2px solid black;
    border-width:25px;
    outline: #F6B042 solid 2px;
    padding:5px;
    align-content: center;
} 
#left-nav a{
    text-decoration: none;
    color:white;
    margin-top:30px;
    border: 2px solid black;
    box-sizing:border-box; 
    border-width:25px;
    outline: #F6B042 solid 2px;
    padding:5px;
    align-content: center;
}
#logo{
    padding-top: 10px;
    width:150px;
    padding-left:3%;
    width:10%
}


#services-page{
    display: grid;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ". services services services . allergens allergens allergens ." 
    ". services services services . allergens allergens allergens."
    ;
}
#services{
    grid-area: services
}
#allergens{
    grid-area: allergens;
}
#services-page-title{
    grid-area: page-title;
    font-size:50px;
    font-family: sans-serif;
}                                /* Styling for the services page and the table */
#services-main-content{
    grid-area: main-content;
    font-size: 17px;
    font-family: sans-serif;
}
#allergens-title{
    margin: top 40px;
    grid-area: allergens-title;
    text-align:center;
    margin-bottom: 20px
}
#allergens-tab{
    grid-area: allergens-tab;
}
table, th{
    border: 1px solid #F6B042;
    padding:5px;
    text-align: center;
}
td{
    border: 1px dotted #F6B042;
    padding: 5px;
    text-align: center;
}



#home-sect{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ". page-title page-title . . ."
    ". subheading subheading . . ."
    ". button button . . ."
}
#home-page-title{
    padding-top:20px;
    grid-area: page-title;
    font-size:50px;
    font-family: sans-serif;
}
#home-subheading{
    grid-area: subheading;
    font-size: 17px;
    font-family: sans-serif;
}                                       /* Styling for the home page */
#home-button{
    grid-area: button;
    text-decoration: none;
    color:white;
    text-align: center;
    padding-top:20px;
    background-color: black;
    padding-bottom:20px;
    margin-top: 25px;
    margin-bottom:140px
}
#home-main{
    background-image: url("HomePageOpa.png");
    background-repeat: no-repeat;
    background-size:auto;
    background-position-y:19vh;
    background-position-x: center;
    background-attachment:fixed;
    background-size: 1300px;
}


#whyus{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ". whyus-page-title whyus-page-title . . ."
    ". whyus-subheading whyus-subheading . . ."
}
#whyus-page-title{
    padding-top:20px;
    grid-area: whyus-page-title;
    font-size:50px;
    font-family: sans-serif;
}                                   /* Styling for the why-us page*/
#whyus-subheading{
    grid-area: whyus-subheading;
    font-size: 17px;
    font-family: sans-serif;
    margin-bottom:50px
}
#whyus-main{
    background-image: url("WhyUsOpa.png");
    background-repeat: no-repeat;
    background-size:auto;
    background-position-y:19vh;
    background-position-x: center;
    background-attachment:fixed;
    background-size: 1300px;
    background-blend-mode:luminosity; 
}


#clients-page{
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ". twickenham twickenham . clients-page-title clients-page-title . stowaway stowaway ." 
    ". twickenham twickenham . clients-page-content clients-page-content . stowaway stowaway ." 
    ". twick-cap twick-cap . clients-page-content clients-page-content . stow-cap stow-cap ."
    ". black-deer black-deer . ashton ashton . moto-gp moto-gp ."
    ". black-cap black-cap . ashton-cap ashton-cap . moto-cap moto-cap ."
    ;
}
.client-img{
    width:325px;
}
#clients-page-title{
    text-align:center;
    grid-area: clients-page-title;
    font-size:50px;
    font-family: sans-serif;
}
#clients-page-content{
    grid-area: clients-page-content;
    text-align: center;
}
#black-deer{
    grid-area: black-deer;
    padding-top: 10px;
}
#twickenham{
    grid-area: twickenham;
    padding-top: 10px;
}                                    /* Styling for the clients page */
#ashton{
    grid-area: ashton;
    padding-top: 10px;
}
#stowaway{
    grid-area: stowaway;
    padding-top: 10px;
}
#moto-gp{
    grid-area: moto-gp;
    padding-top: 10px;
}
#moto-cap{
    grid-area: moto-cap;
    text-align: center;
}
#stow-cap{
    grid-area: stow-cap;
    text-align: center;
}
#ashton-cap{
    grid-area: ashton-cap;
    text-align: center;
}
#twick-cap{
    grid-area: twick-cap;
    text-align: center;
}
#black-cap{
    grid-area: black-cap;
    text-align: center;
}


#form{
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: auto;
    grid-template-areas: 
    ". fieldset fieldset fieldset reg-title reg-title reg-title reg-title reg-title . "
    ". fieldset fieldset fieldset reg-cont reg-cont reg-cont reg-cont reg-cont ."
    ". fieldset fieldset fieldset reg-cont reg-cont reg-cont reg-cont reg-cont ."
    ". fieldset fieldset fieldset reg-cont reg-cont reg-cont reg-cont reg-cont ."
    ". fieldset fieldset fieldset reg-cont reg-cont reg-cont reg-cont reg-cont ."
    ". fieldset fieldset fieldset reg-img reg-img reg-img reg-img reg-img ."
    ". fieldset fieldset fieldset reg-img reg-img reg-img reg-img reg-img ."
    ". fieldset fieldset fieldset reg-img reg-img reg-img reg-img reg-img ."
}
#reg-img{
    grid-area:reg-img;
    margin-left:120px
}
fieldset{
    margin-top: 20px;
    width: 230px;
    grid-area: fieldset
}                                     /* Styling for the form in and register page*/
#reg-cont{
    grid-area: reg-cont;
    text-align: center
}
#reg-title{
    grid-area: reg-title;
    font-size: 40px;
    text-align: center;
    margin-top:30px
}


ul{
    list-style:none;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content: space-around;
    padding-right:40px
}
ul a{
    color:white;
    text-decoration:none;
}
ul li{
    padding:5px;
    /* margin-left:10px; */
}                                   /* Styling for the mobile nav bar using 'display:none' to hide it on all pages other than the mobile display. */
#mobile-nav{
    display:none;
    margin: 0;
    cursor:pointer;
    color:white;
    text-decoration:none;
    float:left;
    background-color:black;
}
.burger div{
    width:35px;
    height:3px;
    background-color:white;
    margin:6px 0;
    display:none
}
.open .mobile-menu{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: black;
    margin-top:50px
}
.mobile-menu{
    display: none;
    position: absolute;
    top:50px;
    left:0;
    height:calc(100vh - 450px);
    width:100%;
    margin-left:-40px;
    margin-top: 10px
}


.socialslogo{
    width:30px;
    margin-top:10px
}                                /* Styling for the footer and social links */
footer{
    border: 2px solid black;
    border-width:25px;
    outline: #F6B042 solid 2px;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: auto;
}

@media screen and (max-width:360px) and (max-height:640px){         /* Media query that will create the following changes in styling only of the screen size is that of a mobile.*/
    #mobile-nav{
        display:block;
    }
    #right-nav{
        display:none
    }
    #left-nav{
        display:none
    }
    #logo{
        width:100px;
        float:right;
        display:flex
    }
    #burger{
        display:block
    }
    .burger div{
        display: block
    }


    #clients-page{
        display: grid;
        margin-left:50px;
        grid-template-columns: 100%;
        grid-template-areas:
        "clients-page-title"
        "clients-page-content"
        "twickenham"
        "twick-cap"
        "black-deer"
        "black-cap"
        "ashton"
        "ashton-cap"
        "stowaway"
        "stow-cap"
        "moto-gp"
        "moto-cap"
    }
    #clients-page-title{
        margin-top:100px
    }
    .client-img{
        width:225px;
    }
    

    #home-sect{
        display: grid;
        margin-left:50px;
        grid-template-columns: 100%;
        grid-template-areas:
        "page-title"
        "subheading"
        "button"
    }
    #home-page-title{
        margin-top:90px
    }
    

    #why-us{
        display: grid;
        margin-left:50px;
        grid-template-columns: 1;
        grid-template-areas:
        "whyus-page-title"
        "whyus-subheading"
    }
    #whyus-page-title{
        margin-top:90px;
        grid-area: whyus-page-title;
        font-size:50px;
        font-family: sans-serif;
        width:300px
    }
    #whyus-subheading{
        grid-area: whyus-subheading;
        font-size: 17px;
        font-family: sans-serif;
        width:300px;
        margin-left:-10px;
        text-align:center;
    }


    #services-page{
        display: grid;
        margin-left:50px;
        grid-template-columns: 1;
        grid-template-areas:
        "services"
        "allergens"
    }
    #services-page-title{
        grid-area: page-title;
        font-size:50px;
        font-family: sans-serif;
        width:200px;
        margin-top:90px
    }
    #services-main-content{
        grid-area: main-content;
        font-size: 17px;
        font-family: sans-serif;
        width:200px;
        text-align:center;
    }
    #allergens-title{
        margin: top 40px;
        grid-area: allergens-title;
        text-align:center;
        margin-bottom: 20px;
        width:200px
    }
    #allergens-tab{
        grid-area: allergens-tab;
        width:200px
    }
    table, th{
        border: 1px solid #F6B042;
        text-align: center;
    }
    td{
        border: 1px dotted #F6B042;
        text-align: center;
    }


    #form{
        display: grid;
        grid-template-columns: 1;
        grid-template-areas:
        "reg-title"
        "reg-cont"
        "fieldset"
        "reg-img"
    }
    #reg-img{
        width:300px;
        margin-left:-20px
    }
    #reg-title{
        margin-top:90px;
        margin-left:-30px
    }
    fieldset{
        margin-top: 20px;
        width: 230px;
        grid-area: fieldset;
        margin-left:-30px
    }
}