@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: 'Nuvo';
  src: url('../fonts/Nuvo.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --Primary: hsl(4, 82%, 20%);
  --Primary_Variant: hsl(4, 100%, 45%);
  --Primary_Hover: hsl(4, 83%, 26%);
  --Primary_Active: hsl(4, 83%, 32%);
  --Background: black;

  --Font_Color: hsl(0, 0%, 85%);
  --Font_Color_Post: hsl(0, 0%, 70%);
  --Font_Color_Disabled: hsl(0, 0%, 45%);
  --Font_Color_Label: hsl(0, 0%, 55%);
  --Font_Color_Error: hsl(0, 100%, 48%);
  --Font_Color_Success: hsl(120, 100%, 25%);
  --Font_Color_Warning: hsl(25, 100%, 40%);
  --Font_Color_Link: hsl(201, 100%, 80%);

  --Surface: hsl(0, 0%, 16%);
  --Surface_1: hsl(0, 0%, 25%); /* hover */
  --Surface_2: hsl(0, 0%, 34%); /* active */
  --Surface_3: hsl(0, 0%, 50%);
  --Surface_4: hsl(0, 0%, 70%);

  --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;

  --Page_Width: 700px;
}

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;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: .75rem;
  height: .75rem;
}
::-webkit-scrollbar-track {
  background: var(--Surface);
}
::-webkit-scrollbar-thumb {
  background: var(--Surface_1);
  border-radius: .375rem;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--Surface_2);
}
::-webkit-scrollbar-thumb:active {
  background: var(--Surface_2);
}
::-webkit-scrollbar-corner {
  background: var(--Background);
}