.HeroBanner {
    width: 100%;
    height: auto;
}

body{
    background: black;
    position: relative;
}

.contentwrapper{
    width: auto;
    height: 700px;
    position: relative;
    display: block;
    overflow: hidden;
}

.bodyBackground{
    opacity: 0.5;
    position: absolute;
    display: block;
    top: 20%;
    left: 50%;
    width: auto;
    height: 100%;
    margin-top: -250px; /* Half the height */
    margin-left: -250px; /* Half the width */
    z-index: -1;
}

nav a{
    display:block;
    text-align: center;
    position: relative;
    text-decoration: none;
    color: white;
    font-size: large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

nav{
    position: relative;
    z-index: 1;
    width: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 10%;
}


.bio{
    width: 100%;
    color: white;
    text-align: center;
    position: relative;
    z-index: 1;
}

.bio img{
    width: 20%;
    height: auto;
}

.bio p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.shows{
    width: 100%;
    color: white;
    text-align: center;
    position: relative;
    z-index: 1;
}

.shows p{
    text-align: center;
}

.shows img{
    width: 40%;
}

.shows p {
    padding-top: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

 footer{
    position: absolute;
    text-align: center;
    bottom: 0%;
    width: 100%;
    height: 1.5rem; 
}

 footer img{
    height: 100%;
    width: auto;
    padding: 4%
}

label{
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

form{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
    width: 100%;
    height: auto;
}

.forminstructions{
    color: white;
    text-align: center;
    z-index: 1;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

input{
   width: 100px;
}

textarea{
    width: 150px;
    height: 100px;
}

.pictitle{
    text-align: center;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.pictures{
    width: 100%;
    height: 80%;
    overflow: scroll;
}

.pic{
    width: 75%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.vidtitle{
    text-align: center;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.clip{
    width: 75%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.video{
    width: 100%;
    height: 75%;
    overflow: scroll;
}

.vid{
    width: 100%;
    height: auto;
}

@media screen and (max-width: 154px){

    .shows p{
        font-size: x-small;
    }
}

@media screen and (max-width: 169px){
    nav a{
        font-size: smaller;
    }

    .biotext{
        font-size: x-small;
        
    }

    .shows{
        font-size: smaller;
    }

    .shows img{
        width: 25%;
    }

    .bio img{
        width: 10%;
    }
}

@media screen and (max-width: 228px){
    .biotext{
        font-size: smaller;
        
    }
    .shows p{
        font-size: smaller;
    }

    .shows img{
        width: 30%;
    }

    .bio img{
        width: 15%;
    }
}

@media screen and (min-width: 525px){
    .bio p{
        width: 80%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .bio img{
        width: 15%
    }

    .shows img{
        width: 30%;
    }
}

@media screen and (min-width: 672px){
    .bio p{
        width: 65%;
    }

    footer{
        height: 2.5rem; 
    }
}

@media screen and (min-width: 807px){
    .contentwrapper{
        height: 900px;
    }

    .bodyBackground{
        top: 20%;
        left: 40%;
    }
}

   
@media screen and (max-width: 900px){
    .HeroBanner2{
        display: none;
    }
}

@media screen and (min-width: 900px){
    .HeroBanner{
        display: none;
    }

    .HeroBanner2{
        width: 100%;
        height: auto;
    }

@media screen and (min-width: 916px){
    p{
        font-size: larger;
    }
}

@media screen and (min-width: 1100px){

    p{
        font-size: x-large;
    }

    .contentwrapper{
        height: 1000px;
    }

    .bodyBackground{
        top: 20%;
        left: 40%;
    }

    nav a{
        font-size: x-large;
    }

    }

    @media screen and (min-width: 1200px){
        .bio p{
            width:50%;
        }

        .bio img{
            width: 10%;
        }

        .shows img{
            width: 25%;
        }
    }

    @media screen and (min-width: 1400px){
        .contentwrapper{
            height: 1200px;
        }
    
        .bodyBackground{
            top: 20%;
            left: 36%;
        }
        .bio img{
            width: 7%;
        }

        .shows img{
            width: 15%;
        }

        p{
            font-size: xx-large;
        } 
    }

    @media screen and (min-width: 1600px){
        .bodyBackground{
            top: 20%;
            left: 39%;
        }
    }

    @media screen and (min-width: 2000px){

        .contentwrapper{
            height: 1500px;
        }

        .bodyBackground{
            top: 20%;
            left: 34%;
        }

        nav a{
            font-size: xx-large;
        }

        footer{
            height: 4.5rem; 
        }
    }

    @media screen and (min-width: 2200px){
        .bodyBackground{
            top: 20%;
            left: 36%;
        }

        .bio p{
            width:40%;
        }

        .bio{
            padding-top: 5%;
        }
    }

    @media screen and (min-width: 2600px){
        .contentwrapper{
            height: 1800px;
        }

        .bodyBackground{
            top: 20%;
            left: 33%;
        }

        nav a{
            font-size: 300%;
        }
    }

    @media screen and (min-width: 2800px){
        .bodyBackground{
            top: 20%;
            left: 36%;
        } 
    }

}

/*Viewport rules for form page*/
@media screen and (min-width: 534px){
    .forminstructions{
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 833px){
    .forminstructions{
        font-size: x-large;
    }

    label{
        font-size: x-large;
    }

    input{
        width: 200px;
     }
     
     textarea{
         width: 250px;
         height: 200px;
     }
}

@media screen and (min-width: 1458px){
    input{
        width: 300px;
     }
     
     textarea{
         width: 350px;
         height: 300px;
     }
}

@media screen and (min-width: 2000px){
    .forminstructions{
        width: 40%;
    }

    input{
        width: 400px;
     }

     textarea{
        width: 450px;
        height: 400px;
    }

    button{
        width: 100px;
        height: 40px;
    }

    @media screen and (min-width: 2400px){
        .forminstructions{
           font-size: 40px;
        }
    
        input{
            width: 500px;
         }
    
         textarea{
            width: 550px;
            height: 500px;
        }

        label{
            font-size: 40px;
        }
    }

    @media screen and (min-width: 3000px){
        .forminstructions{
            font-size: 50px;
         }
     
         input{
             width: 500px;
          }
     
          textarea{
             width: 550px;
             height: 500px;
         }
 
         label{
             font-size: 50px;
         }
    }

}

/*viewport rules for video page*/
    @media screen and (min-width: 504px){
    .clip{
        width: 60%;
    }
}

@media screen and (min-width: 626px){
    .clip{
        width: 50%;
    }
}

@media screen and (min-width: 2500px){
    .clip{
        width: 40%;
    }
}

/*viewport rules for images page*/
@media screen and (min-width: 870px){
    .pic{
        width: 60%;
    }
}

@media screen and (min-width: 1300px){
    .pic{
        width: 45%;
    }
}