/* =========================================================
   ZERLAB STUDIO — BASE
   ========================================================= */

:root {
  --blue: #074984;
  --blue-hover: #063d70;

  --navy: #071b32;
  --ink: #07182c;

  --cream: #f5f1e9;
  --cream-light: #fbf9f5;
  --white: #ffffff;

  --text: #142236;
  --muted: #68717d;

  --border: rgba(7, 24, 44, 0.12);

  --page-padding: clamp(24px, 5vw, 80px);
  --max-width: 1600px;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  min-width: 320px;

  font-family: "Manrope", Arial, sans-serif;

  color: var(--text);
  background: var(--cream-light);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
}


img {
  display: block;

  width: 100%;
  max-width: 100%;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  border: 0;
  background: none;

  color: inherit;

  cursor: pointer;
}


ul,
ol {
  list-style: none;
}


/* =========================================================
   SELEZIONE TESTO
   ========================================================= */

::selection {
  background: var(--blue);
  color: var(--white);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 9px;
}


::-webkit-scrollbar-track {
  background: var(--cream-light);
}


::-webkit-scrollbar-thumb {
  background: rgba(7, 24, 44, 0.25);
  border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
  background: rgba(7, 24, 44, 0.4);
}


/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}


/* =========================================================
   UTILITIES
   ========================================================= */

main {
  width: 100%;
}


section {
  position: relative;
}


.no-scroll {
  overflow: hidden;
}


/* =========================================================
   RESPONSIVE BASE
   ========================================================= */

@media (max-width: 700px) {

  :root {
    --page-padding: 20px;
  }

}