/* HIER KOMT JOUW CSS */
html {
	color-scheme:light dark;

	--background:light-dark(#f5b5e0, #1e0229);
	--color:light-dark(Maroon, White);

	--background-button:light-dark(Crimson, Maroon);
	--color-button:light-dark(White, White);

	--accent-color:light-dark(Crimson, White);

  --background-color-light: pink;
  --background-color-dark: purple;
  --accent-color-light: black;
  --acent-color-dark: white;
  --yellow-accent: yellow;
  --golden-accent: gold;
  --pink-accent: #ff78d2;
  --plum-accent: plum;
  --magenta-accent: magenta;
  --lila-accent: #cb8aeb;
  --hot-pink-accent: hotpink;
  --beige-accent: beige;
  --lila-accent: #cb8aeb;
}

/* light en dark mode */

html:has([value="light-theme"]:checked) {
	color-scheme:light;
}

html:has([value="dark-theme"]:checked) {
	color-scheme:dark;
}

@font-face {
  font-family: Bubblegum;
  src: url("Bubblegum.ttf");
}

@font-face {
  font-family: Rounded;
  src: url("Rounded\ Elegance\ Regular.otf");
}

@font-face {
	font-family:"Nabla";
	src:url("Nabla.ttf");
}

body {
  background-color: var(--background);
  color: var(--color);
  text-align: left;
  padding-left: 50px;
  padding-right: 50px;
}

/* topnavigatie */

.topnav {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  gap: 20px;
  padding: 20px;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1080px) {
  .topnav {
    grid-template-columns: repeat(2, 150px);
  }
}

/* De titel */

h1 {
  margin-top: 25px;
  font-family: Bubblegum;
  font-size: 50px;
  text-align: center;
  background: linear-gradient(var(--accent-color-light), var(--background-color-dark));
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 5px var(--pink-accent);
}

/* light en dark mode */

html:has([value="light-theme"]:checked) p {
  color: var( --acent-color-dark);
}

html:has([value="auto-theme"]:checked) h1,
html:has([value="dark-theme"]:checked) h1 {
  background: none;
  color: var(--accent-color-dark);
}

html:has([value="light-theme"]:checked) h2 {
  color: var(--accent-color-dark);
}

html:has([value="light-theme"]:checked) h3 {
  color: var(--accent-color-dark);
}

html:has([value="light-theme"]:checked) h4 {
  color: var(--accent-color-dark);
}

html:has([value="light-theme"]:checked) .lightdarkmode{
    border: 5px solid var(--background-color-dark);
    border-radius: 25px;
    border-style: dotted;
}

html:has([value="auto-theme"]:checked) .lightdarkmode,
html:has([value="dark-theme"]:checked) .lightdarkmode {
    border: 5px solid var(--plum-accent);
    border-radius: 25px;
    border-style: dotted;
}

.lightdarkmode {
  display: grid;
  justify-content: center;
}

h2 {
  margin-top: 40px;
  font-family: Rounded;
  font-size: 50px;
  text-align: center;
  letter-spacing: 5px;
}

h3 {
  font-family: Rounded;
  font-size: 30px;
  max-width: 60ch;
  text-align: center;
  margin-inline: auto;
  letter-spacing: 3px;
}

h4 {
  font-family: Bubblegum;
  font-size: 30px;
  text-align: center;
}

/* geanimeerd konijn boven de tekst */

.homepagekonijn {
  animation: bewegen 5s infinite alternate;
}

@keyframes bewegen {

  from {
    margin-left: 0;
    transform: scaleX(1);
  }

  to {
    margin-left: 95%;
    transform: scaleX(-1);
  }

}

/* toegankelijkheid */

@media (prefers-reduced-motion: reduce) {

  .homepagekonijn {
    animation: none;
  }

}


/* light en dark mode van geanimeerd konijn */

html:has([value="light-theme"]:checked) .homepagekonijn {
  filter: invert(1);
}

/* class van konijneneiland-content */

  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;   
    gap: 20px;

    padding: 20px;
    border: 5px solid var(--background-color-dark);
    border-width: 15px;
    border-radius: 20px;
    animation: borderanimatie 10s infinite;
  }

.content img {
  width: 400px;
  height: 400px;
  display: grid;
  justify-self: center;
  align-self: center;
}

  @media (max-width: 920px) {
  .content {
    grid-template-columns: 1fr;
  }
}

/* tekst over konijneneiland (met border) */

p {
  font-family: Rounded;
  font-size: 40px;
  color: var(--accent-color-dark);
  max-width: 45ch;
  border: 5px solid var(--background-color-dark);
  border-radius: 20px;
  background-color: var(--background-color-dark);
  letter-spacing: 3px;
}

.paragraaf1, .paragraaf2 {
  justify-self: center;
}

/* animatie van border */
/* Inpiratie uit en kennis toegepast uit: CSS animations. (n.d.). W3Schools. https://www.w3schools.com/css/css3_animations.asp */

  .borderanimatie {
  animation: borderanimatie 2s infinite;
}

  @keyframes borderanimatie {
    0% { border-color: var(--background-color-dark);
    }
    25% { border-color: var(--pink-accent);
    }
    50% {border-color: var(--plum-accent);
    }
    75% {border-color: var(--background-color-light);
    }
    100% {border-color: var(--background-color-dark);
    }
  }

/* toegankelijkheid */

@media (prefers-reduced-motion: reduce) {
  .borderanimatie {
    animation: none;
  }
}

/* topnavigatie knoppen */

.topnav a {
  border-radius: 40px;
  color: var(--accent-color-dark);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Bubblegum;
  font-size: 17px;
}

html:has([value="auto-theme"]:checked) .topnav a {
  color: var(--acent-color-dark);
    background-image:
  	radial-gradient(
			var(--hot-pink-accent),
      var(--background-color-light)
		);
      border-radius: 40px;
}

html:has([value="light-theme"]:checked) .topnav a {
  color: var(--acent-color-dark);
    background-image:
  	radial-gradient(
      var(--lila-accent),
			var(--hot-pink-accent)
		);
}

html:has([value="dark-theme"]:checked) .topnav a {
  color: var(--acent-color-dark);
    background-image:
  	radial-gradient(
			var(--hot-pink-accent),
      var(--background-color-light)
		);
      border-radius: 40px;
}

html:has([value="auto-theme"]:checked) a:hover {
  background: var(--background-color-dark);
  color: var(--background-color-light);
}

html:has([value="light-theme"]:checked) a:hover {
  background: var(--background-color-dark);
  color: var(--beige-accent);
  transition: .4s ease-in-out;
}

html:has([value="dark-theme"]:checked) a:hover {
  background: var(--background-color-dark);
  color: var(--background-color-light);
  transition: .4s ease-in-out;
}

.topnav a.active {
  background-color: var(--plum-accent);
  color: var(--accent-color-dark);
}

img {
  height: 50px;
  width: 50px;
  border-radius: 40px;
}

dialog {
  position: fixed;
  right: 20px;
  bottom: 20px;
  margin: 0;
  width: 300px;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px 20px var(--background-color-dark);
}

dialog p {
  font-size: 14px;
}

.lightdarkmode {
  font-family: Rounded;
}

footer {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

footer button {
  background: none;
  border: none;
}

@keyframes draaien {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

/* Cookies-knop */

.Cookiesicoon img {
  position: sticky;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
}

.Cookiesicoon img:hover {
  animation: draaien 1s linear;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .Cookiesicoon img:hover {
    animation: none;
  }
}

/* toggles van Cookies */
/* Inspiratie en kennis gebruikt van:
How to create a toggle switch. (n.d.). W3Schools. https://www.w3schools.com/howto/howto_css_switch.asp en
Bubb, J. (2020, October 22). Create a simple On/Off slide toggle with CSS. DEV Community. https://dev.to/codebubb/create-a-simple-on-off-slide-toggle-with-css-db8 */

.toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 25px;
  font-family: Rounded;
}

.toggle {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.slider {
  width: 50px;
  height: 25px;
  background-color: var(--background-color-light);
  border-radius: 25px;
  position: relative;
  transition: 0.5s;
}

.slider::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--background-color-dark);
  border-radius: 25px;
  position: absolute;
  left: 3px;
  top: 3px;
  transition: 0.5s;
}

.toggle input:checked + .slider {
  background-color: var(--magenta-accent);
}

.toggle input:checked + .slider::before {
  transform: translateX(25px);
}

.toggle input {
  display: none;
}

/* .konijnenkunst {
  height: 50px;
  width: 50px;
} */

/* happen-knop */

.happen {
  background: var(--background-color-dark);
  display: table;
  padding: 10px;
  border-radius: 30px;
  margin: 50px auto 0;
  }

.happen a span {
		font-family:"Nabla";
    font-size: 50px;
		font-weight:400;
		font-variation-settings: "EDPT" 0, "EHLT" 0;
		
		
		
		transition: 
      font-variation-settings 0.3s 0s, 
      border-color 0.3s 0s, 
      border-radius 0.3s 0s;
    transition-timing-function:ease-in;
    transition-delay: calc(sibling-index() * 0.1s);
  }

.happen:hover {
  background: linear-gradient(var(--yellow-accent), var(--background-color-dark));
}

.happen a:hover span {
  font-variation-settings: "EDPT" 100, "EHLT" 24;
}

/* like-knop */

@keyframes --like-it-animation {
  0% {
    scale:1;
  }
	50% {
		scale:1.25;
	}
	100% {
		scale:1;
	}
}

li[aria-label="like-it"] button {
	width:2.5em;
	height:2.5em;
	padding:0;
	
	background-color:transparent;
  border: 5px solid var(--magenta-accent);
	border-radius:.25em;
	color: transparent;
	
	line-height:1em;
	font-size:2.5em;

	-webkit-text-stroke-width:.075em;
  -webkit-text-stroke-color: var(--magenta-accent);

	outline-color: var(--accent-color-light);
}

li[aria-label="like-it"] button.liked {

  animation-name:--like-it-animation;
	animation-duration:.35s;
	animation-iteration-count:2;
	animation-fill-mode:forwards;
	
  background: var(--magenta-accent);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

li[aria-label="like-it"] {
  list-style: none;
  gap: 5px;
}

.likeknop ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.likeknop li {
  display: grid;
  grid-template-columns: auto; 
  justify-items: start;       
  gap: 5px;                   
}

.tekst-boven,
.tekst-onder {
  font-family: Rounded, sans-serif;
  color: var(--magenta-accent);
  font-size: 20px;
  margin: 0;
}

.tekst-boven {
  margin-left: 35px;
}

.tekst-onder {
  margin-left: 15px;
}

a:focus-visible,
button:focus-visible {
  outline: 5px solid var(--yellow-accent);
}