@import "./components/variables.css";
@import "./components/header.css";
@import "./components/hero.css";
@import "./components/about.css";
@import "./components/help.css";
@import "./components/footer.css";
@import "./components/loader.css";
@import "./components/pages/quit.css";
@import "./components/pages/actions.css";
@import "./components/pages/ressource.css";
@import "./components/pages/construction.css";
@import "./components/pages/contact.css";

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
  font-size: 16px;
  transform: none;
}
main {
  animation: page-in 0.4s ease forwards;
}
body.page-out {
  animation: page-out 0.3s ease forwards;
}

.text {
  font-family: var(--font-family-body);
}
.subtitle {
  font-family: var(--font-family-subtitle);
}
.title {
  font-family: var(--font-family-title);
  color: var(--primary);
}
.btn {
  transition: transform 0.2s ease;
  text-decoration: none;
}
.btn:hover {
  transform: scale(1.05);
}
.btn:active {
  transform: scale(0.95);
}

.btn-purple {
  background-color: var(--primary);
}

.btn-orange {
  background-color: var(--accent);
}

.page-hero-logo {
  font-family: var(--font-family-body);
  font-size: 13.1px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.page-hero-title {
  font-family: var(--font-family-title);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 12px;
}
.page-hero-subtitle {
  font-family: var(--font-family-body);
  font-size: 16.8px;
  font-weight: 600;
  color: var(--foreground);
}