/* HIER KOMT JOUW CSS */
@font-face {
  font-family: "Comic Relief";
  src: url(../type/ComicRelief-Regular.woff2);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Sunsetpalm;
  src: url(../type/Sunset\ Palm\ -\ Script\ Trial.otf);
}

@font-face {
  font-family: learners;
  src: url(../type/LettersforLearners.ttf);
}

@font-face {
  font-family: worldDisco;
  src: url(../type/WorldDiscovery_PERSONAL_USE_ONLY.otf);
}

:root {
  color-scheme: light dark;
}

/* de main elemten */
html {
  color: light-dark(#000, #fff);
  --button: light-dark(pink, #b33b72);
  --color-cyan: light-dark(darkcyan, cyan);
  --color-pink: light-dark(pink, #b33b72);
  --color-blue: light-dark(#90d5ff, #0f5298);
   --color-link: light-dark(blue, white);
  --color-dark: #333333;
  --color-light: #fefefe;
  --backdrop-dialog: light-dark(#ffffff66, #66339966);
  --background-li1: light-dark(#ffebef, #66339966);
  --background-summary: light-dark(#b36b43, #522f17);
  --button-hover: light-dark(#b33b72, #2b1b2a);
  --font: light-dark (black, white);
  --button-active: #8bc34a;
  --focus-state: light-dark(#b33b72, pink);
  --background-cookies: light-dark(#ffffff66, #66339966);
}

body {
  background-image: url("../../images/LIGHT_ACHTERGROUND.png");
  @media (prefers-color-scheme: dark) {
    background-image: url("../../images/achtergrond_dark_mode1.png");
  }

  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}

header {
  display: grid;
  justify-items: center;
}

/*student assistant had mij hier mee geholpen*/

main {
  display: grid;
  align-items: center;
  justify-items: center;
}

img {
  display: block;
}

img:first-of-type {
  max-width: 900px;
}

a {
  width: 80%;
}

a:nth-of-type(2) {
  justify-self: end;
}

@media (min-width: 900px) {
  main {
    grid-template-columns: 1fr 1fr;
  }
  a {
    width: 90%;
  }
}

footer {
  display: flex;
  justify-content: center;
}

/* dit was mijn oude code die ik had verwijderd met hulp van de student
assistent*/
/* img {
  width: 300px;
  height: auto;
  object-fit: cover;
} */

/* de main elemten */

/* img:nth-of-type(1) {
  width: 60%;
  height: auto;
} */

/* a:nth-of-type(1) {
  max-width: max-content;
  height: auto;
  flex-direction: column;
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 15px;
} */

/* @media (min-width: 670px) {
  a:nth-of-type(1) {
    font-size: 15px;
  }
} */

/* a:nth-of-type(2) {
  width: 100%;
  height: auto;
  grid-column-start: 3;
  grid-column-end: 4;
} */

a:hover {
  transform: scale(1.15);
}

/* @media (max-width: 670px) {
  main {
    display: grid;
    grid-template-columns: 1fr;
  }

  a:nth-of-type(2) {
    width: 200%;
    height: auto;
    flex-direction: column;
    grid-column-start: 2;
    grid-column-end: 2;
    font-size: 15px;
  }
} */

/* hier had ik chat voor gebruikt. Niet over getyped maar wel geholpen, maar uiteindelijk heb ik andere
code van een anderen button gebruikt*/

footer a {
  border: 3.5px solid #000;
  font-family: worldDisco;
  font-size: 15px;
  color: black;
  border-radius: 40%;
  text-align: center;
  text-decoration: none;
  margin: 5%;
  max-width: 10rem;
  max-height: 950rem;
  padding: 5px;
  background-color: var(--button);
}

dialog {
  background-color: Var(--button);
  max-width: 80%;
  font-family: learners;
}

/*bron hva AI*/

#mydialog section summary {
  font-family: worldDisco;
  font-size: 15px;
  border-width: 0.1em;
  border-style: solid;
  border-color: var(--button-color);
  border-radius: 0.5em;
  padding: 10px;
  background-color: var(--background-summary);
  color: white;
}

#mydialog section li {
  border-width: 0.1em;
  border-style: solid;
  border-color: var(--button-color);
  border-radius: 0.5em;
  padding: 10px;
  background-color: var(--background-li1);
  text-decoration: none;
  list-style: none;
  font-size: 15px;
}

/*deze code heb ik genomen en aangepast van een codepen
over de hovers*/
#mydialog section button {
  margin: 1%;
  padding-block: 0.5em;
  padding-inline: 1em;
  border-width: 0.1em;
  border-style: solid;
  border-radius: 1.5em;
  transition: 0.5s;
}

#mydialog button:hover {
  transition: 0.3s;
  color: white;
  background-color: var(--button-hover);
}

#mydialog button:active {
  background-color: Var(--button-active);
}

#mydialog button:focus-visible {
   color: var(--focus-state);
  outline: .2em dashed var(--focus-state);
  outline-offset: .2em;
}

dialog::backdrop {
  /*background-color: gainsboro;*/
  backdrop-filter: blur(5px);
}

#open-dialog {
  font-family: worldDisco;
  font-size: 20px;
  background-color: Var(--color-pink);
  border: 0.1em solid black;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  margin: 20px;
  font-size: 15px;
}

/* helaas heb ik hiervoor hva ai moeten gebruiken na dingen zoals
www.schools gebruikt te hebben en waarna niks klopten*/
#mydialog[open] {
  animation: dialog-open 0.2s ease-in;
}

@keyframes dialog-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#open-dialog:hover {
  transform: scale(1.15);
  font-size: 15px;
}

details {
  text-align: center;
  text-decoration: none;
  background-color: Var(--background-cookies);
}

h1 {
  font-family: worldDisco;
  font-size: 20px;
  text-align: center;
}

/*deze code heb ik genomen van de deep dive van animaties*/
/* dit moest ik helaas aan chatgpt vragen*/
#mydialog details a{
  font-size: 15px;
  color: var(--font);
}



/*de focus states*/
/* deze code heb ik half overgenomen en  veranderd vanuit de code pen*/

body :focus-visible {
  color: var(--focus-state);
  outline: .60em dashed var(--focus-state);
  /* voor de opaqueness van de achtergrond kleur heb ik chatgpt gevraagt*/
  background-color: rgb(179 59 114 / 30%);
}