body {
  background: radial-gradient(
    circle farthest-corner,
    hsl(199, 92%, 15%),
    hsla(0, 0%, 0%, 0.887) 100%
  );
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

#loadingScreen {
  z-index: 999;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: black;
}

#handImg {
  height: 100%;
  object-fit: contain;
  display: block;
}

#text {
  color:black;
  font-size: larger;
  text-align: center;
}

#mutebtn {
  position: absolute;
  display: block;
  background-image: url(./Asset/image/volume.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  height: 3.5vh;
  width: 3.5vh;
  top: 2vh;
  right: 2vw;
  z-index: 100;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* // desktop */
#watermark {
  position: absolute;
  bottom: 1%;
  text-align: center;
  color: white;
  z-index: 999;
  font-size: 15px;
  width: 100%;
}

#watermark a {
  color: white;
  text-decoration: none;
  font-weight: bolder;
}


/* // phone
  #watermark {
    right: 25%;
    width: 50%;
  } */

a:hover{
  color: blue;
}

#gif {
  position: absolute;
  top: 40%;
  left: 50%;
  height: 50vh;
  width: 50vh;
  z-index: 10;
  transform: translate(-50%, -50%);
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-drag: none;
}

#textgif {
  display: block;
  position: absolute;
  top: 63%;
  left: 40%;
  height: 4vh;
  width: 20%;
  z-index: 10;
  text-align: center;
  font-size: 22px;
  color: white;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-drag: none;
}

#hand {
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
}

#vigente {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #000000ad;
  z-index: 8;
}

#startBtn {
  display: flex;
  position: absolute;
  z-index: 15;
  color: black;
  background: pink;
  height: 4%;
  width: 10%;
  top: 80%;
  left: 45%;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  font-weight: 550;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-drag: none;
}


/* Mobile Potrait */
@media only screen and (max-width: 640px) and (orientation: portrait) {

  #gif {
    height: 40vh;
    width: 40vh;
  }

  #textgif {
    font-size: 17px;
    width: 80%;
    left: 10%;
  }

  #startBtn {
    height: 5%;
    width: 40%;
    left: 30%;
    top: 75%;
  }

  #watermark {
    font-size: 12px;
  }
}