:root {
  /* COLOR STYLES */
  --palette1-primary-color: #79a8a9;
  --palette1-secondary-color: #aacfd0;
  --palette1-secondary-light-color: #f4f7f7;
  --palette1-accent-color: #1f4e5f;

  --palette2-primary-color: #52616a;
  --palette2-secondary-color: #c9d6de;
  --palette2-secondary-light-color: #f0f5f9;
  --palette2-accent-color: #1e2022;

  --mypalette-primary-color: #272727;
  --mypalette-secondary-color: #686869;
  --mypalette-secondary-light-color: #e6e9f0;
  --mypalette-accent-color: #021b35;

  --bg-primary-dark-color: black;
  --bg-primary-light-color: white;
  --bg-secondary-color: #686869;
  --bg-header-gradient: linear-gradient(
    linear-gradient(to bottom, white 50%, #e6e9f0)
  );

  --font-primary-dark-color: black;
  --font-primary-light-color: white;
  --font-secondary-dark-color: #686869;
  --font-secondary-light-color: rgb(191, 191, 191);
  --logo-shadow-dark-color: rgba(0, 0, 0, 0.8);
  /* --logo-shadow-light-color: rgba(255, 255, 255, 0.8); */
  --logo-shadow-light-color: rgb(143 193 228 / 90%);
  --logo-border-dark-color: 2px solid rgb(4 4 4 / 69%);
  --logo-border-light-color: 2px solid rgba(255, 255, 255, 0.69);

  /* MARGINS */
  --margin-s: 1rem;
  --margin-m: 2rem;
  --margin-l: 3rem;
  --margin-xl: 4rem;
  --margin-xxl: 8rem;
  --margin-xxxl: 10rem;
  --margin-xxxxl: 16rem;

  /* TEXT STYLES */
  /* Scale reference */
  /*
        Headings 50px - 64px
    */
  /* 56px */
  --h1-size: 5rem;
  --h1-letter-spacing: 1.8rem;
  --h1-line-height: 2;
  --h1-line-boldness: 700;
  --h1-margins: 8rem 0;
  --h1-tablet-margins: 6rem 2rem 6rem 2rem;
  --h1-mobile-margins: 3rem 1rem 3rem 1rem;

  --h2-size: 3rem;
  --h2-letter-spacing: 0.2rem;
  --h2-line-height: 1.8;
  --h2-line-boldness: 600;
  --h2-margins: 6rem 0;
  --h2-tablet-margins: 3rem 2rem 3rem 2rem;
  --h2-mobile-margins: 1rem 1rem 1rem 1rem;

  --h3-size: 2.2rem;
  --h3-letter-spacing: 0.2rem;
  --h3-line-height: 1.7;
  --h3-line-boldness: 500;
  --h3-margins: 4rem 0;
  --h3-tablet-margins: 2rem 2rem 2rem 2rem;
  --h3-mobile-margins: 1rem 1rem 1rem 1rem;

  --h4-size: 1.8rem;
  --h4-letter-spacing: 0.2rem;
  --h4-line-height: 1.6;
  --h4-line-boldness: 500;
  --h4-margins: 3rem 0;
  --h4-tablet-margins: 1.5rem 1rem 1.5rem 1rem;
  --h4-mobile-margins: 1rem 1rem 1rem 1rem;

  --h5-size: 1.5rem;
  --h5-letter-spacing: 0.2rem;
  --h5-line-height: 1.5;
  --h5-line-boldness: 500;
  --h5-margins: 2rem 0;
  --h5-tablet-margins: 1rem 2rem 1rem 2rem;
  --h5-mobile-margins: 1rem 1rem 1rem 1rem;

  --h6-size: 1.3rem;
  --h6-letter-spacing: 0.2rem;
  --h6-line-height: 1.4;
  --h6-line-boldness: 500;
  --h6-margins: 1.8rem 0;
  --h6-tablet-margins: 1rem 2rem 1rem 2rem;
  --h6-mobile-margins: 1rem 1rem 1rem 1rem;

  --h7-size: 1.1rem;
  --h7-letter-spacing: 0.15rem;
  --h7-line-height: 1.3;
  --h7-line-boldness: 500;
  --h7-margins: 1.4rem 0;
  --h7-tablet-margins: 0.8rem 1.5rem 0.8rem 1.5rem;
  --h7-mobile-margins: 0.8rem 0.8rem 0.8rem 0.8rem;

  /*
        Text 
        16px - 32px
        1rem - 
    */
  --text-size: 1.3rem;
  --text-bold: 400;
  --text-line-height: 1.5;
}

/* CSS reset start */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/* 
  Remove user selection of text
*/
* {
  -webkit-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Avoid the selection blue square on touch devices on Chrome */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: var(--text-line-height);
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* CSS reset end */

/* Text sizes */

/* Global CSS */

input.invisible {
  visibility: hidden;
  appearance: none;
  display: none;
}

/* Text sizes */

h1,
h2,
h3,
h4,
h5,
h6,
h7 {
  font-family: Celestial, sans-serif;
  text-transform: uppercase;
}

h1 {
  font-size: var(--h1-size);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  margin: var(--h1-margins);
}

h2 {
  font-size: var(--h2-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  margin: var(--h2-margins);
}

h3 {
  font-size: var(--h3-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  margin: var(--h3-margins);
}

h4 {
  font-size: var(--h4-size);
  letter-spacing: var(--h4-letter-spacing);
  line-height: var(--h4-line-height);
  margin: var(--h4-margins);
}

h5 {
  font-size: var(--h5-size);
  letter-spacing: var(--h5-letter-spacing);
  line-height: var(--h5-line-height);
  margin: var(--h5-margins);
}

h6 {
  font-size: var(--h6-size);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  margin: var(--h6-margins);
}

h7 {
  font-size: var(--h7-size);
  letter-spacing: var(--h7-letter-spacing);
  line-height: var(--h7-line-height);
  margin: var(--h7-margins);
}

p {
  font-size: var(--text-size);
  font-weight: var(--text-bold);
  line-height: var(--text-line-height);
}

/* Responsive layout - makes a two column-layout */
@media screen and (max-width: 1000px) {
  h1 {
    margin: var(--h1-tablet-margins);
  }

  h2 {
    margin: var(--h2-tablet-margins);
  }

  h3 {
    margin: var(--h3-tablet-margins);
  }

  h4 {
    margin: var(--h4-tablet-margins);
  }

  h5 {
    margin: var(--h5-tablet-margins);
  }

  h6 {
    margin: var(--h6-tablet-margins);
  }
}

/* Responsive layout - makes the one columns */
@media screen and (max-width: 680px) {
  h1 {
    margin: var(--h1-mobile-margins);
  }

  h2 {
    margin: var(--h2-mobile-margins);
  }

  h3 {
    margin: var(--h3-mobile-margins);
  }

  h4 {
    margin: var(--h4-mobile-margins);
  }

  h5 {
    margin: var(--h5-mobile-margins);
  }

  h6 {
    margin: var(--h6-mobile-margins);
  }
}