html, body{
    margin: 0;
    padding: 0;
    
}

@font-face {
  font-family: "Showtime";
  src: url("fonts/Showtime/Showtime.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Broadway";
  src: url("fonts/broadway/Broadway3DFilled.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family:"Indiana" ;
    src: url(fonts/Indiana/Indiana-Jonas-48p.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Broadwayit";
  src: url("fonts/broadway/Broadway\ bt.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  
}

a:link{
    color:antiquewhite;
}
a:visited{
    color:antiquewhite;
}
a:hover{
    color:rgb(174, 144, 104);
}
a:active{
    color:antiquewhite;
}


/*HEADER*/
header{
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
  
}

header p {
    text-align: center;
    margin: 0;
    padding: 0;
    
    
}
header ul {
    border: 10px solid black;
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 1000;
    border: 40px solid transparent;
    


}

header ul li{
    
    list-style: none;
    font-size: 20px;
    font-family: "Showtime",sans-serif;
    color: antiquewhite;

}


/*MAIN*/ 

    /*now playing*/
main #nowplaying{
    height: 100vh;
    background-color: black;
    background-image:url(https://img.freepik.com/premium-vector/red-curtain-with-spotlight-theater-velvet-fabric-cinema-curtain_35947-190.jpg?w=740) ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: rgb(232, 230, 211);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* animation-name: fadein;
    animation-duration: 10s;
    animation-delay: 3.25s; /* ✅ fixed */
    animation: fadein  ease 5s forwards;
    font-family: "Showtime";
}

main #nowplaying p {
    text-align: center;
    font-size: 60px;
}

main #nowplaying img{
   width: 60%;
   border-radius: 5%;
}

main #nowplaying #arrowdown{
    width: 15%;
}

@keyframes fadein{
    0%{ 
        opacity: 0;
    }
    
    100%{
        opacity: 1;
    }
}


main #maincontainer {
    color: white;
    background-color: black;
    display: flex;
    justify-content: space-between;
    
}

#rightbuffer {
    background-color: black;
    width: 5%;
    z-index: 7;
}
#leftbuffer {
    background-color: black;
    width: 5%;
    z-index: 7;
}

/*Bottom*/

#bottom{
    position: fixed;
    bottom:0;
    background-color: black;
    height: 5%;
    width: 100%;
    z-index: 7;
}

/*-------------Vision/Methods------------------------*/

main #maincontainer #vision h2{
    text-align: center;
    font-family: "Indiana";
    font-size: 70px;
    color: rgb(245, 179, 57);
    
}
main #maincontainer #vision p{
    font-family: "Broadwayit";
    color: antiquewhite;
    font-size:30px ;
    
}

main #maincontainer #vision img{
    height: 10%;
    width: 70%;
    border-radius: 10%;
      
}
main #maincontainer #vision{
     text-align: center;
}

main #maincontainer #coolqoutes{
    text-align: center;
    font-family: "Broadwayit";
    color: antiquewhite;
}

main #maincontainer #servicesolutions{
    display: flex;
    text-align: center;
    align-items: center;
    
}
main #maincontainer #servicesolutions h3{
    font-family: "Indiana";
    font-size: 80px;
    color: rgb(245, 179, 57);
    
}
main #maincontainer #servicesolutions p{
    font-family: "Broadwayit";
    font-size: 30px;
    color: antiquewhite
}
main #maincontainer #servicesolutions img{
    width: 50%;
     border-radius: 5%;
}


/*Style Change*/
footer #stylechange{
    position:fixed;
    bottom:10px;
    left: 10px;
    width: 100px;
    
    z-index: 100;
}
footer #stylechange img{
    width: 100%;
    height: 100%;
    text-align: center;
    align-self: center;
      border-radius: 5%;
    
    
}

footer #stylechange button{
    text-align: center;
    border-radius: 100%;
    background-color: rgb(225, 219, 219);
}