/**************************
* MARK: Fonts
**************************/

/**************************
* MARK: Custom properties
**************************/

html {
  color-scheme: light dark;

  --color-cyan: light-dark(darkcyan, cyan);
  --color-pink: light-dark(pink, #572649);
  --color-blue: light-dark(#90d5ff, #0f5298);
  --color-dark: #333333;
  --color-light: #fefefe;
  --backdrop-dialog: light-dark(#ffffff66, #66339966);
  --background-li1: light-dark(#ffebef, #66339966);
  --background-summary: #572649;
  --button-hover: light-dark(#b33b72, #2b1b2a);
  --focus-state: light-dark(#b33b72, pink);
  --button-active: #8bc34a;

  --color-background: light-dark(var(--color-light), var(--color-dark));
  --color-text: light-dark(var(--color-dark), var(--color-light));
  --accent-color: deeppink;
  --border-width: 0.1em;

  --whitespace: 2em;
  --whitespace-s: 1em;
  --whitespace-xs: 0.5em;

  --step-0: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
  --step-1: clamp(1.2rem, 0.975rem + 1vw, 1.875rem);
  --step-2: clamp(1.44rem, 0.9825rem + 2.0333vw, 2.8125rem);
  --step-3: clamp(1.728rem, 0.8978rem + 3.69vw, 4.2188rem);
  --step-4: clamp(2.0736rem, 0.6554rem + 6.303vw, 6.3281rem);
  --step-5: clamp(2.4883rem, 0.1537rem + 10.3761vw, 9.4922rem);

  --border-width: 0.1em;
  display: grid;
}

/**************************
* MARK: Algemene Styling
**************************/

*,
*::after,
*::before {
  box-sizing: border-box;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/**************************
* MARK: body
**************************/

body {
  
  font-family:
    Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro;
  background: var(--color-background);
  color: var(--color-text);
  min-height: 100dvh;
  display: grid;
  grid-template-areas:
    "header header"
    "main main"
    "footer footer";
  grid-template-rows: auto 1fr auto;

  justify-content: center;

  gap: var(--whitespace);

  @media (width > 45em) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "header header header"
      "main main main"
      "footer footer footer";
  }
}
/*p {
  max-width: 30em;
}*/
/**************************
* MARK: Header
**************************/

header {
  background: var(--color-blue);

  grid-area: header;

  padding: var(--whitespace);
}

/**************************
* MARK: Footer
**************************/

footer {
  background: var(--color-blue);
  grid-area: footer;
  padding: var(--whitespace);

  nav {
    h2 {
      position: absolute;
      left: -9999999em;
    }
    ul {
      &::before {
        content: "🏡" / "De Digital Garden Webring";
      }
      &::after {
        content: "<--" / "";
      }

      padding: 0;
      display: flex;
      gap: var(--whitespace-xs);

      li {
        list-style: none;
      }
    }
  }
}
/* hiervoor heeft een studenten mij geholpen*/
/*bron chatgpt*/
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  gap: var(--whitespace);
  list-style: none;
  padding: 6%;
}

/**************************
* MARK: Main
**************************/

main {
  background: var(--color-pink);
  grid-area: main;
  padding: var(--whitespace-s);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  gap: var(--whitespace);
  justify-content: center;
}

/**************************
* MARK: Section ...
**************************/
/* hier had ik chatgpt voor moeten gebruiken*/
main > section {
  grid-column: 1 / -1;
}
/* dit niet*/

button,
summary {
  cursor: pointer;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1 {
  font-size: var(--step-3);
  text-align: center;
}

h2 {
  font-size: var(--step-2);
  text-align: center;
}

h3 {
  font-size: var(--step-1);
}

h4 {
  font-size: var(--step-0);
}

a:hover {
  color: deeppink;
}

a:focus {
  color: deeppink;
  outline: 0.2em dashed deeppink;
}

/*bron pencode van de leraar*/
label:has([type="checkbox"]) {
  display: flex;
  align-items: baseline;
}

p {
  padding-left: 5%;
  padding-right: 5%;
}

/**************************
* MARK: Section ...
**************************/

/**************************
* MARK: responsivness. 
**************************/

@media (min-width: 784px) {
  body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "main main"
      "footer footer";
  }
}

/**************************
* MARK: summary 
**************************/

/* hier had chatgpt mij bij geholpen*/
summary {
  padding-left: 20px;
  font-size: 20px;
  gap: var(--whitespace);
}

details {
  list-style: none;
  border: 2px #333333;
  border-radius: 100px;
}

/**************************
* MARK: cookies
**************************/

/* hier hielp een student assistnet bij*/

dialog {
  background-color: Var(--color-pink);
  max-width: 70%;
}

/*bron hva AI*/

#mydialog section summary {
  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);
}

/*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 {
  background-color: Var(--button-active);
}

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

img {
  display: block;
  width: 100%;
  height: 100%;
}

details {
  text-align: center;
  background-color: var(--backdrop-dialog);
}

#open-dialog {
  background-color: plum;
  border: 0.1em solid black;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  margin: 20px;
}

#open-dialog:hover {
  background-color: #a53faa;
}

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%);
}