html{
    background-color: #444444;
}

body{
    background-color: #222222;
    display: grid;
    grid-template-areas: 
        "header header"
        "departmentLogo departmentlogo"
        "sidebar main"
        "footer footer";
        grid-template-columns: 1fr 4fr;
    grid-template-rows: auto;
    border-left-style: outset;
    border-right-style: outset;
    border-left-color: #222222;
    max-width: 80%;
    margin: auto;
}

h1, h2, h3, h4, h5, h6, p, button{
    color: white;
    font-family: "Play", sans-serif;
}

a{
    text-decoration: none;
}

button{
    cursor: pointer;
}

.icon{
    max-width: 50px;
}

/* drop down */
.DD{
    position: block;
}
.DDbutton{
    background-color: #444444;
    color: white;
    padding: 16px;
    font-size: 16px;
    border-color: #111111;
    border-style: solid;
    cursor: pointer;
}
.DDcontent{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.DDcontent a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.DD:hover .DDcontent{
    display: block;
}


/* header */
header{
    grid-area: header;
    grid-row: 1/2;
    background-color: #666666;
    display: grid;
    grid-template-areas: 
        "mainLogo button1 button2 button3"
        "department1 department2 department3 department4";
    grid-template-rows: 80px 40px;
    justify-items: center;
    align-items: center;
}

#departmentsDD{
    display: none;
    grid-area: departmentsDD;
}


#otherDD{
    display: none;
    grid-area: otherDD;
}



#headerLogo{
    max-width: 150px;
}

.headerButton{
    display: inline;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    color: #000000;
}

.departmentTab{
    display: inline;
    background-color: #222222;
    color: white;
    padding: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 15px;
    border-style: outset;
    border-bottom-style: solid;
    border-bottom-color: #666666;
    margin-top: 5px;
}

.departmentTab:hover{
    animation-name: departmentTabAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}


/* sidebar */
.sidebar{
    background-color: #222222;
    grid-area: sidebar;
    grid-row: 3/4;
}

.sidebarButton{
    border-bottom-style: inset;
    border-color: #666666;
    background-color: #222222;
    text-align: center;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    max-height: 40px;
    min-height: 40px;
}

.sidebarButton:hover{
    animation-name: slideToRight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.departmentLogo{
    max-height: 75px;
    justify-self: center;
    grid-area: departmentLogo;
}

#sidebarDD{
    display: none;
    grid-area: sidebarDD;
    justify-self: center;
    align-self: center;
}

/* main content */
.mainContent{
    grid-area: main;
    grid-row: 3/4;
    background-color: skyblue;

    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-areas: 
        "margin1 item1 margin2"
        "margin1 item2 margin2"
        "margin1 item3 margin2"
        "margin1 item4 margin2"
        "margin1 item5 margin2"
        "margin1 item6 margin2"
        "margin1 item7 margin2";
}
/*footer*/
footer{
    background-color: #000000;
    border-top-style: inset;
    grid-area: footer;
    grid-row: 4/5;
    display: grid;
    grid-template-areas:
        'ownership contact'
        'copyright social';
    justify-items: center;
    box-shadow: 0 50vh 0 50vh #000;
}

.contact{
    grid-area: contact;
}

.social{
    grid-area: social;
}

.ownership{
    grid-area: ownership;
}

.copyright{
    grid-area: copyright;
}


.carousel{
    margin: 40px;
    display: block;
    border-color: #000000;
    border-style: solid;
}

/*carousel resembles w3 schools*/

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;
    grid-template-areas:
        'image image title'
        'image image description'
        'image image tagline';}
img {vertical-align: middle;}


/* Caption text */
.carouselDescription {
    grid-area: description;
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  bottom: 8px;
  width: 100%;
}

.carouselImage{
    grid-area: image;
    height: auto;
    max-width: 75%;
    justify-self: center;
}

.carouselTitle{
    grid-area: title;
}

.carouselTagline{
    grid-area: tagline;
}


/* The dots/bullets/indicators */


.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/*end of carousel*/

.departmentSelector{
    grid-area: item4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #666666;
    border-color: #000000;
    border-style: solid;
    justify-items: center;
    align-items: center;
}

.defaultHeader{
    grid-area: item1;
}

.defaultPageDescription{
    grid-area: item2;
}

.filler{
    padding: 1fr;
}

/*index page*/
#indexBody{
    grid-template-areas:
        "header header"
        "main main"
        "footer footer";
}
#indexContent{
    background-color: #222222;
}

#departmentDescription{
    grid-area: item5;
    color: white;
    margin: 20px;
    border-style: solid;
    border-color: #000000;
    padding: 30px;
}

#newsHeader{
    grid-area: item1;
}

#departmentHeader{
    grid-area: item3;
}

#indexCarousel{
    grid-area: item2;
}

/*staff*/
#staff{
    grid-template-areas: 
        "header header"
        "main main"
        "footer footer";
}

.staffH{
    color: #000000;
}

.staffP{
    color: #000;
}

.staffMember{
    display: grid;
    grid-template-areas: "picture bio social";
    border: #000000 double;
    margin: 10px;
}

.staffImg{
    grid-area: picture;
    max-width: 150px;
    margin: 10px;
    border: #000000 solid;
}

.staffBio{
    grid-area: bio;
}

.staffSocials{
    grid-area: social;
    display: grid;
    grid-template-areas: 
        "link1"
        "link2"
        "link3";
}


/*Marquis Studios*/

.MSText{
    color: black;
}

.MSHeader{
    color: #001df6;
    -webkit-text-stroke: 0.5px #000000;
}

#MSContent{
    grid-area: main;
    background-color: #fc8900;
}

#MSNewsHeader{
    grid-area: item1;
}

#MSCarousel{
    grid-area: item2;
}

#MSHeader{
    grid-area: item3;
}

#MSDescription{
    grid-area: item4;
}

.channelTab{
    display: grid;
    grid-template-areas: "description video image";
    grid-template-columns: 3fr 1fr 1fr;
    border-style: double;
    border-width: 5px;
    margin: 5px;
}

.channelDescription{
    grid-area: description;
    margin: 10px;
}

.latestVideo{
    grid-area: video;
    margin: 10px;
}

.YTicon{
    max-width: 130px;
    border-radius: 100%;
    margin: 10px;
}

.gameTab{
    display: grid;
    grid-template-areas:
        'image title'
        'image description'
        'image links';
    border-style: double;
    border-width: 5px;
    margin: 5px;
}



/*animations*/

@keyframes slideToRight {
    to{transform: translateX(10px);}
}

@keyframes departmentTabAnimation {
    100%{transform: scale(1.25, 1.1);}
}

/*Mobile settings*/

@media only screen and (max-width: 600px) {
    /* body */
    body{
        grid-template-areas:
            "header header"
            "sidebarDD departmentLogo"
            "main main"
            "footer footer";
        grid-template-columns: 1fr 3fr;
        max-width: 100%;
    }
    .sidebar{
        display: none;
    }
    #sidebarDD{
        display: block;
    }
    
    /* header */
    header{
        grid-template-areas: 
            "departmentsDD mainLogo otherDD";
    }
    #departmentsDD{
        display: block;
    }
    #otherDD{
        display: block;
    }
    #storeButton,
    #staffButton,
    #department1,
    #department2,
    #department3,
    #department4{
        display: none;
    }

    /* footer */
    footer{
        grid-template-areas: 
            "contact"
            "social"
            "ownership"
            "copyright";
    }

    /* carousel */
    .mySlides{
        grid-template-areas:
            "image"
            "title"
            "description"
            "tagline";
    }

    /* Marquis Studios */
    .channelTab{
        grid-template-areas:
            "video video video"
            "description description image"
            ;
    }

}