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

@font-face {
  font-family: "AcuminProRegular";
  src: url('../webFonts/AcuminProRegular/font.woff2') format('woff2'), url('../webFonts/AcuminProRegular/font.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TTRamillasExtraLight";
  src: url('../webFonts/TTRamillasExtraLight/font.woff2') format('woff2'), url('../webFonts/TTRamillasExtraLight/font.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color palette */
  --color-primary: #0a2d2d;
  --color-secondary: #19505A;
  --color-tertiary: #e1e1d7;
  --color-links: #dba947;
  --color-background-dark: #0c2d2d;
  --color-background-medium: #c3c3b5;
  --color-background-light: #e1e1d7;
  --color-background-menu: #fda073;
  --color-background-accent: #98cdbe;

  /* Font families */
  --font-family-primary:"TTRamillasExtraLight", serif; 
  --font-family-secondary:"AcuminProRegular", sans-serif;
  --font-family-italic: "TTRamillasExtraLight", serif;

  /* Font sizes */
  --font-size-small: 0.7rem; /* 8px */
  --font-size-medium: 1rem; /* 16px */
  --font-size-medium-plus: 1.2rem; /* 19px */ 
  --font-size-large: 2rem; /* 32px */
  --font-size-xlarge: 3rem; /* 48px */

  --border-radius: 0.6rem; /* 10px */
  --images-border-radius: 1rem; /* 15px */

  /* Section heights */
  --standard-section-height: 60vh;
}

a {
  text-decoration: none;
}

header {
    background-color: var(--color-background-light);
    height: 5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    position: relative;
    padding-left: clamp(15px, 3vw, 50px);
    padding-right: clamp(15px, 3vw, 50px);
}

.section-1{
    background-color: var(--color-background-light);
    position: relative;
}

.section-2{
    background-color: var(--color-background-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-3{
    background-color: var(--color-background-light);
}

.section-4{
    position: relative;
    background-color:var(--color-background-medium);
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);

}

.section-5{
    background-color: var(--color-background-light);
}

.section-6{
    background-color: var(--color-background-accent);
}

.section-7{
    background-color: var(--color-background-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-8{
    background-color: var(--color-background-medium);
}

.footer{
    background-color: var(--color-background-dark);
}