/* =========================
   RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   BODY
========================= */
body {
  font-family: 'Orbitron', Arial, sans-serif;
  color: #a0c8f0;

  min-height: 100vh;
  padding: 50px;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;
  position: relative;
}

/* =========================
   VIDEO BACKGROUND
========================= */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#bgVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* =========================
   UI ABOVE VIDEO
========================= */
body > *:not(.background) {
  position: relative;
  z-index: 1;
}

/* =========================
   TITLE
========================= */
h1 {
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(102, 204, 255, 0.4);
}

/* =========================
   BUTTON (GLASS)
========================= */
#toggleButton {
  width: 100px;
  height: 100px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);

  color: #a0c8f0;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  margin-bottom: 30px;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.4),
    inset 0 0 15px rgba(255, 255, 255, 0.05);

  transition: all 0.3s ease;
}

#toggleButton:hover {
  transform: scale(1.1);
  background: rgba(102, 204, 255, 0.25);
  border: 1px solid rgba(102, 204, 255, 0.8);
  color: white;
  box-shadow:
    0 0 25px rgba(102, 204, 255, 0.7),
    0 0 60px rgba(102, 204, 255, 0.3);
}

/* CLICK EFFECT */
#toggleButton:active {
  transform: scale(0.95);
}

/* =========================
   LINK CONTAINER
========================= */
#linkContainer {
  display: none;

  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;

  width: 80%;
  padding: 25px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4);
}

#linkContainer.show {
  display: flex;
  backdrop-filter: blur(20px);
}

/* =========================
   LINKS + ANIMATION
========================= */
.link {
  padding: 12px 24px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(102, 204, 255, 0.4);

  color: #a0c8f0;
  text-decoration: none;

  opacity: 0;
  transform: translateY(15px);

  animation: fadeIn 0.4s forwards;

  transition: all 0.3s ease;
}

.link:hover {
  transform: scale(1.08);

  background: rgba(102, 204, 255, 0.25);

  border: 1px solid rgba(102, 204, 255, 0.8);

  color: white;

  box-shadow:
    0 0 25px rgba(102, 204, 255, 0.7),
    0 0 60px rgba(102, 204, 255, 0.3);
}

/* FADE IN ANIMATION */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}