body {
  background: #fff0f5;
  font-family: "Comic Sans MS", cursive;
  text-align: center;
  padding: 40px;
  overflow: hidden;
}
h1 {
  color: #ff69b4;
  animation: pulse 1s infinite;
  z-index: 2;
}
p {
  font-size: 1.2em;
  color: #ff00c8;
  z-index: 2;
}
img {
  z-index: 2;
}
.hidden {
  display: none !important;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

button {
  margin: 20px;
}

.custom-btn {
  width: 260px;
  height: 80px;
  color: #fff;
  border-radius: 5px;
  padding: 0; /* Remove padding for perfect centering */
  font-family: "Comic Sans MS", cursive;
  font-size: 28px; /* Make font size bigger */
  font-weight: bold;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-flex; /* Use flex to center text */
  align-items: center;
  justify-content: center;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
              7px 7px 20px 0px rgba(0,0,0,.1),
              4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
  text-transform: uppercase;
}

#main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding-top: 16rem; /* adjust as needed */
}

.frame {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

#question {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90vw;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: 2rem;
}

#gif-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90vw;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: 2rem;
}

/* 10 */
.btn-10 {
  background: rgb(0, 248, 0);
background: linear-gradient(0deg, rgb(9, 255, 0) 0%, rgba(49, 244, 59, 0.904) 100%);
  color: #000000;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-10:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  -webkit-transform: scale(.1);
  transform: scale(.1);
}
.btn-10:hover {
  color: #fff;
  border: none;
  background: transparent;
}
.btn-10:hover:after {
  background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* YES button (Green) */
.yes-btn {
  background: linear-gradient(0deg, #0f9d58 0%, #34a853 100%);
}
.yes-btn:hover:after {
  background: linear-gradient(0deg, #0f9d58 0%, #0c7c43 100%);
}

/* NO button (Red) */
.no-btn {
  background: linear-gradient(0deg, #d93025 0%, #ea4335 100%);
}
.no-btn:hover:after {
  background: linear-gradient(0deg, #b5271d 0%, #c33b32 100%);
}

/* Fancy Alert Styles */
.fancy-alert {
  font-family: sans-serif;
  color: white;
  width: 78px;
  z-index: 1020;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) scale(0); /* Ensure translate is always there */
  overflow: hidden;
  box-shadow: 0 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  height: 78px;
  background-color: gray;
  transition: all 0.5s ease;
}

.fancy-alert.fancy-alert__active {
  opacity: 1;
  transform: translateX(-50%) scale(1); /* Keep same translate to avoid teleport */
}
.fancy-alert.fancy-alert__extended {
  width: 800px;
}

.fancy-alert.fancy-alert__extended .fancy-alert--content {
  opacity: 1;
  transition: all 0.5s ease;
}

.fancy-alert.fancy-alert__extended .fancy-alert--words {
  top: 18px;
  opacity: 1;
}

.fancy-alert.error {
  background-color: #D64646;
}
.fancy-alert.success {
  background-color: #3CB971;
}
.fancy-alert.info {
  background-color: #E8C22C;
}

.fancy-alert a {
  color: white;
  text-decoration: underline;
}

.fancy-alert--content {
  padding: 10px;
  opacity: 0;
}

.fancy-alert--words {
  font-size: 18px;
  font-weight: bold;
  padding: 0 18px 0 90px;
  max-width: 80%;
  position: relative;
  top: -50px;
  opacity: 0;
  height: 60px;
  transition: all 0.3s ease;
  transition-delay: 0.5s;
}

.fancy-alert--icon {
  padding: 26px;
  float: left;
  font-size: 26px;
  background-color: rgba(3, 3, 3, 0.15);
}

.fancy-alert--close {
  position: absolute;
  text-decoration: none;
  right: 10px;
  top: 10px;
  font-size: 15px;
  padding: 6px 9px;
  background: rgba(0, 0, 0, 0.12);
}

.show-alert {
  border: 0;
  background: #F2F2F2;
  padding: 15px 70px;
  font-weight: bold;
  border-radius: 5px;
  border-bottom: 3px solid #C8C8C8;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.23), inset 0 -53px 20px -30px rgba(59, 65, 74, 0.06);
  margin: 0 10px;
  font-size: 16px;
  cursor: pointer;
  color: #808080;
  text-shadow: 0 1px #FFF;
  outline: 0;
  position: relative;
}

.show-alert:active {
  border: 0;
  box-shadow: none;
  top: 2px;
}

.show-alert__info {
  color: #E8C22C;
}
.show-alert__success {
  color: #3CB971;
}
.show-alert__error {
  color: #D64646;
}


@import url("s://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

.retro-gate {
  top: 50%;
  left: 50%;
  position: absolute;
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
  background: radial-gradient(circle at 20% 80%, #120458 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, #421e84 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, #8b1e84 0%, transparent 50%),
    linear-gradient(135deg, #0f0f23, #1a1a2e, #16213e);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Press Start 2P", monospace;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

/* Animated floating particles */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00ffff;
  animation: float 8s infinite linear;
  box-shadow: 0 0 6px #00ffff;
}

.particle:nth-child(1) {
  left: 10%;
  animation-delay: -2s;
  animation-duration: 6s;
}
.particle:nth-child(2) {
  left: 20%;
  animation-delay: -4s;
  animation-duration: 8s;
  background: #ff00ff;
  box-shadow: 0 0 6px #ff00ff;
}
.particle:nth-child(3) {
  left: 30%;
  animation-delay: -1s;
  animation-duration: 7s;
  background: #ffff00;
  box-shadow: 0 0 6px #ffff00;
}
.particle:nth-child(4) {
  left: 40%;
  animation-delay: -3s;
  animation-duration: 9s;
}
.particle:nth-child(5) {
  left: 50%;
  animation-delay: -5s;
  animation-duration: 6s;
  background: #ff00ff;
  box-shadow: 0 0 6px #ff00ff;
}
.particle:nth-child(6) {
  left: 60%;
  animation-delay: -2s;
  animation-duration: 8s;
  background: #ffff00;
  box-shadow: 0 0 6px #ffff00;
}
.particle:nth-child(7) {
  left: 70%;
  animation-delay: -4s;
  animation-duration: 7s;
}
.particle:nth-child(8) {
  left: 80%;
  animation-delay: -1s;
  animation-duration: 9s;
  background: #ff00ff;
  box-shadow: 0 0 6px #ff00ff;
}
.particle:nth-child(9) {
  left: 90%;
  animation-delay: -3s;
  animation-duration: 6s;
  background: #ffff00;
  box-shadow: 0 0 6px #ffff00;
}


@keyframes float {
  0% {
    transform: translateY(1000px) rotate(0deg) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(900px) rotate(36deg) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(-100px) rotate(324deg) scale(1);
  }
  100% {
    transform: translateY(-200px) rotate(360deg) scale(0);
    opacity: 0;
  }
}

/* Scanline effect */
.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 0, 0.03) 2px,
    rgba(0, 255, 0, 0.03) 4px
  );
  animation: scanline 2s linear infinite;
  pointer-events: none;
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(1000px);
  }
}

.container {
  text-align: center;
  z-index: 10;
  position: relative;
  scale: 2;
}

#alert-wrapper {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: auto;
  max-width: 90%;
  text-align: center;
}

/* Glowing title with multiple animations */
.retro-title {
  color: #fff;
  font-size: 28px;
  text-wrap: nowrap;
  margin-bottom: 50px;
  text-transform: uppercase;
  letter-spacing: 0px;
  position: relative;
  animation:
    titleGlow 3s ease-in-out infinite alternate,
    titleFloat 4s ease-in-out infinite,
    titleRainbow 6s linear infinite;
}

@keyframes titleGlow {
  0% {
    text-shadow:
      0 0 5px #00ffff,
      0 0 10px #00ffff,
      0 0 15px #00ffff,
      0 0 20px #00ffff;
  }
  100% {
    text-shadow:
      0 0 10px #ff00ff,
      0 0 20px #ff00ff,
      0 0 30px #ff00ff,
      0 0 40px #ff00ff;
  }
}

@keyframes titleFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes titleRainbow {
  0% {
    color: #ff0000;
  }
  16.66% {
    color: #ff8800;
  }
  33.33% {
    color: #ffff00;
  }
  50% {
    color: #00ff00;
  }
  66.66% {
    color: #0088ff;
  }
  83.33% {
    color: #8800ff;
  }
  100% {
    color: #ff0000;
  }
}

/* Main button container */
.pixel-button {
  display: inline-block;
  margin: 20px;
  cursor: pointer;
  position: relative;
  animation: buttonFloat 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes buttonFloat {
  0%,
  100% {
    transform: translateY(0px) rotateX(0deg);
  }
  50% {
    transform: translateY(-8px) rotateX(5deg);
  }
}

/* Button body with extreme pixel styling */
.button-body {
  position: relative;
  padding: 20px 40px;
  background: linear-gradient(45deg, #ff6b35, #ff8f65);
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  outline: none;

  /* Ultra pixel-perfect border */
  box-shadow: 
                /* Inner glow */
    inset 0 0 0 2px #ffaa88,
    inset 0 0 0 4px #ff6b35,
    /* Main borders */ 0 0 0 2px #ff6b35,
    0 0 0 4px #e63946,
    0 0 0 6px #c1121f,
    0 0 0 8px #2d3436,
    /* Shadow layers */ 6px 6px 0 8px #636e72,
    8px 8px 0 8px #495057,
    10px 10px 0 8px #343a40,
    /* Glow effects */ 0 0 20px rgba(255, 107, 53, 0.4),
    0 0 40px rgba(255, 107, 53, 0.2);

  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation:
    buttonPulse 2s ease-in-out infinite,
    buttonGlow 3s ease-in-out infinite alternate;
}

@keyframes buttonPulse {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.02);
  }
  75% {
    transform: scale(0.98);
  }
}

@keyframes buttonGlow {
  0% {
    box-shadow:
      inset 0 0 0 2px #ffaa88,
      inset 0 0 0 4px #ff6b35,
      0 0 0 2px #ff6b35,
      0 0 0 4px #e63946,
      0 0 0 6px #c1121f,
      0 0 0 8px #2d3436,
      6px 6px 0 8px #636e72,
      8px 8px 0 8px #495057,
      10px 10px 0 8px #343a40,
      0 0 20px rgba(255, 107, 53, 0.4),
      0 0 40px rgba(255, 107, 53, 0.2);
  }
  100% {
    box-shadow:
      inset 0 0 0 2px #ffaa88,
      inset 0 0 0 4px #ff6b35,
      0 0 0 2px #ff6b35,
      0 0 0 4px #e63946,
      0 0 0 6px #c1121f,
      0 0 0 8px #2d3436,
      6px 6px 0 8px #636e72,
      8px 8px 0 8px #495057,
      10px 10px 0 8px #343a40,
      0 0 30px rgba(255, 107, 53, 0.8),
      0 0 60px rgba(255, 107, 53, 0.4),
      0 0 80px rgba(255, 107, 53, 0.2);
  }
}

/* Hover state with extreme transformation */
.pixel-button:hover .button-body {
  background: linear-gradient(45deg, #fd79a8, #fdcb6e);
  transform: translate(-4px, -4px) scale(1.05) rotateZ(2deg);
  box-shadow:
    inset 0 0 0 2px #ffe4e1,
    inset 0 0 0 4px #fd79a8,
    0 0 0 2px #fd79a8,
    0 0 0 4px #e84393,
    0 0 0 6px #d63031,
    0 0 0 8px #2d3436,
    10px 10px 0 8px #636e72,
    12px 12px 0 8px #495057,
    14px 14px 0 8px #343a40,
    0 0 30px rgba(253, 121, 168, 0.8),
    0 0 60px rgba(253, 121, 168, 0.4),
    0 0 100px rgba(253, 121, 168, 0.2);
  animation:
    buttonHover 0.3s ease-in-out infinite alternate,
    buttonPulse 1s ease-in-out infinite;
}

@keyframes buttonHover {
  0% {
    filter: hue-rotate(0deg) brightness(1.1);
  }
  100% {
    filter: hue-rotate(10deg) brightness(1.2);
  }
}

/* Active/pressed state */
.pixel-button:active .button-body {
  transform: translate(6px, 6px) scale(0.95) rotateZ(-1deg);
  box-shadow:
    inset 0 0 0 2px #ffe4e1,
    inset 0 0 0 4px #fd79a8,
    0 0 0 2px #fd79a8,
    0 0 0 4px #e84393,
    0 0 0 6px #d63031,
    0 0 0 8px #2d3436,
    2px 2px 0 8px #636e72,
    4px 4px 0 8px #495057,
    6px 6px 0 8px #343a40,
    0 0 15px rgba(253, 121, 168, 1);
  animation: buttonPress 0.1s ease-out;
}

@keyframes buttonPress {
  0% {
    transform: translate(6px, 6px) scale(0.95) rotateZ(-1deg);
  }
  50% {
    transform: translate(8px, 8px) scale(0.9) rotateZ(-2deg);
  }
  100% {
    transform: translate(6px, 6px) scale(0.95) rotateZ(-1deg);
  }
}

/* Animated pixel heart */
.pixel-heart {
  display: inline-block;
  width: 20px;
  height: 18px;
  margin-right: 20px;
  position: relative;
  animation: heartBeat 1.5s ease-in-out infinite;
}

.pixel-heart::before,
.pixel-heart::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 26px;
  background: #fff;
  border-radius: 10px 10px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  animation: heartGlow 2s ease-in-out infinite alternate;
}

.pixel-heart::after {
  left: -4px;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
@keyframes heartBeat {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.1);
  }
}

@keyframes heartGlow {
  0% {
    background: #fff;
    box-shadow: 0 0 5px #ff69b4;
  }
  100% {
    background: #ff69b4;
    box-shadow:
      0 0 15px #ff1493,
      0 0 25px #ff69b4;
  }
}

/* Animated sparkles around button */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 0%;
  animation: sparkleAnimation 2s linear infinite;
}

.sparkle:nth-child(1) {
  top: -10px;
  left: 20%;
  animation-delay: 0s;
  background: #00ffff;
  box-shadow: 0 0 10px #00ffff;
}
.sparkle:nth-child(2) {
  top: 50%;
  right: -10px;
  animation-delay: 0.5s;
  background: #ff00ff;
  box-shadow: 0 0 10px #ff00ff;
}
.sparkle:nth-child(3) {
  bottom: -10px;
  left: 70%;
  animation-delay: 1s;
  background: #ffff00;
  box-shadow: 0 0 10px #ffff00;
}
.sparkle:nth-child(4) {
  top: 20%;
  left: -10px;
  animation-delay: 1.5s;
  background: #00ff00;
  box-shadow: 0 0 10px #00ff00;
}

@keyframes sparkleAnimation {
  0%,
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 1;
  }
}

/* Sound wave effect */
.sound-wave {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #fdcb6e;
  opacity: 0;
  animation: soundWave 2s ease-in-out infinite;
}

@keyframes soundWave {
  0%,
  90%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.8);
  }
  10%,
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(-20px) scale(1.2);
  }
}

/* Description with typewriter effect */
.description {
  color: #74b9ff;
  font-size: 11px;
  margin-top: 50px;
  line-height: 1.8;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 4s steps(80) infinite;
}

.big-description {
  color: #74b9ff;
  font-size: 20px;
  margin-top: 50px;
  line-height: 1.8;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 7s steps(80) 1;
}

@keyframes typewriter {
  0%,
  90%,
  100% {
    width: 0;
  }
  30%,
  60% {
    width: 100%;
  }
}

/* RGB split effect on hover */
.pixel-button:hover .button-body::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff0000;
  animation: rgbSplit 0.3s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes rgbSplit {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(2px, -1px);
  }
}

.hidden {
  display: none;
}


.input-field-css {
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 1.5rem;
  background-color: #222222;
}


.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 100%;
  max-width: 400px;

}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 1.3rem;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #11998e, #38ef7d);
  border-image-slice: 1;
}

.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #11998e;
  font-weight: 700;
}
.form__field:required,
.form__field:invalid {
  box-shadow: none;
}


.cute-input-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.cute-input-wrapper input {
  width: 300px;
  padding: 14px 12px;
  font-size: 16px;
  border: 2px solid #ff69b4;
  border-radius: 8px;
  background: rgba(255, 0, 128, 0.1);
  color: white;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cute-input-wrapper label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: #ff69b4;
  padding: 0 5px;
  font-size: 14px;
  pointer-events: none;
  transition: 0.2s ease all;
}

.cute-input-wrapper input:focus + label,
.cute-input-wrapper input:not(:placeholder-shown) + label {
  top: -10px;
  left: 12px;
  background: transparent; 
  font-size: 12px;
  
}

.cute-input-wrapper input:focus {
  border-color: #ff1493; /* Replace with your desired focus color */
  box-shadow: 0 0 8px #ff1493; /* Optional: glowing border effect */
}
#text-input {
  text-align: center;
  margin: 0 auto;
  display: block;
}


.album-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
}

.swiper {
  width: 100%;
  padding: 40px 0 100px;
}

.swiper-slide {
  position: relative;
  max-width: 200px;
  aspect-ratio: 1/1;
  border-radius: 10px;
}
.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -webkit-box-reflect: below -5px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
  pointer-events: none;
  user-select: none;
}

.swiper-slide-active .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 22, 37, 0.6);
  border-radius: inherit;
  opacity: 0;
  transition: all 0.4s linear;
}
.swiper-slide:hover .overlay {
  opacity: 1;
}
.swiper-slide .overlay ion-icon {
  opacity: 0;
}
.swiper-slide-active:hover .overlay ion-icon {
  font-size: 4rem;
  color: #eb0b0b;
  opacity: 1;
  cursor: pointer;
}
.music-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--primary-clr);
  width: 380px;
  padding: 10px 30px;
  border-radius: 20px;
}
#progress {
  width: 100%;
  height: 7px;
  background: rgba(163, 162, 164, 0.4);
  border-radius: 4px;
  margin: 32px 0 24px;
  cursor: pointer;
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}
.controls button {
  width: 50px;
  aspect-ratio: 1/1;
  margin: 20px;
  background: rgba(163, 162, 164, 0.3);
  color: white;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
}
.controls button:nth-child(2) {
  transform: scale(1.3);
}

.music-section {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: transparent;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

#music-player-play {
  position: fixed;
  bottom: 2rem;
  left: 44%;
}

#go-to-messages {
  position: fixed;
  bottom: 3rem;
  left: 45.3%;
}

.album-cover,
.swiper,
.swiper-wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
}

#canvas1 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1; /* Put it above most things */
  pointer-events: none; /* So it doesn’t block clicks */
}

#go-to-messages {
  display: block;
  margin: 20px auto; /* centers horizontally */
  text-align: center;
}