@charset "UTF-8";

:root{
    /* --------------- COLORS --------------- */
    --white : #ffff;
    --black : #0000;

    --c-font-50  : #f0f0f0;
    --c-font-100 : #e2e2e2;
    --c-font-200 : #a8a8a8;
    --c-font-400 : #6C6459;
    --c-font-500 : #2b2b2b;
    --c-font-600 : #181717;

    --c-accent-blue-l : #eaffff;
    --c-accent-blue   : #76bebd;
    --c-accent-blue-m : #51acaa;

    --c-accent-yellow-l : #fffce8;
    --c-accent-yellow   : #ffde25;

    --c-accent-red-l : #ffe8f0;
    --c-accent-red   : #d81e5b;

    --c-bkg: #F4F6F7;

    /* --------------- FONT-FAMILY --------------- */
    --ff-title    : "Playfair Display", monospace;
    --ff-subtitle : "Share Tech Mono", monospace;
    --ff-main     : "Quicksand", sans-serif;

    /* --------------- FONT-SIZE --------------- */
    --fs-400: 16px;

    /* --------------- SIZES --------------- */
    --max-width: 1300px;
    --max-width-big: 2000px;
    --section-padding-block: 5rem;
    --section-padding-inline: 2rem;
    --big-section-margin: 1.5rem;

    --header-height: 97px;

    /* --------------- OTHER --------------- */
    --br-big: 1.75rem;
    --br-med: 1.25rem;
    --br-small: .75rem;

    --border-size: 1px;
    --box-shadow: inset 0 0 0 var(--border-size) var(--c-primary-150), 0 0 0 0 #e9e9e900;
    --box-shadow-hover: inset 0 0 0 var(--border-size) var(--c-primary-150), 0 10px 30px 5px #e9e9e980;
}

@media screen and ( max-width: 400px ), screen and ( max-width: 900px ) and ( orientation: landscape ){
  :root{
    --section-padding-block: 2.5rem;
    --section-padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--c-font-100);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--c-font-400);
  /* border-radius: 20rem; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--c-font-500);
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: baseline;
}

img, picture, video, iframe, figure {
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

p a, span a {
  display: inline;
  text-decoration: underline;
}

li {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
  font-size: 150%;
}

h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em {
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
}

b, strong{
    font-weight: 600;
}

u{
  text-decoration: underline;
}

em{
  font-style: italic;
}

hr{
  margin: 1rem 0;
   border-bottom: 1.5px solid var(--c-primary-100);
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

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

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

form, input, textarea, select, button, label {
  font-family: inherit;
  font-size: inherit;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  background-color: transparent;
  color: inherit;
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

table, tr, td {
  border-collapse: collapse;
  border-spacing: 0;
}

svg {
  width: 100%;
  display: block;
  fill: currentColor;
  pointer-events: none;
}

html{
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--ff-main);
  font-weight: 300;
  color: var(--c-font-500);
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  scrollbar-gutter: stable;
}