/* dm-sans-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/dm-sans-v16-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/dm-sans-v16-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/dm-sans-v16-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/dm-sans-v16-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dm-sans-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/dm-sans-v16-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-sans-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/dm-sans-v16-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dm-sans-v16-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/dm-sans-v16-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/dm-sans-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/dm-sans-v16-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/dm-sans-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/dm-sans-v16-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/dm-sans-v16-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/dm-sans-v16-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/dm-sans-v16-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/dm-sans-v16-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

  /* cabin-sketch-regular - latin */
@font-face {
    font-family: 'Cabin Sketch';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/cabin-sketch-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/cabin-sketch-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* barriecito-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barriecito';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/barriecito-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* special-elite-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Special Elite';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/special-elite-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
:root {
    font-family: 'DM Sans', sans-serif;
}

header {
  display: grid;
  grid-template-columns: 2fr 1fr 6rem;
  margin: 2rem 10vw 2rem 10vw;
}

.header-website {
  grid-column: 3;
  justify-self: end;
}

.header-blog {
  grid-column: 1;
  justify-self: start;
}

button.confetti {
  all: unset;
  grid-column: 2;
  justify-self: end;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: black;
}

@media (hover: hover) {
  a.header-blog:hover, a.header-website:hover, #posts a:hover, button.confetti:hover {
    text-transform: uppercase;
}
}

h1 {
  margin-bottom: 0;
}

.blogtitel {
  font-family: 'Special Elite', 'DM Sans', sans-serif;
  font-weight: 400;
  margin: 4rem 0 2rem 20vw;
}

.nederlands > a {
  color: #02c45a;
  text-decoration: none;
}

.nederlands > a:hover {
  color: #e82ad5;
}

.engels > a {
  color: tomato;
  text-decoration: none;
}

.engels > a:hover {
  color: blue;
}

#posts {
  display: grid;
  grid-template-columns: 6rem 1fr;
  margin: 0 0 2rem 20vw;
  gap: 0 1rem;
}

#posts-engels {
  grid-template-columns: 1fr;
  margin: 0 0 2rem 20vw;
}

.datum {
  grid-column: 1;
  opacity: 0.6;
  margin: 0;
}

.blogpost {
  grid-column: 2;
  font-weight: 700;
  width: fit-content;
}

#post {
  margin: 4rem 20vw 4rem 20vw;
}

.plaatje-klein {
  display: block;
  margin: auto;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  text-align: center;
}

@media screen and (max-width: 768px) {
  header {
    margin: 2rem 5vw 2rem 5vw;
  }
  .blogtitel {
    margin: 4rem 0 2rem 5vw;
  }
  #posts, #posts-engels {
    margin: 0 0 2rem 5vw;
  }
  #post {
    margin: 4rem 5vw 4rem 5vw;
  }
}