@font-face {
  font-family: "cube";
  src: url("./CubeBold.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100%;
  margin: 0;
  background: #0f0f10;
  overflow: hidden;
  background: hsl(0, 100%, 50%);
  animation: rgbShift 20s linear infinite;
  font-family: "cube";
}
@keyframes rgbShift {
  0% {
    background-color: hsl(0, 100%, 25%);
  }
  17% {
    background-color: hsl(60, 100%, 23%);
  }
  34% {
    background-color: hsl(120, 100%, 25%);
  }
  51% {
    background-color: hsl(180, 100%, 25%);
  }
  68% {
    background-color: hsl(240, 100%, 25%);
  }
  85% {
    background-color: hsl(300, 100%, 25%);
  }
  100% {
    background-color: hsl(0, 100%, 25%);
  }
}
#viewer-container {
  width: 100%;
}
.top-nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 0;
  background: transparent;
  z-index: 1000;
}

.top-nav .links {
  text-decoration: none;
  color: black;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.top-nav .links:hover {
  opacity: 0.6;
}

.top-nav h1 {
  margin: 0;
}
.footer {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);

  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer:hover {
  opacity: 0.6;
}

.footer.copied {
  transform: translateX(-50%) scale(0.9);
  opacity: 0.7;
}
.font {
  font-size: 2.7vw;
  font-weight: 600;
  color: white;
}
.font-ca {
  font-size: 2.7vw;
  font-weight: 600;
  color: white;
}
@media (max-width: 780px) {
  .font {
    font-size: 4.5vw;
  }
  .font-ca {
    font-size: 7vw;
  }
  .top-nav {
    gap: 10px;
  }
}