html, body {
    margin: 0;
    overflow: hidden;
  }
  canvas#confeti {
      position: absolute;
      z-index: 2;
  }
  
  .box-responsive{
      max-width: 100%;
  }
  .confeti-container{
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      overflow: hidden;
      position: absolute;
  }
  .box {
      background: url(../img/box.png) no-repeat;
      width: 700px;
      height: 375px;
      position: relative;
      background-size: contain;
      z-index: 0;
      margin: auto;
  }
  .box-container {
      text-align: center;
      position: relative;
      padding-top: 150px;
      z-index: 1;
  }
  .floor {
      background: url(../img/floor.png)no-repeat;
      width: 100%;
      height: 349px;
      background-size: cover;
      max-width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 0;
  }
  .box-cover {
      background: url(../img/box-cover.png) no-repeat;
      width: 700px;
      height: 260px;
      background-size: contain;
      background-position: bottom;
      position: relative;
      max-width: 100%;
      margin: auto;
      transform-origin: center;
      z-index: 1;
      transform: rotate(0) translate(0,0);
  }
  .pull-to-open {
      font-family: 'Caveat Brush', cursive;
      color: black;
      position: relative;
      transform: rotate(10deg);
      padding-left: 170px;
      animation: pulse 2s ease-out infinite;
  }
  
  @keyframes pulse{
      0%{
        transform: rotate(10deg) scale(1);  
      } 
      50%{
        transform: rotate(10deg) scale(1.05);  
      }
      100%{
        transform: rotate(10deg) scale(1);  
      } 
  }
  .arrow {
      background: url(../img/arrow.png) no-repeat;
      width: 170px;
      height: 72px;
      position: relative;
      display: inline-block;
      max-width: 100%;
      transform-origin: left;
      transform: rotate(0) translate(0);
      animation: arrow-move 3s ease-out infinite;
  }
  @keyframes arrow-move{
      0%{
        transform: rotate(0) translate(0);
      } 
      50%{
        transform: rotate(-3deg) translate(1%);
      }
      100%{
        transform: rotate(0) translate(0);
      } 
  }
  .arrow-n-txt-container {
      position: absolute;
      right: 20%;
      z-index: 2;
  }
  .pull-to-open>h3 {
      font-size: 50px;
  }
  .logo {
      background: url(../img/logo.png) no-repeat;
      width: 124px;
      height: 31px;
      position: absolute;
      background-size: contain;
      right: 30px;
      top: 58%;
  }
  
  .cover-away {
      animation: cover-away 3s ease-in-out forwards;
  }
  @keyframes cover-away{
      to {
      transform: translate(-100vw,-80%) rotate(-445deg);
      }
  }