@charset "UTF-8";

* {
  box-sizing: inherit;
}

:root {
  --achtergrond-kleur: white;
  --achtergrond-cdj: hsla(215, 100%, 95%, 1);
  /* #00a4c9; */
  --rand-kleur: #ddd;
  --link-kleur: #0060a0;
  --code-kleur: #557;
  --code-achtergrond-kleur: white;
  --tekst-kleur: #222;
  --opvallende-kleur: black;
  /* starter */
  --starter: gold;
  /* gevorderd */
  --gevorderd: red;
  /* expert */
  --expert: dodgerblue;
  --hoogte-maat: 24px;
  font-size-adjust: 1;
  font: 500 var(--hoogte-maat)/1.8 Helevetica Neue, Helvetica, sans-serif;
}

/* @media screen and (prefers-color-scheme: dark) { */
/*   :root { */
/*     --achtergrond-kleur: black; */
/*     --rand-kleur: #444; */
/*     --link-kleur: #30bfff; */
/*     --tekst-kleur: #eee; */
/*     --opvallende-kleur: white; */
/*     --hoogte-maat: 16px; */
/*   } */
/* } */

@media screen {
  @media not (prefers-reduced-motion: reduce) {
    main {
      opacity: 0;
      transition: all 0.5s ease-out;
    }

    #loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #3498db;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      position: absolute;
      left: calc((100vw - 120px)/2);
      top: 200px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /**
    main > a:hover{
      animation: 0.5s zoom forwards;
    }
    @keyframes zoom {
      0%   { transform: scale(1); }
      100% { transform: scale(1.005); }
    }
    **/
  }

  @media (prefers-reduced-motion: reduce) {
    #loader {
      display: none;
    }
  }
}

html {
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  background-color: var(--achtergrond-cdj);
}

body {
  color: var(--tekst-kleur);
  background-color: var(--achtergrond-kleur);
  /* overflow: hidden; */
  margin: 0 5px;
}

html,
body {
  height: 100vh;
}

main {
  /* TODO: calculate */
  /* height: calc(100vh - 100px); */
  overflow-y: scroll;
}

#warn {
  display: block;
  width: 100%;
  background-color: darksalmon;
  padding: 1rem;
}

#naarBoven {
  left: calc(100vw - 65px);
  /* right: 1rem; */
  bottom: calc((var(--hoogte-maat) * 2) + 50px + 1rem);
  width: 60px;
  height: 60px;
  padding: 0;
  opacity: 0;
  outline: 0;
  border: 2px solid var(--rand-kleur);
  border-radius: 50%;
  position: fixed;
  visibility: hidden;
  background-color: var(--achtergrond-kleur);
  color: var(--tekst-kleur);
  transition: background .12s, color .12s, visibility .3s, opacity .3s, box-shadow .3s;
  box-shadow: 0 8px 16px -2px rgba(0, 32, 64, .15);
  cursor: pointer;
  z-index: 2;
}

#naarBoven.zichtbaar {
  visibility: visible;
  opacity: 1;
}

iframe {
  border: none;
  object-fit: contain;
}

article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

header,
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: var(--achtergrond-cdj);
  background-size:
    var(--hoogte-maat) var(--hoogte-maat),
    var(--hoogte-maat) var(--hoogte-maat),
    100% var(--hoogte-maat);
  background-repeat: repeat-x;
  padding-left: 1rem;
  padding-right: 1rem;
}

body>header {
  justify-content: center;
}

header>* {
  flex-shrink: 0;
  height: 50px;
}

header svg text {
  font-size: 20px;
  font-family: DejaVu Sans, Georgia, sans-serif;
}

header svg {
  max-width: 50px;
  flex-basis: content;
}

header svg#logo text tspan,
header svg#logo text {
  display: none;
}

header svg#logo text {
  font-weight: bold;
  font-stretch: ultra-condensed;
}

footer {
  background-image: linear-gradient(135deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%), linear-gradient(-135deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  /* chromium: small misalignment when using center in stead of left */
  background-position: top left, top left, top left;
  padding-top: calc(var(--hoogte-maat) * 2);
  padding-bottom: 1rem;
}

header {
  background-image: linear-gradient(45deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%), linear-gradient(-45deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  /* chromium: small misalignment when using center in stead of left */
  background-position: bottom left, bottom left, bottom left;
  padding-bottom: calc(var(--hoogte-maat) * 2);
  padding-top: 1rem;
}

header>* {
  align-self: start;
}

footer>* {
  align-self: end;
}

a.starter {
  background-color: var(--starter);
}

a.gevorderd {
  background-color: var(--gevorderd);
}

a.expert {
  background-color: var(--expert);
}

a.starter>h2 {
  background: transparent url('scratch-starter.svg') no-repeat 0 0;
}

a.gevorderd>h2 {
  background: transparent url('scratch-gevorderd.svg') no-repeat 0 0;
}

a.expert>h2 {
  display: block;
  background: transparent url('scratch-expert.svg') no-repeat 0 0;
}

main {
  /* display: flex; */
  opacity: 0;
}

@supports (display:grid) {
  #wrap main {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--hoogte-maat);
    align-items: stretch;
    justify-items: stretch;
  }
}

#wrap main>a>* {
  margin: 0;
  color: inherit;
}

#wrap main>a>h2 {
  text-align: right;
  line-height: 2;
}

#wrap main>a:focus,
#wrap main>a:active,
#wrap main>a:hover {
  text-decoration: none;
  filter: none;
}

img.tile {
  border: 4px solid transparent;
  font-size: x-small;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

a:focus img.tile,
a:active img.tile,
a:hover img.tile {
  border: 4px solid black;
}

#wrap main>a {
  color: black;
  min-width: 170px;
  outline: none;
  filter: saturate(30%);
  offset-anchor: calc(var(--hoogte-maat) * -2);
  padding: calc(var(--hoogte-maat) * 1.5) 0.5rem;
  background-size:
    var(--hoogte-maat) var(--hoogte-maat),
    var(--hoogte-maat) var(--hoogte-maat),
    var(--hoogte-maat) var(--hoogte-maat),
    var(--hoogte-maat) var(--hoogte-maat),
    100% 100%;
  background-repeat: repeat-x;
  background-image:
    linear-gradient(135deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%),
    linear-gradient(-135deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%),
    linear-gradient(45deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%),
    linear-gradient(-45deg, var(--achtergrond-kleur) 0%, var(--achtergrond-kleur) 50%, transparent 50%, transparent 100%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  /* chromium: small misalignment when using center in stead of left */
  background-position: top left, top left, bottom left, bottom left;
}

h1 {
  text-align: center;
  font-size: 140%;
}

h2 {
  font-size: 120%;
}

h3 {
  font-size: 100%;
}

img {
  width: 100%;
  min-width: 100px;
  min-height: 100px;
  max-width: 540px;
}

main {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* min-height: calc(100vh - (var(--hoogte-maat) * 4) - 10rem); */
}

h1,
h2,
h3,
h4 {
  color: var(--opvallende-kleur);
}

details {
  margin: 1em 0;
  display: inline-block;
}

details>summary {
  color: var(--opvallende-kleur);
  background-color: var(--achtergrond-cdj);
  border: 1px solid gray;
  border-radius: 16px;
  padding: 0.5em 1em;
}

code,
a {
  text-decoration: none;
  font-weight: bolder;
}

pre {
  overflow-x: scroll;
}

:not(pre)>code:not(.b) {
  color: var(--code-kleur);
  background-color: var(--code-achtergrond-kleur);
  border: 1px solid gray;
  border-radius: 16px;
  padding: 0.4em 0.6em;
  font-size: 80%;
}

a {
  color: var(--link-kleur);
}

a:active,
a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 280px) {
  header svg {
    max-width: 170px;
  }

  header svg#logo text {
    display: initial;
  }
}

@media screen and (min-width: 400px) {
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  header svg {
    max-width: 240px;
  }

  header svg#logo text tspan {
    display: initial;
  }

  @supports (display:grid) {
    #wrap main {
      grid-template-columns: 1fr 1fr;
    }
  }
}


@media screen and (min-width: 860px) {
  @supports (display:grid) {
    #wrap main {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}