.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  .yeseva-one-regular {
    font-family: "Yeseva One", serif;
    font-weight: 400;
    font-style: normal;
}

  body {
    background-image: linear-gradient(to bottom, #e6eeff, #b3ccff, #002db3,#660066);
    min-height: 150vh; 
    margin: 0; 
    scroll-behavior:auto;
}

.clapboard{
    position: absolute;
    opacity: 0.75;
    width: 190px;
    height: 300px;
    transform: translate(10px, -33px);
    z-index: -1;
  }

 .transparent-box{
    position: absolute;
    background-color:blue;
    opacity:0.5;
    height: 200px;
    width: 1955px;
    transform:translate(0px,-40px);
    z-index: -1;
  }

  @media only screen and (max-width:1024px) 
  {
     body {
      min-height: 226vh; 
      }

    .transparent-box{
          width:1075px;
        }
      a.btnc{
        transform: translate(650px, -180px);
        }

  }


  @media only screen and (min-width:1025px) and (max-width:1440px)
  {
     body {
      min-height: 226vh; 
      }

    .transparent-box{
          width:1490px;
        }
      a.btnc{
        transform: translate(1000px, -180px);
        }
  }

  @media only screen and (min-width:1441px) and (max-width:1540px)
  {
     body {
      min-height: 197.5vh; 
      }

    .transparent-box{
          width:1571px;
        }
      a.btnc{
        transform: translate(1132px, -180px);
        }
  }

  @media only screen and (min-width:1541px) and (max-width:1600px)
  {
     body {
      min-height: 132vh; 
      }

    .transparent-box{
          width:1601px;
        }
      a.btnc{
        transform: translate(1195px, -180px);
        }
  }

  @media only screen and (min-width: 1601px) and (max-width:1920px)
  {
      
    body {
      min-height: 151.5vh; 
      }

    .transparent-box{
          width:1955px;
        }
      a.btnc{
        transform: translate(1501px, -180px);
        }
  }
  @media only screen and (min-width: 1921px) and (max-width:2560px)
  {
      
    body {
      min-height: 128vh; 
      }

    .transparent-box{
          width:2610px;
        }

      a.btnc{
        transform: translate(2150px, -163px);
        }
  }


  @media only screen and (max-width:915px)
    { 
      .img2{
          height: 237px;
          width: 241px;
        }

      body{
        min-height: 205vh; 
        margin: 0;
        scroll-behavior:auto;
      }
      a.btn{ 
        margin-right: -200px;
      } 
      a.btn2{
        margin-right: -200px;  
	    }
      a.btn3{ 
        margin-right: -200px;  
	    }
      a.btn4{ 
        margin-right: -200px; 
	    }
      a.btnc{
        transform: translate(396px, -155px);
        }
      .right-video-covers{
        transform: translate(395px, 0px);
      }
        img{
          height: 570px; 
          width: 270px;
        }
        .transparent-box{
          height: 250px;
          width: 828px;
        }
    }

    @media only screen and (orientation: landscape) and (max-width:915px)
  {
    .img2{
      height: 187px;
      width: 219px
    }
    body{
        min-height: 412vh; 
        margin: 0;
        scroll-behavior:auto;
      }
      a.btn{ 
        margin-right: -200px;
      } 
      a.btn2{
        margin-right: -200px;  
	    }
      a.btn3{ 
        margin-right: -200px;  
	    }
      a.btn4{ 
        margin-right: -200px; 
	    }
      a.btnc{
        transform: translate(948px, -180px);
        }
      .right-video-covers{
        transform: translate(447px, 0px);
      }
        img{
          height: 570px; 
          width: 270px;
        }
      .transparent-box{
        height: 200px;
        width: 1381px;
      }
  }

    p{ 
      color: white;
    }

    h1{
      color: #f8d33d;
      font-size: 54px;
      font-family: "Archivo Black";
      text-shadow: 3px 3px #000000;
    }

    h2{
      color: rgb(252, 252, 252);
      font-size:42px;
      font-family:"Archivo Black";
      position: relative; 
      bottom: 35px; 
      left: 0px;
      text-shadow: 2px 2px #000000;
    }

    .btn{ 
      display: block;
      background-color: #c8eb07;
	    color: black;
      font-family:"Yeseva One";
      font-size: 45px;
      text-align:center;
	    padding: 15px 25px;
      border: 3px solid;
      border-color: black; 
      border-radius: 25px;
      margin-left: 200px;
      margin-right: 200px;
      cursor: pointer;
	}
  .btn:hover{
	  background-color: #acc717;
    color:white;
	}
	.btn:active{
	  background-color: #5d6d05;
  }

  .btn2{ 
    display: block;
    background-color: #eb0707;
	  color: black;
    font-family:"Yeseva One";
    font-size: 45px;
    text-align:center;
	  padding: 15px 25px;
    border: 3px solid;
    border-color: black; 
    border-radius: 25px;
    margin-left: 200px;
    margin-right: 200px;
    cursor: pointer;
	}
  .btn2:hover{
	  background-color: #bb0707;
    color:white;
	}
	.btn2:active{
	  background-color: #850d0d;
  }

  .btn3{ 
    display: block;
    background-color: #eb6207;
	  color: black;
    font-family:"Yeseva One";
    font-size: 45px;
    text-align:center;
	  padding: 15px 25px;
    border: 3px solid;
    border-color: black; 
    border-radius: 25px;
    margin-left: 200px;
    margin-right: 200px;
    cursor: pointer;
	}
  .btn3:hover{
	  background-color: #c2540a;
    color:white;
	}
	.btn3:active{
	  background-color: #924009;
  }

   .btn4{ 
    display: block;
    background-color: #c74380;
	  color: black;
    font-family:"Yeseva One";
    font-size: 45px;
    text-align:center;
	  padding: 15px 25px;
    border: 3px solid;
    border-color: black; 
    border-radius: 25px;
    margin-left: 200px;
    margin-right: 200px;
    cursor: pointer;
	}
  .btn4:hover{
	  background-color: #9c3565;
    color:white;
	}
	.btn4:active{
	  background-color: #812e55;
  }

  .btnc{ 
    display: inline-block;
    background-color: #eb0707;
	  color: black;
    font-family:"Yeseva One";
    font-size: 45px;
    text-align:center;
	  padding: 10px 10px;
    border-radius: 25px;
    margin-left: 200px;
    margin-right: 0px;
    transform: translate(1501px, -150px);
    cursor: pointer;
	}
  
  .btnc:hover{
	  background-color: #bb0707;
    color:white;
	}
	.btnc:active{
	  background-color: #850d0d;
  }

  .left-video-covers{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    z-index: -2;
  }

  .right-video-covers{
    position: absolute;
    top: 0;
    right: 250px;
    width: 0;
    z-index: -2;

  }