:root {
  --small: 0.8rem;
  --normal: 1rem;
  --medium: 1.333rem;
  --large: 2rem;
  --xLarge: 4rem;
  --xxLarge: 5rem;

  --black: #171717;
  --yellow: #5da75b;
  --yellowHeader: #b6eab4;
  --yellowLight: #b6eab4;
  --yellowDark:  #4b8d47;
  --creme: #fffdf7;

  --paddingLeftDesktop: 60px;
  --paddingLeftMobile: 10px;
  --paddingRightDesktop: 110px;
  --paddingRightMobile: 60px;
  --headerHeight: 76px;

  --normalSpacing: 30px;
  --bigSpacing: 60px;

  --footerHeight: 56px;

  --burgerBarWeight: 3.5px;
  --burgerBarSpace: 10px;
}

@font-face {
    font-family: "YetsonMono";
    src:  url('/assets/fonts/YetsonMonoWeb-SemiBold.woff') format('woff'),
          url("/assets/fonts/YetsonMonoWeb-SemiBold.woff2") format("woff2");;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "YetsonSerif";
    src:  url('/assets/fonts/YetsonSerifWeb-Medium.woff') format('woff'),
          url("/assets/fonts/YetsonSerifWeb-Medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src:  url('/assets/fonts/Roboto-VariableFont_wdth-wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
	font-size: 17px;
}

/* Basic reset */
body, p, ol, ul, a, blockquote {
  padding: 0;
  margin: 0;
}

body, p {
  font-family: "Roboto", sans-serif;
  color: var(--black);
}

a:link, li, a:visited {
  color: inherit;
}

h1, h2, h3, h4, h5, h6, strong, b, blockquote p {
  font-family: "YetsonSerif", serif;
  padding: 0;
  margin: 0;
  font-weight: normal;
}

h1 {  
    font-size: var(--xLarge); 
}

h2 {  
  font-size: var(--large);
  margin-top: 60px;
  margin-bottom: 20px;
}

h3 {  font-size: var(--medium); }

h4 {
  font-size: 2.2rem;
  line-height: 125%
}

h1, h2, h3, h4, h5, h6 {
  hyphens: manual;
}

p {
  font-size: var(--normal);
  min-width: 400px;
  padding-top: 5px;
  padding-bottom: 5px;
  hyphens: manual;
  line-height: 140%;
}

strong {
  font-size: 2.2rem;
  line-height: 125%;
}

nav li {
  list-style: none;
}

a, a:hover {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--yellow);
}

blockquote p {
    font-family: "YetsonMono", serif;
    font-size: var(--large);
}


@media only screen and (max-width: 600px) {
  h1 {
    hyphens: manual;
  }

  h4 {
    hyphens: manual;
  }

  p {
    min-width: calc(320px - var(--paddingRightMobile) - var(--paddingLeftMobile));
  }
}


/*--- Desktop ---*/
@media only screen and (min-width: 500px) {

}


/*--- Tablet ---*/
@media only screen and (max-width: 900px) {

}


/*--- Mobile ---*/
@media only screen and (max-width: 500px) {
  :root {
    --small: 0.8rem;
    --normal: 1rem;
    --medium: 1.4rem;
    --large: 1.6rem;
    --xLarge: 2.2rem;
    --xxLarge: 3rem;
  }
  header nav a {
    font-size: 0.9rem;
  }

}