*{
padding:0;
margin:0;
box-sizing: border-box;
}


html,body{width:100%;
height:100%;
}


#hero{width:100vw;
height:100vh;

display:flex;
align-items:center;
justify-content:center;
background-size:cover;
background-image:url("hero.jpg");}



#container{width:81vw;
height:81vw;
border-radius:30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
over-flow:hidden;
background-size:cover;
box-shadow:0px 0px 100px 1px #444;
background-image:url("container.jpg");
transition:all ease-in-out 3s;

}


.box{
transition:all ease-in-out 3s;
display:flex;
justify-content:center;
color:white;
font-size:8vh;
width:27vw;
height:27vw;
font-weight:bold;
align-items:center;
border:1px solid #aaa;
font-family: "Pacifico", cursive;

  font-style: normal;
}

.top{
border-top:none;}
.bottom{
border-bottom:none;}
.left{
border-left:none;}
.right{
border-right:none;}

#title{position:fixed;
color:white;
font-size:6vh;
font-family: "Pacifico", cursive;
font-weight: 800;
font-style: normal;
top:13vh;}


#admin{position:fixed;
top:22vh;
font-family: "Ga Maamli", sans-serif;
right:10vh;
color:white;}


#hero button{position:fixed;
width:20vh;
border:none;
border-radius:20px;
height:8vh;
background-size:cover;
color:white;

font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
font-size:3.5vh;
background-image:url("button.png");
bottom:10vh;}



#start{
width:100vw;
height:100vh;
position:fixed;

overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
transition:all ease-in-out 3s;

}



#start video {
object-fit:cover

mix-blend-mode:screen;

      }
      
      
 #start a {
 
 border: 1px solid white;
 padding:1vh;
 border-radius:50%;
 position:fixed;
 color:white;

 text-decoration:none;
 top:1vh;
 right:1vh;
 }
 
 
 #winceleb{
 width:0vw;
 over-flow:hidden;
 height:0vh;
box-shadow:0px 0px 50px 1px #444;
 border-radius:30px;
 color:white;
 display:flex;
flex-wrap:nowrap;
 align-items:center;
 justify-content:center;
 background-size:cover;
  white-space:nowrap;
  
 background-image:url("Winn.jpg");
 position:fixed;
z-index:6;


 }
 


#winceleb h1{


  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
font-size:3.5vh;
font-family: "Trade Winds", system-ui;
scale: 0.5;

 transition:all ease-in-out 3s;

}

#newvdieo{
position:fixed;
left:0;

}

