/* =========================
    GENERAL
========================= */

@font-face {
  font-family: "Cal Sans";
  src: url("../fonts/calsans-regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "Cal Sans";
  background: var(--background);
  user-select: none;
}

body.preload {
  overflow: hidden;
}

body.no-scroll {
  overflow: hidden;
}

/* =========================
    PRELOADER
========================= */

.intro {
  position: fixed;
  inset: 0;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 0.8s ease;
  padding: 0 15px 5px 15px;
  box-sizing: border-box;
}

body.loaded .intro {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.loaded .page {
  opacity: 1;
}

.intro-logo {
  width: 40vw;
  max-width: 400px;
  animation: logoMove 2s ease-in-out forwards;
}

@keyframes logoMove {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* =========================
   404 PAGE
========================= */

.nav-bar-404 {
  display: flex;
  flex-direction: row;
  background-color: var(--dark-blue);
  padding: 10px;
  border-radius: 15px;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.error-404-container {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-404-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-404 {
  color: var(--white);
  font-size: 20px;
}

.error-number-404 {
  color: var(--orange);
  font-size: 150px;
  margin: 0;
}

.return-home-404 {
  color: var(--light-gray);
  font-size: 20px;
  user-select: none;
  margin: 0;
}

/* =========================
   COLOR VARIABLES
========================= */

:root {
  --orange: #ff8000;
  --background: #0b0b0b;
  --dark-blue: #1e2c59;
  --event-card-bg: #1a1a1a;
  --light-gray: #828282;
  --white: #ffffff;
  --socials-bg: #3a3a3a;
  --light-blue: #90d5ff;
  --modal-bg: #1a1a1a;
  --button-svg: #19a8cc;
}

/* =========================
    RESPONSIVE VARIABLES
========================= */

:root {
  --sound-button: clamp(28px, 25.71px + 0.714vw, 36px);
  --grid-button: clamp(28px, 25.71px + 0.714vw, 36px);
  --grid-labels: clamp(14px, 13.43px + 0.179vw, 16px);
  --grid-month: clamp(22px, 20.86px + 0.357vw, 26px);
  --button-radius: clamp(7px, 6.14px + 0.268vw, 10px);
  --search-icon: clamp(28px, 25.71px + 0.714vw, 36px);
  --search-input: clamp(16px, 14.86px + 0.357vw, 20px);

  --filters: clamp(16px, 14.86px + 0.357vw, 20px);

  --event-date: clamp(16px, 14.28px + 0.536vw, 22px);
  --event-title: clamp(16px, 14.28px + 0.536vw, 22px);
  --event-desc: clamp(14px, 12.28px + 0.536vw, 20px);
  --event-img: clamp(40px, 34.29px + 1.786vw, 60px);
  --card-button: clamp(24px, 20.57px + 1.071vw, 36px);
  --empty-message: clamp(14px, 12.28px + 0.536vw, 20px);
  --empty-svg: clamp(24px, 20.57px + 1.071vw, 36px);
  --coming-soon-svg: clamp(21px, 18.86px + 0.67vw, 28.5px);
  --coming-soon-tooltip: clamp(12px, 10.86px + 0.357vw, 16px);

  --modal-title: clamp(16px, 14.28px + 0.536vw, 22px);
  --modal-subtitle: clamp(14px, 12.86px + 0.357vw, 18px);
  --close-icon: clamp(24px, 21.71px + 0.714vw, 32px);

  --socials: clamp(30px, 28.28px + 0.536vw, 36px);
  --footer-text: clamp(14px, 12.86px + 0.357vw, 18px);
}