@import url('https://fonts.googleapis.com/css?family=Jost');

* {
  box-sizing: border-box;
  user-select: none !important;
  font-family: Jost;
}

body {
  background-color: #000;
  color: white;
  animation: fadeInAnimation ease 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

#overlay-toggle {
  position: absolute;
  display: none;
}

.overlay {
  z-index: 1;
  background-color: black;
}

.overlay label {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vw;
  color: rgb(255, 255, 255);
  font-size: 2.5rem;
}

.no-hover {
  display: block;
}

.hover {
  display: none;
}

.fullscreen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100vh;
  min-width: 100vw;
}

#overlay-toggle:checked~.overlay {
  animation-fill-mode: forwards;
  animation-name: fade, hide;
  animation-delay: 0s, 600ms;
  animation-duration: 600ms, 1ms;
}

#overlay-toggle:checked~.overlay label {
  animation-fill-mode: forwards;
  animation-name: fade;
  animation-delay: 0s;
  animation-duration: 500ms;
}

@media(hover: hover) {
  .hover {
    display: block;
  }
  .no-hover {
    display: none;
  }
}

@keyframes fade {
  to {
    opacity: 0;
  }
}

@keyframes hide {
  to {
    visibility: hidden;
  }
}

.intro {
  position: absolute;
  top: 12%;
  right: 50%;
  transform: translate(50%, -50%);
}

.strong {
  color: white;
  font-size: 90%;
}

.superstrong {
  font-size: 130%;
}

.introtxt {
  position: absolute;
  top: 110%;
  right: 50.3%;
  transform: translate(50%, -50%) skew(30deg);
  font-family: monospace;
  font-size: 200%;
  color: #ddd;
  word-spacing: 0.5rem;
  user-select: none;
  white-space: nowrap;
}

.intrologo {
  width: 100%;
  transform: scale(1.1);
}

.intro2 {
  position: absolute;
  top: 54%;
  right: 50%;
  transform: translate(50%, -50%);
  display: flex;
  flex-wrap: wrap;
}

.intro3 {
  position: absolute;
  top: 80%;
  right: 50%;
  transform: translate(50%, -50%);
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.intro3 h1 {
  font-weight: 1;
}

.card {
  position: relative;
  text-align: center;
  color: #fff;
  background-color: rgb(142 142 142 / 6%);
  border-radius: 15px;
  box-shadow: 1em 1em 0.5em #0008;
  transform-style: preserve-3d;
  width: 100%;
  max-width: 300px;
}

.card .user-img {
  background-image: url('cat.gif');
  background-size: cover;
  background-repeat: no-repeat;
  width: 160px;
  border-radius: 50%;
  height: 160px;
  margin: auto;
  border: 1px solid white;
  margin-top: -135px;
}

.card .front {
  backface-visibility: hidden;
  padding: 3rem;
  height: 100%;
  backdrop-filter: blur(0.3em);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 10px;           /* more spacing between rows/columns */
  margin-top: 20px;
  justify-items: center;
}

.front a {
  text-decoration: none;
  color: whitesmoke;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 10px 0;
  text-align: center;
  display: inline-block;
  width: 110px; /* fixed width for perfect alignment */
  max-height: 50px;
  transition: all 0.2s ease;
  font-weight: 500;
}


.front a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3); /* soft glow hover */
}

.PopupsBtn {
  text-decoration: none;
    color: whitesmoke;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 20px;
    display: grid;
    min-width: 110px;
    max-height: 50px;
    transition: all 0.2s ease;
    font-weight: 500;
}


.PopupsBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3); /* soft glow hover */
}


button {
  text-decoration: none;
  cursor: pointer;
}

.button:active {
  transform: scale(1.01);
}

.unstable-warning {
  color: red;
  font-style: italic;
  margin-top: -20px;
}

.unstable {
  color: red !important;
}

#root {
  border: 0px !important;
}

/* 🔹 Optional: mobile-friendly layout */
@media (max-width: 480px) {
  .button-group {
    grid-template-columns: 1fr;
  }
  .card {
    position: relative;
    top: 80px;
  }
  .intro3 {
    position: absolute;
    top: 95%;
  }
}