/* Defines the CoPlayer type system using the same typography as danei.app. */

/* font faces
--------------------------------------------- */
@font-face {
  font-family: "eina";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Eina Light"), url("../assets/fonts/eina-light.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local("Eina Light Italic"), url("../assets/fonts/eina-lightitalic.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Eina Regular"), url("../assets/fonts/eina-regular.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Eina Italic"), url("../assets/fonts/eina-italic.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Eina Semibold"), url("../assets/fonts/eina-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local("Eina Semibold Italic"), url("../assets/fonts/eina-semibolditalic.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Eina Bold"), url("../assets/fonts/eina-bold.woff2") format("woff2");
}

@font-face {
  font-family: "eina";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local("Eina Bold Italic"), url("../assets/fonts/eina-bolditalic.woff2") format("woff2");
}

/* foundation
--------------------------------------------- */
html {
  font-family: "eina", Arial, sans-serif;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
small {
  letter-spacing: normal;
}

h1 {
  font-size: 64px;
  font-weight: 600;
  line-height: 76px;
}

h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}

h3 {
  font-size: 28px;
  font-weight: 400;
  line-height: 32px;
}

h4 {
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
}

h5 {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

h6,
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

small {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

strong,
b {
  font-weight: 700;
}

em {
  font-style: italic;
  font-weight: 600;
}

h1 em,
h2 em {
  font-weight: 700;
}

i {
  font-style: italic;
}

a,
button {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: normal;
  text-decoration: none;
}

label,
.section-label,
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: uppercase;
}

.language-option {
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

@media (max-width: 580px) {
  h1 {
    font-size: 40px;
    line-height: 48px;
  }

  h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
  }
}