/* --- Google Fonts --- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* --- Components design --- */

@import url("components/navbar.css");
@import url("components/buttons.css");
@import url("components/form.css");
@import url("components/card.css");
@import url("components/footer.css");

/* --- Layouts --- */
@import url("sections/loader.css");
@import url("sections/hero.css");
@import url("sections/product.css");
@import url("sections/who.css");
@import url("sections/how.css");
@import url("sections/cta-section.css");
@import url("sections/sub-form.css");
@import url("sections/legals.css");

/* --- Fonts --- */

.dm-sans-reg {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.dm-sans-med {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.dm-sans-sbold {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.dm-sans-bold {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.dm-sans-xbold {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.italic {
  font-style: italic;
}

/* --- Variables --- */

:root {

  /* Colors */
  --light: #E8E7DA;
  --dark: #1E2020;
  --gray: #DDDCD9;
  --orange: #FA4E02;
  --light-orange: #ff9800;
  --pink: #CF66CC;

  /* FS */
  --smallFS: clamp(.6rem, .3vmin, .8rem);
  --playerFS: clamp(1rem, 1vmin, 1.5rem);
  --regularFS: clamp(1.3rem, 1vmin, 2rem);
  --mediumFS: clamp(1.6rem, 3.5vmin, 2.4rem);
  --largeFS:  clamp(3.2em, 4vmax, 4.8em);

  /* MP */
  --smallerMP: clamp(.2em, .2vmin, .4em);
  --smallMP: clamp(.4em, .4vmin, 1em);
  --mobileMP: clamp(1em, 1vmin, 1.4em);
  --desktopMP: clamp(1.4em, 1.4vmin, 2em);
  --largeMP: clamp(2em, 2vmin, 2.4em);
  --largerMP: clamp(2.8em, 2.4vmin, 3.2em);

}

/* --- Global layout --- */

* {
  margin: 0;
  text-rendering: optimizeLegibility
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--light);
  margin: 0;
  padding: var(--desktopMP);
  transition: background 0.3s ease-out;
}

@media (max-width: 768px) {
  body {
    padding: var(--mobileMP);
  }
}

section {
  border-radius: 10px;
  padding: var(--largeMP);
  padding-bottom: var(--largerMP);
  margin-bottom: var(--desktopMP);
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  section {
    padding: var(--mobileMP);
    padding-bottom: var(--largeMP);
    margin-bottom: var(--mobileMP);
  }
}

@media (min-width: 1600px) {
  body {
    padding: var(--largerMP) 30rem;
  }
}


/* --- Fonts styles --- */

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

a, p {
  font-size: 14px;
}

@media (max-width: 992px) {
  a, p {
    font-size: 16px;
  }
}

h1 {
  font-size: 100px;
  color: var(--light);
}

h2 {
  font-size: 74px;
  line-height: 72px;
}

@media (max-width: 768px) {
  h2 {
    font-size: 40px;
    line-height: 42px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  h2 {
    font-size: 50px;
    line-height: 52px;
  }
}

h3 {
  font-size: 34px;
  line-height: 32px;
}

h5 {
  font-size: 16px;
  color: var(--orange);
  margin-bottom: 2rem;
}

a {
  color: var(--dark);
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  display: inline;
}

input:focus-visible {
  outline: transparent auto 0px !important;
  border: none !important;
}

input:focus-visible::placeholder {
  opacity: 0.3;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    filter: invert(1);
    mix-blend-mode: color-dodge;
}