@media(max-width:1023px){
  #canvas{
    top: 92px !important;
  }
 }
 #canvas{
    padding-top: 50px;
    position: relative;

    /* top: 124px;
    width: 100%; */
  }
  .canvasdesc{
    font-size: 1rem !important;
  }

  .canvasstats{
    color: white;
    display: flex;
  }

  .canvasnumber{
    font-size: 200%;
    font-weight: 700;
  }

  .canvasstat{
    margin-right: 10px;
  }

  .canvasstattext{
    font-size: xx-small;
  }
 
@keyframes slideUp{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0);
  }
}
#canvascontent{
  animation: 1s ease-out 0s 1 slideUp;
  margin-right: 20px;
}

.transitionbutton{
  transition: 0.5s;
}
.backgroundimage{
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  max-height: 750px;
  mask-image: linear-gradient(to bottom, rgba(113, 78, 158) 50%,rgba(38, 5, 56) 50%);


}

.overlay{
  background: #3C2C4F;
    background: linear-gradient(rgba(113, 78, 158, 0.9), rgba(38, 5, 56, 0.65)), url(public/video@2x.png);
    background: linear-gradient(rgba(113, 78, 158, 0.9), rgba(38, 5, 56, 0.65)), url(public/video@2x.png);
    background-size: cover;
    background-repeat: no-repeat;
  animation:  scrollBg 60s linear forwards infinite;
  width: 100%;
  height: 1066px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

}
.over{
  animation:zoom-in-zoom-out 3s ease ;
  width: 100%;
  height: 1066px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@keyframes scrollBg {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-315px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}