@charset "UTF-8";
@import 'main.css';

#graad {
  width: 50px;
  height: 50px;
}

body.starter #graad {
  background: transparent top left/50px url('scratch-starter.svg');
}

body.gevorderd #graad {
  background: transparent top left/50px url('scratch-gevorderd.svg');
}

body.expert #graad {
  background: transparent top left/50px url('scratch-expert.svg');
}

blockquote p {
  margin: 0;
}

blockquote {
  width: 500px;
  max-width: 100%;
  margin: 1em 0 128px 0;
  padding: 0.5em 1em;
  position: relative;
  color: black;
  background: white;
  border: 5px solid gray;
  border-radius: 1em;
}

blockquote:after {
  content: "";
  position: absolute;
  bottom: -128px;
  left: 30px;
  background-image: url('scratch-starter.svg'), url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white" stroke="gray"><path d="M 0 15 q 14 -10 20 -20 l -5 0 q -7 15 -15 20"/></svg>');
  background-position: bottom 24px left, top right;
  background-size: 64px;
  background-repeat: no-repeat;
  display: block;
  height: 128px;
  width: 128px;
}

li {
  line-height: 1.5;
}

li img {
  vertical-align: middle;
  min-height: initial;
  min-width: initial;
  height: 4em;
  margin: 0.5em 0;
  width: auto !important;
}

ul.checklist {
  list-style: none;
}

li input[type=checkbox]:checked {
  background: transparent top left/24px url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="28px" height="28px" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m1 6c1.8.9 3.7 2.7 4.1 4.4.3-1.9.2-5.8 5.1-9" /></svg>');
  appearance: none;
  position: relative;
  height: 24px;
  width: 24px;
  top: 0.5em;
}


footer>a {
  text-align: center;
  border: 2px solid var(--rand-kleur);
  border-radius: 10px;
  padding: 0.2rem 1rem;
  line-height: 2;
}

footer>a {
  background-color: var(--achtergrond-kleur);
}

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

footer>a:active,
footer>a:hover {
  border: 2px solid var(--tekst-kleur);
  text-decoration: none;
}

em:before {
  content: '“';
}

em:after {
  content: '”';
}

.testen {
  background: no-repeat top left/32px transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.8 3.7c-.4-.2-.9-.1-1.2.2-2 1.6-4.8 1.6-6.8 0-2.3-1.9-5.6-2.3-8.3-1v-.4c0-.6-.5-1-1-1s-1 .4-1 1v18.8c0 .5.5 1 1 1h.1c.5 0 1-.5 1-1v-6.4c1-.7 2.1-1.2 3.4-1.3 1.2 0 2.4.4 3.4 1.2 2.9 2.3 7 2.3 9.8 0 .3-.2.4-.5.4-.9v-9.2c0-.5-.3-.9-.8-1zm-.3 10.2c-2.5 2.1-6.1 2.1-8.6.1-1.1-.9-2.5-1.4-4-1.4-1.2.1-2.3.5-3.4 1.1v-9.7c2.5-1.4 5.5-1.1 7.7.6 2.4 1.9 5.7 1.9 8.1 0h.2l.1.1z" fill="darkgreen"/><path d="m20.6 4.8-.1 9.1v.1c-2.5 2-6.1 2-8.6 0-1.1-.9-2.5-1.4-4-1.4-1.2.1-2.3.5-3.4 1.1v-9.7c2.5-1.4 5.5-1.1 7.7.6 2.4 1.9 5.7 1.9 8.1 0h.2c0 .1.1.1.1.2z" fill="green"/></svg>');
  padding-left: calc(32px + 1rem);
}

.variabele {
  background: no-repeat top left/360px url('variabele.svg');
}

.lijst {
  background: no-repeat top left/360px url('lijst.svg');
}

.variabele,
.lijst {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  height: 316px;
  min-height: 316px;
  font-size: 16px;
  padding-top: 120px;
  padding-left: 45px;
  padding-right: 45px;
}

.variabele p,
.lijst p {
  margin: 0 0 20px 0;
  width: 260px;
}

.variabele label,
.lijst label {
  display: inline-block;
}

code.b {
  display: block;
  margin: auto;
}

code.b.s>span {
  height: 5.5rem;
}

code.b.m>span {
  height: 4.5rem;
}

code.b.l>span {
  height: 3.5rem;
}

code.b.xl>span {
  height: 3rem;
}

code.b.xxl>span {
  height: 2.5rem;
}

.blocks,
.codehilite {
  overflow: auto hidden;
}

.blocks,
.codehilite>pre {
  line-height: 1.1;
}

@media screen and (min-width: 360px) {
  code.b {
    display: inline-block;
    margin: initial;
  }
}

@media screen and (min-width: 700px) {
  img {
    width: auto;
  }

  .blocks,
  .codehilite {
    margin: 2rem 0 2rem 2rem;
    line-height: 1.2;
  }
}