.mascotclass{
  
    margin: 0;
    padding: 0;
    right:2048px;
    bottom:224px;
    width:256px;
    height:256px;
    transform: scale(3)scaleX(1);
    position: absolute;
    transition: all 1s;
}

#mascotO{
    background: url("../imgs/Mascot/Mascot_placeholder3.png");
    content:attr(alt);
    
}
#mascotS{
    background: url("../imgs/Mascot/Mascot_placeholder3.png");
    filter: brightness(0%);
}

#mascotL{
    display:none;
    background: url("../imgs/Mascot/Mascot_placeholder3.png");
    margin-right: 32px;
    filter: contrast(0) sepia(100%) hue-rotate(320deg) saturate(2000%) brightness(100%);
    

}

#mascotR{
    display:none;
    background: url("../imgs/Mascot/Mascot_placeholder3.png");
    margin-right: -32px;
    filter: contrast(0) sepia(100%) hue-rotate(120deg) saturate(2000%) brightness(100%);
}

#slantL{
    
    width: 100%;
    height: 100%;
    margin: 0;
    margin-left: 0px;
    padding: 0;
    background: #000000;
    position: fixed;
    overflow: auto;
    opacity: 1;
    transform:translate(-4000px,0px)skew(-15deg, 0deg);
    transition: transform 1s;
    mix-blend-mode:screen;
    
}

#slantL2{
    background: url("../imgs/BG/Nic8RoxVelvet-BG3.png") 0 30px;
    background-size:contain;
    background-position: center;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: auto;
    border: none;
    outline: none;
    text-align: center;
    animation: glitch5_5 120s linear 1s infinite;
    image-rendering:pixelated;
    
    
}

#slant{
    
    width: 100%;
    height: 100%;
    margin: 0;
    margin-left: 384px;
    padding: 0;
    background: #ff0066;
    position: fixed;
    overflow: auto;
    opacity: 1;
    transform:translate(4000px,0px)skew(-15deg, 0deg);
    transition: transform 1s;
    border: 8px solid #000000;
}

#slant2{
    background: url("../imgs/BG/Nic8RoxVelvet-BG2.png") 0 30px;
    background-size:contain;
    background-position: center;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: auto;
    border: none;
    outline: none;
    content: attr(alt);
    text-align: center;
    animation: glitch5 120s linear 1s infinite;
    image-rendering:pixelated;
}

#slant1_5{
    background: url("../imgs/BG/Nic8RoxVelvet-BG3.png") 0 30px;
    background-size:contain;
    background-position: center;

    opacity: 1;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: auto;
    border: none;
    outline: none;
    content: attr(alt);
    text-align: center;
    animation: glitch5 120s linear 1s infinite;
    image-rendering:pixelated;
}


#DaCircle{
    background: url("../imgs/DaCircles-002.png");
    
    top:0;
    margin: 0;
    padding: 0;
    margin-left: calc(384px + 128px);
    border: none;
    position: fixed;
    overflow: auto;
    width: 64px;
  
    height: 50%;

    content:attr(alt);

  transform: scale(4)skew(-15deg, 0deg);
  display: none;
     }


@keyframes glitch5 {
 0% {
    margin-left: 0px;
    background-position: 0%0%;
    /*background: url("../imgs/Mascot/PatternsScroll1.png") 0 30px;*/
    
 }

 100% {
   
    background-position: 2000% 0%;
    /*background: url("../imgs/Mascot/PatternsScroll1.png") -16px 30px;*/



}
}

@keyframes glitch5_5 {
    0% {
       background-position: 0%0%;
       /*background: url("../imgs/Mascot/PatternsScroll1.png") 0 30px;*/
    }
   
    100% {
       background-position: -2000% 0%;
       /*background: url("../imgs/Mascot/PatternsScroll1.png") -16px 30px;*/
   
   }
   }

@media (max-width: 1919px) {

    .mascotclass{
      transform: scale(4)scaleX(1)translate(-64px,0px);
      bottom: 384px;}

      #slant{margin-left: 900px;}

      #DaCircle{margin-left: calc(384px + 448px);
        margin-top: 30%;
        transform: scale(8)skew(-15deg, 0deg);
    }
      
  }

@media (max-width: 1279px) {

    .mascotclass{
      transform: scale(3)scaleX(1)translate(0px,0px);
      bottom:224px;}

      #slant{margin-left: 512px;}

      #DaCircle{margin-left: calc(384px + 128px);
        margin-top: 0px;
        transform: scale(4)skew(-15deg, 0deg);
    }
  }

  @media (max-width: 767px) {

    .mascotclass{
      transform: scale(2)scaleX(1)translate(96px,0px);
      bottom:160px;}

      #slant{margin-left: 288px;}

      #DaCircle{margin-left: calc(288px + 32px);
        margin-top: 0px;
        transform: scale(4)skew(-15deg, 0deg);
    }
      
  }

  @media (max-width: 359px) {

    .mascotclass{
      transform: scale(1.5)scaleX(1)translate(160px,64px);
      bottom:160px;}

      #slant{margin-left: 64px;}

      #DaCircle{margin-left: calc(384px + 64px);
        margin-top: 0px;
        transform: scale(1)skew(-15deg, 0deg);}
  }
  
  
 /* @media (max-width: 3px) {

   
    .mascotclass{
    transform: scale(1)scaleX(1)translate(320px,72px);;
    bottom:96px;
    }
  }*/