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:"Creepy" ;
    src: url(fonts/Creepy/CreepyMelter-V4o4y.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%;
}

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

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


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

main #maincontainer #resume{
    text-align: center;
    font-family: "Creepy";
    font-size: 70px;
    color: antiquewhite;
}

main #maincontainer #techincalskills p{
    font-family: "Broadwayit";
    text-align: center;
    padding: 10px;
    font-size: 30px;
}
#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;
}

/*-------------Resume/TechSkills------------------------*/

main #centercontent #resume iframe{
    width: 50%;
    height: 100vh;
    text-align: center;
}

main #centercontent #resume p a{
   text-decoration: none;
}

main #centercontent h1{
    text-align: center;
    font-family: "Creepy";
    
}
main #centercontent #interst{
    text-align: center;
    font-family: "Broadwayit";
    
}
main #maincontainer #technicalskills {
    display: flex;
    justify-content: space-between;
    
}

main #maincontainer #techincalitems{
    text-align: center;
    font-family: "Broadwayit";
     border: 7px solid #ffde97;
     border-radius: 20px;

    
}
main #maincontainer #techincalitems img{
    width: 30%;
    border-radius: 10px;
}

/*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;
}

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