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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;

  color: #ffffff;
  background: #020202;

  font-family:
    Inter,
    sans-serif;
}

body::selection {
  background: rgba(255,255,255,0.12);
}

.background,
.overlay,
#snow {
  position: fixed;
  inset: 0;
}

.background {
  z-index: -4;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 0, 0, 0.03),
      transparent 40%
    ),
    #020202;
}

.overlay {
  z-index: -3;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.72)
    );
}

#snow {
  z-index: -2;
  pointer-events: none;
}

.layout {
  width: min(1180px, calc(100% - 36px));

  min-height: 100vh;

  margin: 0 auto;

  display: grid;
  grid-template-columns: 330px 1fr 330px;

  align-items: center;

  gap: 28px;
}

.center {
  text-align: center;
}

.reveal {
  opacity: 0;

  transform:
    translateY(24px)
    scale(0.98);

  animation:
    reveal 0.9s ease forwards;
}

.delay-1 {
  animation-delay: 0.15s;
}

.delay-2 {  
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.45s;
}

.ripple {
  position: fixed;
  z-index: 999;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.22),
      transparent
    );

  transform:
    translate(-50%, -50%)
    scale(0);

  animation:
    rippleAnim 0.7s ease-out forwards;
}

.bubble {
  position: fixed;
  z-index: 999;

  border-radius: 50%;

  pointer-events: none;

  background:
    rgba(255,255,255,0.12);

  backdrop-filter: blur(3px);

  animation:
    bubbleFloat 1.2s ease-out forwards;
}

@keyframes reveal {
  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes rippleAnim {
  to {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(10);
  }
}

@keyframes bubbleFloat {
  to {
    opacity: 0;

    transform:
      translateY(-80px)
      scale(1.8);
  }
}

@media (max-width: 1050px) {
  .layout {
    grid-template-columns: 1fr;

    padding: 40px 0;
  }
}

@media (max-width: 768px) {
  .layout {
    width: min(100% - 22px, 520px);

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 28px 0 90px;
  }
}

@media (max-width: 1050px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .layout {
    width: min(100% - 28px, 560px);
    min-height: auto;

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 28px 0 80px;
  }

  .center {
    order: 1;
    width: 100%;
  }

  .about-card {
    order: 2;
    width: 100%;
  }

  .activity-card {
    order: 3;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .layout {
    width: min(100% - 20px, 430px);
    gap: 14px;
    padding: 22px 0 70px;
  }
}