style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica;
   
}
body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.slide-container{
    width: 100vw;
    height: 100vh;
    position: relative;
    color: rgb(255, 255, 255);
}
.top-slide{
    top: 0;
    left: 0;
    width: auto;
    height: 65%;
    position: absolute;
    display: flex;
    flex-direction: row;
    transition: all .5s;
}
.top-slide > div{
   width: 100vw;
   height: 100%;
  

   
}
.bottom-slide{
   position: absolute;
   top: 65%;
   left:0;
   width: auto;
   height: 35%;
   display: flex;
   flex-direction: row;
    transition: all .5s;
}
.bottom-slide > div{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 width: 100vw;
 gap: 7px;
 font-size: 1.2rem;
 
}
.bottom-slide div h1{
    font-weight: lighter;
}
.bottom-slide div > p{
    font-size: .9rem;
    font-weight: bold;
}
.buttons{
   position: absolute;
   top:30%;
   display: flex;
   justify-content: space-between;
   width:100vw;
   flex-direction: row-reverse;
}
.buttons button{
   background-color: rgba(226, 226, 226, 0.438);
   outline: none;
   font-size: 1.5rem;
   border: none;
   padding:10px;
   color: rgb(51, 50, 50);
   border-radius: 50%;
}
.buttons button:hover{
    background-color: rgba(226, 226, 226, 0.76);
    color: black
}