:root {
  /* Base palette for page backgrounds*/
  --color-primary: #679aac;
  --color-secondary: #f8f7e5;
  --color-tertiary: #1d1d1d;

  /*Palette for boxes backgrunds*/
  --color-bg-card: #f9af42;
  --color-bg-hover: #ff834f;

  /* Palette for text colors */
  --color-txt-primary: #f8f7e5;
  --color-txt-secondary: #1d1d1d;
  --color-txt-tertiary: #679aac;
  --color-txt-quaternary: #f9af42;
  --color-txt-quinary: #ff834f;
}

:root {
  /* Font families */
  --font-primary: "Quicksand";
  --font-secondary: "Eczar";

  /* Font weight */
  --fw-regular: 400;
  --fw-bold: 700;

  /* Responsive font-sizes */
  --fs-h1: clamp(2.5rem, 1rem + 6vw, 6rem);
  --fs-h2: clamp(2rem, 0.8rem + 4vw, 4.5rem);
  --fs-h3: clamp(1.25rem, 0.6rem + 1.5vw, 1.5rem);
  --fs-body: clamp(1rem, 0.8rem + 0.5vw, 1rem);
}

@font-face {
  font-family: "Eczar";
  src: url("./assets/fonts/eczar-v27-latin-regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Eczar";
  src: url("./assets/fonts/eczar-v27-latin-700.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("./assets/fonts/quicksand-v37-latin-regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("./assets/fonts/quicksand-v37-latin-700.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@keyframes rotateWheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.d-none {
  display: none !important;
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  scroll-behavior: smooth;
}

ul {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

a {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

h2 {
  font-size: var(--fs-h2);
  font-family: var(--font-secondary);
  color: var(--color-txt-primary);
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
}

main {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.side-dots li {
  cursor: pointer;
}

@media(max-width: 850px) {
  section {
    height: auto;         
    min-height: 100vh;     
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

/* Phones - landscape */
@media(min-width: 480px) and (max-width:950px) and (min-height: 250px) and (max-height:450px) and (orientation: landscape){
  section {
    height: auto;
    min-height: 100vh;
  }
}