@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playwrite IT Moderna';
  src: url('/fonts/PlaywriteITModerna-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --Primary: #c375db;
  --Primary_Variant: #b247d0;
  --Primary_Hover: #d087f0;
  --Primary_Active: #b247d0;
  --Background: white;

  --Font_Color: hsl(0, 0%, 15%);
  --Font_Color_Post: hsl(0, 0%, 25%);
  --Font_Color_Disabled: hsl(0, 0%, 45%);
  --Font_Color_Label: hsl(0, 0%, 35%);
  --Font_Color_Error: hsl(0, 100%, 48%);
  --Font_Color_Success: hsl(120, 100%, 25%);
  --Font_Color_Success_Light: hsl(120, 100%, 40%);
  --Font_Color_Warning: hsl(25, 100%, 40%);
  --Font_Color_Link: hsl(201, 100%, 35%);

  --Surface: hsl(0, 0%, 80%);
  --Surface_1: hsl(0, 0%, 70%); /* hover */
  --Surface_2: hsl(0, 0%, 60%); /* active */
  --Surface_3: hsl(0, 0%, 50%);
  --Surface_4: hsl(0, 0%, 40%);

  --Outline: 0 0 0 2px var(--Surface_2);
  --Outline_Hover: 0 0 0 2px var(--Surface_3);
  --Outline_Focus: 0 0 0 2px var(--Surface_4);
  --Outline_Primary: 0 0 0 2px var(--Primary);
  --Outline_Primary_Hover: 0 0 0 2px var(--Primary_Hover);
  --Outline_Primary_Variant: 0 0 0 2px var(--Primary_Variant);
  --Outline_Error: 0 0 0 2px var(--Font_Color_Error);
  --Outline_Disabled: 0 0 0 2px var(--Font_Color_Disabled);
  --Outline_Success: 0 0 0 2px var(--Font_Color_Success);

  --Outline_Inset: inset 0 0 0 2px var(--Surface_2);
  --Outline_Inset_Hover: inset 0 0 0 2px var(--Surface_3);
  --Outline_Inset_Focus: inset 0 0 0 2px var(--Surface_4);
  --Outline_Inset_Primary: inset 0 0 0 2px var(--Primary);
  --Outline_Inset_Primary_Hover: inset 0 0 0 2px var(--Primary_Hover);
  --Outline_Inset_Primary_Variant: inset 0 0 0 2px var(--Primary_Variant);
  --Outline_Inset_Error: inset 0 0 0 2px var(--Font_Color_Error);
  --Outline_Inset_Disabled: inset 0 0 0 2px var(--Font_Color_Disabled);
  --Outline_Inset_Success: inset 0 0 0 2px var(--Font_Color_Success);

  --Button_Height_Small: 1.5rem;
  --Button_Height_Medium: 2.25rem;
  --Button_Height_Large: 3.25rem;

  --Header_Height: 3.25rem;

  --Header_Font: 'Onest', sans-serif;
  --Body_Font: 'Onest', sans-serif;

  /* Hero */
  --Hero_Title_Font_Size: 3.5rem;
  --Hero_Subtitle_Font_Size: 1.75rem;
  --Section_Title_Font_Size: 2.5rem;
  --Section_Subtitle_Font_Size: 1.442em;
}

@media (max-width: 767px) {
  :root {
    --Hero_Title_Font_Size: 2.5rem;
    --Hero_Subtitle_Font_Size: 1.3rem;
    --Section_Title_Font_Size: 2rem;
    --Section_Subtitle_Font_Size: 1.3rem;
  }
}

@media (max-width: 600px) {
  :root {
    --Hero_Title_Font_Size: 1.875rem;
    --Hero_Subtitle_Font_Size: 1.125rem;
    --Section_Title_Font_Size: 1.5rem;
    --Section_Subtitle_Font_Size: 1.125rem;
  }
}

template {
  width: 100%;
}

body {
  background-color: var(--Background);
  color: var(--Font_Color);
  font-family: var(--Body_Font);
  font-weight: normal;
  margin: 0;
  padding: 0;
}

* {
  font-family: var(--Body_Font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--Header_Font);
  font-weight: bold;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}