/* Imports */
@import "./styles/reset.css";
@import "./styles/fonts.css";
@import "./styles/global.css";
@import "./styles/header.css";
@import "./styles/scene.css";
@import "./styles/goals.css";
@import "./styles/format.css";
@import "./styles/modal.css";
@import "./styles/footer.css";

:root {
  --accent-gold: #f9bb81;
  --accent: #5a1edb;
  --bg-color: #fff;
  --text-light: #fff;
  --text-dark: #0b0b0a;
  --font-bebas: "Bebas Neue", sans-serif;
  --font-inter: "Inter", sans-serif;
}

/* @media screen and (min-width: 767px) {
    
  } */

/* Scene */


/* Modal */
dialog {
  border: none;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px); /* Эффект размытия фона */
}
/* ===== Loader ===== */

.btn-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-loading .text {
  opacity: 0;
}

.btn-loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  position: absolute;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}