*{margin: 0px;
  padding: 0px;}
  
  body{      font-family: 'Source Sans Pro', sans-serif;
background-color: black;
    background-image: url(cover.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  } 

  header
  {
     width: 100%;
  height: 100px;
display: flex;
align-content: center;
text-align: center;
justify-content: space-between;
}
  
  
  
  .but1 {
    margin: 20px;
    height: 45px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    flex-wrap: nowrap;
    flex-direction: column;
    border-style: none;
    background-color: rgba(255, 255, 255, 0.151);
    transition-duration: 0.5s;
    font-size: 15px;
    font-family: arial;
    list-style-type: none;
    text-decoration: none;
  }
  
  
  .a1 { list-style-type: none;
    text-decoration: none;
    color: black;}
  
    .a1:hover { list-style-type: none;
        text-decoration: none;
        color: black;}
        
  
  
  
        .but1:hover {        text-decoration: none;
            list-style-type: none;
            background-color: white;
            color: rgba(255, 255, 255, 0.4);
        
        }
  
  :root {
      --crsl-bg: transparent;
       
    }
     
  
  
    html > p, body > p {
      font-size: .95em;
      font-weight: bold;
      position: absolute;
      top: 7.5%;
      width: 100%;
      
      letter-spacing: 4px;
      text-transform: uppercase;
      text-align: center;
      color: white;
      user-select: none;
    }
     
     
    .carousel {
      position: relative;
      display: block;
      width: 100%;
      height: 100vh;
    
  
       
    }
    .carousel__prev, .carousel__next {
      position: absolute;
      bottom: -15%;
      transition: transform 0.25s ease;
    
    }
  
    
    .carousel__prev:hover, .carousel__next:hover {
      transform: scale(1.25);
      
    }
    .carousel__prev {
      left: 40%;
    }
    
    .carousel__next {
      right: 40%;
    }
     
    .carousel__slider{        padding: 100px 0 50px 0;
    }
  
    .carousel__body {
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    
    .carousel__body .carousel__slider {
      position: relative;
      transition: transform 1s ease-in-out;
      background: var(--crsl-bg);
      
    }
    
    .carousel__body .carousel__slider__item {
      position: relative;
      display: block;
      float: left;
      
      margin-left: 20px;
      margin-right: 20px;
    }
  
    
    .carousel__body .carousel__slider__item .item__3d-frame {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 5s ease-in-out;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    .carousel__body .carousel__slider__item .item__3d-frame:hover{  
      height: 250px;
      padding-top: 50px;
  }
    .carousel__body .carousel__slider__item .item__3d-frame:after {
     
      position: absolute;
      bottom: -15%;
      width: 100%;
      height: 40px;
      background: var(--box-shadow);
      
      transform: rotateX(90deg) translate3d(0px, -20px, 0px);
      opacity: 0.85;
    }
    .carousel__body .carousel__slider__item .item__3d-frame__box {
      display: flex;
      align-items: center;
      vertical-align: middle;
      text-align: center;
      position: absolute;
      width: 100%;
      height: 100%;
      justify-content: space-between;
       
       
      background: var(--box-bg);
      
    }
    .carousel__body .carousel__slider__item .item__3d-frame__box h1 {
      font-size: 7em;
      width: 100%;
      
      
    }
    .carousel__body .carousel__slider__item .item__3d-frame__box--right, .carousel__body .carousel__slider__item .item__3d-frame__box--left {
      top: 0;
      width: 40px;
      backface-visibility: hidden;
    }
    .carousel__body .carousel__slider__item .item__3d-frame__box--left {
      left: 0;
      
      transform: translate3d(1px, 0, -40px) rotateY(-90deg);
      transform-origin: 0%;
    }
    .carousel__body .carousel__slider__item .item__3d-frame__box--right {
      right: 0;
      
      transform: translate3d(-1px, 0, -40px) rotateY(90deg);
      transform-origin: 100%;
    }
    .one{
      height: 550px;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
  
      padding-top: 130px;
    }
    .one:hover{
      height: 600px;
    }