body {
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: radial-gradient(circle at top right, rgba(255, 165, 0, 0.13),       transparent),
      radial-gradient(circle at 20% 80%, rgba(255,165,0, 0.13), transparent)
}

.info-box {
    position: fixed;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 25%;
    background-color: rgba(0, 0, 0, 0.452);
    z-index: 1;
}

/* box changelog */
#box-changelog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.452);
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 19px;
    text-align: center;
    color: white;
    z-index: 1;
}

#box-changelog-title {
    font-size: 25px;
}

#box-changelog-log-left {
    position: relative;
    right: -5%;
    text-align: left;
}

#box-changelog-log-right {
    position: relative;
    top: -47%;
    text-align: right;
    right: 5%;
}

/* Box TS */

#box-ts {
    position: fixed;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 40%;
    background-color: rgba(0, 0, 0, 0.452);
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 19px;
    text-align: center;
    color: white;
    z-index: 1;
}

#box-ts-logo {
    position: relative;
    top: 30%;
    right: 35%;
    font-size: 40px;
    color: #ca0000
}

#box-ts-title {
    position: relative;
    bottom: 30%;
    font-size: 20px;
    font-weight: bold;
    color: #ca0000
}

#box-ts-name {
    position: relative;
    bottom: 40%;
    left: 2px;
}

/* Box Discord */

#box-discord {
    position: fixed;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 40%;
    background-color: rgba(0, 0, 0, 0.452);
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 19px;
    text-align: center;
    color: white;
    z-index: 1;
}

#box-discord-logo {
    position: relative;
    top: 30%;
    right: 35%;
    font-size: 40px;
    color: #ca0000
}

#box-discord-title {
    position: relative;
    bottom: 30%;
    font-size: 20px;
    font-weight: bold;
    color: #ca0000
}

#box-discord-name {
    position: relative;
    bottom: 40%;
    left: 2px;
}


/* watermark */

#watermark-logo {
    position: fixed;
    top: 40%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 200px;
    -webkit-animation: spin 5s infinite;
    animation: spin 5s infinite;
    z-index: 2;
}
 
@-webkit-keyframes spin{
    from {
      -webkit-transform: rotateY(0deg);
    }
    to {
      -webkit-transform: rotateY(-360deg);
    }
  }
  
  @keyframes spin{
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }