@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');

/* Style the navbar */
/* Style the navigation bar */

.sad{
  margin: 0px;
}

.video-container {
 
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-50%,-50%);
}

body{
  background-color: #000000;
}



.description{
  font-size:50px;
  color:white;
  text-align:center;
  font-family: 'Rubik', sans-serif;
}

.writing{
  font-size:20px;
  color:white;
  text-align:center;
  font-weight:400;
}


.please-desc{
  word-wrap: break-word;
  float:left;
  width:1000px;
  color: white; 
  font-family: 'Rubik', sans-serif;
  font-size:20px;
  font-weight:200;
  padding-left:20px;
}

.please{
  word-wrap: break-word;
  float:left;
  width:1000px;
  color: white; 
  font-family: 'Rubik', sans-serif;
  font-size:40px;
  padding-left:20px;
}

.float{
  padding:80px;
  float:right;
  width: fit-content;
  height:auto;
}

.margin{
  padding-top:200px;
}

.grid-container{
  display: inline-grid;
  grid-row-gap:20px;
  grid-column-gap:20px;
  padding:20px;
}

.grid-item{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:3;
}

.item2{
  grid-column-start:3;
  grid-column-end:4;
  grid-row-start:1;
  grid-row-end:2;

}

.text{
  word-wrap: break-word;
  float:left;
  width:fit-content;
  color: white; 
  font-family: 'Rubik', sans-serif;
  font-size:20px;
  font-weight:200;
  
}

#item3{
  grid-column-start:1;
  grid-column-end:2;
  grid-row-start:3;
  grid-row-end:4;

}

.button{
   background-color: #121212;
   transition-duration: 0.4s;
   text-decoration:none;
   text-align:center;
   display: inline-block;
   color:white;
   padding: 26px 22px;
   font-family: 'Rubik', sans-serif;
   border-radius: 12px;
   font-size: 50px;
   font-weight:200;
}
.button:hover{
  background-color:#f3f3f3;
  color:black;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.button1{
  grid-column-start:1;
  grid-column-end: 2;
  grid-row-start:1;
  grid-row-end:2;
}

.button2{
  grid-column-start:3;
  grid-column-end: 4;
  grid-row-start:1;
  grid-row-end:2;
}