body{
    background-image: url('assets/bkgrnd.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
  }

  h1{
      font-size:5vw;
      color:white;
      text-align:center;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(93, 57, 255) 65%);
  }

  #mainbody{
      display:grid;
      grid-template-columns:40% 60%;
      grid-template-rows:35vw 40vw 35vw;
      margin:3vw;
  }

  #mainbodyPg6{
    display:grid;
    grid-template-columns:50% 50%;
    grid-template-rows:40vw 40vw;
    margin:3vw;
}

  .text{
    padding:2vw;
    background-color:rgb(93, 57, 255);
    font-size:2.6vw;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white
  }

  #slidescontrol{
      display:flex;
      justify-content:center;
      align-items:center;
  }

  button{
      margin:5vw;
      width:15vw;
      height:6vw;
      border-radius:20px;
      font-size:2vw;
      border:none;
      text-align:center;
      color: white;
      background-color:rgb(93, 57, 255);
  }

  button:hover{
      background-color:rgb(95, 159, 255);
  }



#slider{
    overflow: hidden;
}


#slider figure{
    position: relative;
    width: 500%;
    margin:0;
    left:0;
    animation: 20s slider infinite;
}

#slider figure img{
    float:left;
    width:20%
}

@keyframes slider{
    0%{
        left: 0;
    }
    20%{
        left: 0;
    }
    25%{
        left: -100;
    }
    45%{
        left: -100;
    }
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
    75% {
        left: -300%;
    }
    95% {
        left: -300%;
    }
    100% {
        left: -400%;
    }
}