.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

@font-face {
    font-family: 'Cooltext';
    src: url(../fonts/Homenaje-Regular.ttf);
}

@font-face {
    font-family: 'SpaceMono';
    src: url(../fonts/DiplomataSC-Regular.ttf);
}

/*INDEX COVER PAGE CSS*/

#cover {
    background: url(../images/trashfirealbumcover.png) no-repeat center;
    background-position-y: 0;
    background-position-x: 50%;
    background-size: auto;
    background-color: black;
    overflow: hidden;
}

.enterlink {
    background: url(../images/kindastupidlogo.gif) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 220px;
    height: 100px;
    background-size: contain;
    padding-top: 15em;
    opacity:0.8;

}





/*MAIN SITE STYLING*/
/*This is just to help me from getting lost between pages!*/


nav.navigation {
    background-color: transparent;
    color: #ffbb55;
}

.top_nav_buttons {
    border-style: groove;
    border-color: #ffbb55;
    background-color: black;
    padding: 7px;
    color: #ffbb55;
    margin: 0 2em 0 2em;
}

.top_nav_buttons:hover {
    color: #fcf800;
    border-color: #fcf800;
}

.top_nav_buttons:active {
    color: #fcf800;
    border-color: #fcf800;
}

body{
        background-color: black;
}


#mainsite {
    background: url(../images/trashfirelogo2.jpg) no-repeat fixed;
    background-color: black;
    background-size:cover;
}

.maindiv {
    text-align: center;
    margin-left: 20%;
    margin-right: 20%;
}

.navigation {
    height: 2em;
    text-align: center;
    background-color: rgb(138, 43, 43);
    font-family: 'Cooltext', 'Arial Narrow', Arial, sans-serif;
    font-variant: small-caps;
    padding-bottom: 1%;
    padding-top: 3%;
    color: #ffbb55;
    font-size: 24px;
}

.infosection {
    border-style: double;
    border-color: #ffbb55;
    background-image: url(images/trashfirelogo.jpg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-position: top;
    color: #ffffff;
    background-color: rgb(0, 0, 0);
    opacity: 0.9;
}

.headerlogo {
    background: url(../images/3Dhomelogo.gif) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 220px;
    background-size: contain;
    padding-top: 4em;
}

#home_p{
    color: #ffbb55;
}

.top_p {
    padding: 0 5em 0 5em;
    font-family: 'Cooltext', 'Arial Narrow', Arial, sans-serif;
    font-size: x-large;
}

p {
    padding: 0 5em 0 5em;
    font-family: 'Cooltext', 'Arial Narrow', Arial, sans-serif;
    font-size: x-large;
}

.bottom_p {
    font-family: 'Cooltext', 'Arial Narrow', Arial, sans-serif;
    font-size: x-large;
    padding-bottom: 10%;
}

.home_video_header {
    padding: 0 5em 0 5em;
    text-align: center;
    color: #ffbb55;
    padding-top: 2%;
}

.video_section {
    margin-top: 3em;
    margin-bottom: 3em;
    border-style: double;
    border-color: #ffbb55;
    background-color: rgb(0, 0, 0, 0.9);
    padding-bottom: 3em;
}

.live_video {
    padding: 0 0 0 0;
    width: 720px;
    height: 480px;
    border-style: outset;
    border-color: #ffbb55;
}

audio::-webkit-media-controls-play-button,
    audio::-webkit-media-controls-panel{
        background-color: rgb(138, 43, 43);
        opacity: 0.9;
        color: #000;
    }

h4{
    font-family:'SpaceMono', Courier, monospace;
    padding-top: .5em;
    color: #ffbb55;
}

.audiofiles{
    color: #ffbb55;
    padding-bottom: 5em;
}

.home_video_venue{
    color: #ffbb55;
}






/*"CONTACT US" PAGE STYLING!*/


.contactuslogo {
    background: url(../images/3Dcontactuslogo.gif) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 220px;
    background-size: contain;
    padding-top: 4em;
}

.contactuslist {
    margin-right: 1.2em;
    text-align: center;
    font-family: 'Cooltext', 'Arial Narrow', Arial, sans-serif;
    font-size: x-large;
    list-style: none;
}

a {
    text-decoration: none;
    color: #ffbb55;
}

a:hover {
    color: #fcf800;
}

.emaillogo {
    background: url(../images/3Demaillogo.gif) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 300px;
    background-size: cover;
    padding-top: 4em;
}

.facebooklogo {
    background: url(../images/facebook-icon.jpg) no-repeat center;
    width: 100px;
    background-size: contain;
    padding-top: 4em;
}

.instagramlogo {
    background: url(../images/instagramlogo.jpg) no-repeat center;
    width: 100px;
    background-size: cover;
    padding-top: 4em;
}

.facebookinsta {
    margin-right: auto;
    margin-left: auto;
    display: flex;
    width: 100px;
    padding: 30px;
}



/*ABOUT US PAGE*/

.aboutuslogo {
    background: url(../images/3Daboutuslogo.gif) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 220px;
    background-size: contain;
    padding-top: 4em;
}

.aboutustitle {
    font-family: 'Cooltext', 'Arial Narrow', Arial, sans-serif;
    font-weight: normal;
    font-size: 32px;
}

.bandphoto1 {
    background: url(../images/bandphoto2.jpeg) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    background-size: contain;
    height: 600px;
    padding-top: 4em;
}

.bandphoto2 {
    background: url(../images/bandphoto1.JPG) no-repeat center;
    display: block;
    margin-right: auto;
    margin-left: auto;
    background-size: contain;
    height: 600px;
    padding-top: 4em;
    margin-bottom: 4em;
}

.aboutus_p {
    padding-top: 2em;
    padding-bottom: 2em;
}






/*CHANGING VIDEO SIZE WHEN UNDER 1300PX*/
/*I did this to ensure I had the largest video size for any size screen (within reason of course)*/


@media screen and (max-width:1300px) {
    .live_video {
        width: 480px;
        height: 360px;
    }

    .maindiv {
        margin-left: 10%;
        margin-right: 10%;
    }

    .top_nav_buttons {
        margin: 0 .75em 0 .75em;
        white-space: nowrap;
        display: inline;
    }

    .bandphoto1 {
        height: 400px;
    }

    .bandphoto2 {
        height: 400px;
    }
}





/*SMALLER SCREEN STYLING (CELL PHONES/TABLETS)*/
/*WHENEVER SCREEN GOES BELOW 600PX*/

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

    .navigation {
        height: 2em;
        padding-top: 1em;
    }

    .top_nav_buttons {
        font-size: 20px;
        margin: 0;
    }

    .maindiv {
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
    }

    #cover {
        background-position-y: 6rem;
        background-size: cover;
        overflow: visible;

    }

    .enterlink {
        background-position-y: 6.5em;
        background-size: 80%;
    }
    
    .live_video {
        width: 310px;
        height: 195px;
    }

    p {
        padding: 0 .5em 0 .5em;
    }

    .top_p {
        padding: 0 .5em 0 .5em;
    }

    .bottom_p {
        padding: 0 .5em 0 .5em;
    }

    .home_video_header {
        padding: 0 .5em 0 .5em;
    }

    .bandphoto1 {
        height: 200px;
        width: 90%;
    }

    .bandphoto2 {
        height: 200px;
        width: 90%;
    }
    



}