body, html{
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Avenir', sans-serif;
}
.contentDescription{
    padding: 0 2em 0 2em;
    font-size: 1em;
}
#theme{
    width: 100%;
}

#VBS{
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    background-color: #1A1C19;
    padding-bottom: 1em;
}

#nbt, #teenweek{
    grid-column: span 1;
    width: 100%;
}

#nbt :hover, #teenweek :hover{
    filter: drop-shadow(1px 1px 10px lightgoldenrodyellow);
}

a{
    text-decoration: none;
    color: black;
}
a:visited{
    color: black;
}

#gridContainer{
    text-align: center;
    height: max-content;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
#pageContainer{
    margin-top: 10%;
    text-align: center;
    height: max-content;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

#showcase{
    grid-column: span 8;
    height: max-content;
    background-color: #1A1C19;
}

#slideshow{
    background-repeat: no-repeat;
    background-size: 100%;
}

#livestream{
    margin-top: 9%;
    width: 100%;
    margin-bottom: -4em;
}

.box{
    margin-top: 2em;
    text-align: center;
    font-size: 0.9em;
    color: black;
    grid-column: span 4;
}
.imageBox{
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
    font-size: 0.9em;
    color: black;
    border: 0px dotted blue;
    grid-column: span 5;
    height: max-content;
    align-self: center;
}
.imageBox .contentImage{
    width: 95%;
}

.textBox{
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
    font-size: 0.9em;
    color: black;
    border: 0px dotted blue;
    grid-column: span 3;
    height: max-content;
    align-self: center;
}
.textBox p{
    font-size: 1.2em;
}

.textBox em{
    font-size: .8em;
}

.footerBox{
    margin-top: 1em;
    text-align: center;
    font-size: 0.9em;
    color: black;
    grid-column: span 4;
    height: max-content;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none;
}

.contentImage{
    width: 90%;
    border-radius: 20px;
}

#showcase p{
    font-size: 1.3em;
    font-style: italic;
    font-family: 'Times New Roman', serif;
    color: white;
    padding-left: 3em;
    padding-right: 3em;
    border-radius: 20px;
}
#showcase em{
    font-style: normal;
    color: lightblue;
}

#social{
    text-align: center;
    font-size: 1em;
    background-color: rgb(6, 14, 56);
    color: lightblue;
    border: 0px red dotted;
    height: 100%;
    padding: .3em;
}
#fb{
    width: 5%;
    margin-top: 5px;
}

#bottom{
    text-align: center;
    font-size: 1em;
    background-color: #042404;
    color: lightgoldenrodyellow;
    border: 0px red dotted; /* Used for Testing */
    height: 100%;
    padding: .3em;
}

/************************************
Responsive Web Design Code Below
************************************/

@media screen and (min-width: 1920px){
    .contentDescription{
        display: none;
    }
    body{
        margin-top: 10%;
    }
    #gridContainer{
        height: max-content;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        text-align: center;
    }
    #pageContainer{
        height: max-content;
        text-align: center;
    }
    #pageContainer .box{
        margin: 1em 2em 0em 2em;
        grid-column: span 4;
    }
    #pageContainer .contentImage{
        width: 95%;
    }
    #theme{
        border-radius: 20px;
        width: 100%;
    }
    #slideshow{
        border-bottom-left-radius: 1%;
        border-bottom-right-radius: 1%;
        border-top-left-radius: 3%;
        border-top-right-radius: 3%;
    }
    #showcase{
        margin: 1.5em;
        grid-column: span 2;
        grid-row: span 2;
        border-radius: 20px;
    }
    .box{
        grid-column: span 1;
        padding: 0;
    }
    #social{
        grid-column: span 2;
    }
    #bottom{
        grid-column: span 2;
    }

    #nbt {
        border-bottom-left-radius: 20px;
    }
    #teenweek{
        border-bottom-right-radius: 20px;
    }
    #VBS{
        border-radius: 20px;
    }
}

@media screen and (max-width: 720px) and (orientation: portrait) {
    p{
        font-size: .8em;
        font-style: normal;
        font-family: 'Avenir', sans-serif;
    }
    #gridContainer{
        margin-top: 3em;
        grid-template-columns: 1fr 1fr;
    }
    #showcase{
        grid-column: span 2;
    }
    .box, .textBox, .imageBox, .footerBox {
        grid-column: span 2;
    }
    #pageContainer{
        margin-top: 20%;
        grid-template-columns: repeat(2, 1fr);
    }
    #imageAlt{
        grid-row-start: 3;
    }
    #textAlt{
        grid-row-start: 4;
    }
    .contentDescription{
        font-size: 1.1em;
    }
    #livestream{
        padding-top: 12%;
        background-color: black;
    }

    #nbt, #teenweek{
        grid-column: span 2;
    }

}