.hero {

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 3;
    overflow: hidden;
    width: 100%;
    min-height: 850px;
    
    background-color: rgb(15,15,15);


}

.hero video {

    pointer-events: none;
    position: absolute;
    min-width: 100%;
    min-height: 100%;

}

@media (max-width: 900px) {

    .hero video {
        display: none;
        min-width: 50%;
    }

    .hero {
        background-image: url(images/mobile.gif);
        background-position: center;
        min-height: 700px;
    }

} 

/* end of video styling */

/* main content styling  */


main {
    display: flex;
    flex-flow: row;
    margin-top: 800px;
    position: relative;
    background-color: rgb(15, 15, 15) ;
    width: 100%;
    height: 870px;
    z-index: 4;
    color: rgb(247, 247, 247);
}



.square {
    display: flex;
    flex-flow: column;
    justify-content: center;
    height: 900px;
    width: 100%;
    padding: 3rem;
    align-items: center;
}

.square a {
    color: white;
}

.square a:hover {
    color:  #e6ae2a;
}


.square img {
    margin: 2rem;
    
    width: 480px;
}

.coming img:hover {

}

h2 {
    text-align: center;
}

p {
    text-align: center;
}

.vid {
    margin: 2rem;
}




@media (max-width: 1100px) {

    .square img {

        
        width: 400px;    
    }

    

}

@media (max-width: 900px) {
    main {
        margin-top: 700px;
        flex-flow: column;
        height: 1400px;
    }

    .square {

        height: 800px;
    }

    /* .music {
        height: 560px;
        margin-top: -15px;
    } */


} 

@media (max-width: 800px) {

   .square img {
    margin: 0;
   }

}

@media (max-width: 600px) {
    .vid {
        width: 400px;
    }
}

@media (max-width: 400px){


    .square img {
        
        width: 350px;    
    }

    .vid {
        width: 350px;
    }

}

@media (max-width: 380px){
    .square img {
        
        width: 340px;
    }
}

/* end of main content styling */


/* tahj image */

.tahj {
    position: relative;
    background-image: url(images/tahj-3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 2000px;
    height: 900px;
    z-index: 4;
}

/* end of tahj image  */