/*	CSS BY MIKE@CROSSWAY.NL 2022  */
/* ================ SCSS VARIABELEN ================ */
/* ======================= MAIN SCSS FILE ====================  */
@font-face {
  font-family: "Jura";
  src: url("Jura-Regular.ttf");
  font-display: swap;
}
/* ================================================ MAIN STYLES  */
::selection {
  color: red;
  background: yellow;
}

body {
  background: #262628 !important;
  color: #dddddd !important;
  margin: 0;
  padding: 0;
  font-family: "Jura" !important;
  font-size:1.8em;
}

a {
  color: #dddddd !important;
}

header {
  width: 100%;
  height: auto;
}

header > h1, header > h2 {
  font-size: 2em;
  text-align: center;
  padding: 1vh;
}

span {
  text-decoration: underline;
}

span > mark {
  text-decoration: underline;
  text-decoration-color: #dddddd;
  text-underline-offset: 3px;
  color: #fcfdc6;
}

footer {
  height: auto;
}

/* ================================================ MAIN MENU */
#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  margin-left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* Verberg de input */
  z-index: 2; /* plaats hem over de hamburger */
  -webkit-touch-callout: none;
}

/* Maak van de 3 span's een hamburger */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #585858; /* Hamburger-kleur menu-dicht */
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* Verander de hamburger in een kruis */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #262628; /* Kruis-kleur menu-open */
}

/* Maar verberg de middelste streep van de hamburger */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/* Roteer de laatste de andere kant op */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/* Plaats het menu links bovenin */
#menu {
  position: absolute;
  width: 360px;
  margin: -100px 0 0 -56px;
  padding: 0 0 0 10px;
  padding-top: 125px;
  background: #585858; /* Achtergrond-kleur menu */
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-bottom-right-radius: 45px;
}

#menu li {
  padding: 5px 0 0px 15px;
  font-size: 1.2em !important;
  font-weight: 900;
}

#menu li a {
  font-weight: 700 !important;
}

/* Laat het van links in glijden */
#menuToggle input:checked ~ ul {
  transform: none;
}

@media screen and (max-width: 400px) {
  #menuToggle {
    top: 50px;
    margin-left: 30px;
  }
}
/* ================================================ THEMA Switcher  */
div#theme-switcher {
  display: flex;
  justify-content: flex-end;
}

div#theme-switcher form {
  margin-right: 50px;
}

div#theme-switcher form button {
  width: 50px;
  margin-right: 5px;
}

/* ================================================ ACCORDEON STYLES BOOTSTRAP  */
.panel-default {
  border-color: #585858; /* Randkleur van panel-toaal */
}

.panel-default > .panel-heading {
  background: #585858; /* Background van uitklap-items */
  border-radius: 20px;
}

.panel-default .panel-default > .panel-heading {
  background: none; /* Background van de Tip headings */
}

.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid RGBA(0, 0, 0, 0); /* Top randkleur van uitklap-items */
}

.panel {
  background: #262628; /* Background van uitklap-panel */
}

.panel-body {
  font-size: 1.2em;
}

.panel-collapse {
  border: 1px solid RGBA(0, 0, 0, 0); /* Rand van uitklap-panel */
}

div.panel-body {
  text-align: left;
}

.panel {
  border-radius: 20px !important; /* Omlijning van tip en antwoord */
}

ol[start] ~ .panel {
  border-radius: 20px; /* Omlijning van tip & antwoorden bij oefenigen*/
  border: 1px solid #afe4af !important;
}

div.panel-body > .panel {
  border: 1px solid #afe4af !important;
}

/* ================================================ SOME LAYOUT STYLES  */
/* index-pagina */
main, div.midden {
  display: flex;
  justify-content: center;
}

h4#onderwerpen {
  text-align: center;
}

div.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 1080px) {
  div#erd img {
    width: 100%;
  }
}
/* ================================================ CONTENT BLOKKEN   */
.link {
  text-decoration: underline;
}

.tip-txt {
  font-size: 0.7em;
  opacity: 0.8;
  margin-top: 10px;
  text-align: center;
}

ul.horizontaal li {
  display: inline;
}

/* ================================================ VIDO ==================== */
div.center {
  display: flex;
  justify-content: center;
}

video {
  width: 576px !important;
  height: 324px !important;
}

/* ================================================ SCHEIDINGS-STREEP IN EEN ITEM */
.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: 0.25em;
}

.separator:not(:empty)::after {
  margin-left: 0.25em;
}

/* ================================================ NUMMERING VAN ITEMS */
div.nummer {
  display: inline-block;
  width: 30px;
  text-align: right;
}

@media screen and (max-width: 400px) {
  div.container {
    padding: 0;
    margin: 0;
  }
  div.panel-body {
    padding: 0;
    margin: 0;
  }
  main {
    flex-direction: column;
  }
  img {
    max-width: 100%;
  }
}
/* ================================================ BUTTONS ================ */
button {
  color: #dddddd; /* Textkleur knop */
  background: #262628;
  border-color: #dddddd;
  font-size: 0.8em;
  width: 4em;
  border-radius: 20px;
}

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: rgba(0, 80, 120, 0.9) !important; /* Textkleur knop */
  font-size: 0.8em;
  padding: 3px;
  padding-top: 2px;
  width: 4em;
  text-align: center;
}

/*# sourceMappingURL=layout-donker.css.map */