* {
  user-select: none;
}

body {
  text-align: center;
  background: rgb(3, 0, 57);
  background: linear-gradient(90deg, rgba(3, 0, 57, 1) 0%, rgba(58, 9, 121, 1) 50%, rgba(141, 0, 164, 1) 100%);
  color: #eeeeee;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 100vh;
  display: grid;
  align-content: center;
  margin: 0px;
  user-select: none;
}

#cache {
  display: none !important;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
}

.button {
  width: fit-content;
  justify-self: center;
  padding: 20px;
  font-size: 36px;
  background: #ff8400;
  color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #00000033;
  transition: transform 200ms;
  cursor: pointer;
  user-select: none;
}

.button:hover {
  transform: scale(1.1)
}

.button:active {
  transform: scale(0.9)
}

.loading-screen {
  display: none;
  background: black;
  color: white;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.loading-screen:not(:fullscreen) {
  display: none !important;
}

.loading-screen>#duckLoader {
  animation: spin 2s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

@keyframes bounce {
  0% {
    transform: scale(0.3);
  }

  70% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite alternate;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
    transform: scale(1);
  }

  100% {
    filter: hue-rotate(360deg);
    transform: scale(1.05);
  }
}

#screenshotImage {
  animation:
    bounce 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67),
    hueRotate 1s ease-in-out infinite alternate;
}