html {
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
  

    #canvas,#canvas2 {
        display: block;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
        transition: opacity .8s ease, transform 1.4s ease
  }
  
    #canvas,#canvas2 {
      width: 100%;
      height: 100%;
      position:absolute;
      z-index: -10;
      top: 0;
      left: 0
  }


  body{
    color: #ffffff;
      animation-name: background-anim;
       margin:0;
      animation-duration: 4s;
      font-family:HK Grotesk, Sans Serif;
      font-weight:400;
      background-color: rgb(0, 0, 0);
       animation-fill-mode: forwards;
      background-attachment: fixed;
      font-size: 16px;
      text-rendering: optimizeLegibility;
      line-height: 24px;
      overflow: hidden;
  }
/*Remember! This part is the mobile side.
When you use @media, thats when you get to the Desktop side
:)
 */
 /*Phones*/
 .pirate-gif {
  display: block;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50% , -50%);
  animation: fadeIn 1.6s;
  overflow: hidden;
  width: 100px;
  height: 100px;
}

/*Tablets*/
@media only screen and (min-width: 768px) {
  .pirate-gif {
    display: block;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    animation: fadeIn 1.6s;
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
}
/*Nest Hub*/
@media only screen and (min-width: 1023px) {
  .pirate-gif {
    display: block;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    animation: fadeIn 1.6s;
    overflow: hidden;
    width: 120px;
    height: 120px;
  }
}
/*Desktop*/
@media only screen and (min-width: 1420px) {
  .pirate-gif {
    display: block;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    animation: fadeIn 1.6s;
    overflow: hidden;
    width: 150px;
    height: 150px;
  }
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}