@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200..800&display=swap');

:root {
  --expertblue-h: 246;
  --expertblue-s: 100%;
  --expertblue-l: 21%;
}

@view-transition {
	navigation: auto;
}

main {
	view-transition-name: page;
}

::view-transition-old(page) {
	animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

::view-transition-new(page) {
	animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

@keyframes slide-out {
	0% {
		transform: translateX(0%);
	}

	100% {
		opacity: 0;
		transform: translateX(calc(50% * var(--direction, 1)));
	}
}

@keyframes slide-in {
	0% {
		opacity: 0;
		transform: translateX(calc(-50% * var(--direction, 1)));
	}

	100% {
		transform: translateX(0%);
	}
}


/*uil animeren */

    .star:nth-child(1) { --i: 1; }
    .star:nth-child(2) { --i: 2; }
    .star:nth-child(3) { --i: 3; }
    .star:nth-child(4) { --i: 4; }
    .star:nth-child(5) { --i: 5; }
    .star:nth-child(6) { --i: 6; }
    .star:nth-child(7) { --i: 4; }
    .star:nth-child(8) { --i: 8; }
    .star:nth-child(9) { --i: 3; }
    .star:nth-child(10) { --i: 7; }
    .star:nth-child(11) { --i: 1; }
    .star:nth-child(12) { --i: 9; }
svg .star {
  opacity: 0.1;
  animation: flicker 0s infinite;
  
  /* Mochten ALLE browsers ooit zo cool zijn als Safari
   --i : sibling-index(); 
  animation-delay: calc((sibling-index()* 50ms) +  random(1ms, 500ms));
  animation-duration: calc((sibling-index()* 1000ms) +  random(1ms, 1000ms));
  */

    
animation-delay: calc((var(--i) * 50ms) + (var(--i) * 100ms));
animation-duration: calc((var(--i) * 1000ms) + (var(--i) * 200ms));
}
svg .owl-color,
svg .owl-dark{
transition: all 0.6s ease;  /* Alle properties 0.6s */
}

/*
svg:hover .owl-color, svg:hover .owl-dark {
    transform:   translate(random(-25px, 25px),  random(-25px, 25px));
   
}
*/



@keyframes flicker {
  0%   { opacity: 0.2; }
  20%  { opacity: 0.9; }
  40%  { opacity: 0.4; }
  60%  { opacity: 1; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; }
}


/*de gewone zaken  */


body { font-family: monospace; font-size:1em;}
p, details  {max-width:900px; margin-top:1em;}
h1, h2, h3 {font-family: "Bricolage Grotesque", Serif;

  color: hsl(var(--expertblue-h), var(--expertblue-s), var(--expertblue-l));

    
}
div {margin:1em; padding:1em; border-radius:0.5em; 
  overflow-wrap: break-word;
  word-break: break-word;
}
div.query {border-color:  hsl(var(--expertblue-h), var(--expertblue-s), var(--expertblue-l)) ; 
    background-color: hsl(var(--expertblue-h), var(--expertblue-s), 90%); 
    flex:9;
    
}
h2 {margin-bottom: 0.2em; margin-top: 0.2em;}
form {margin-top: 2em; display:grid; max-width: 400px;
    grid-template-columns: 1fr 1fr;  /* Twee gelijke kolommen */
  gap: 1.5rem 1rem;               /* Ruime spacing */
  align-items: start
}
button {
    all: unset;
    grid-column: 1 / -1;
    background-color: hsl(var(--expertblue-h), var(--expertblue-s), var(--expertblue-l)) ; 
font-size: 1em;
padding:0.5em;
border-radius:1.2em;
color: white;
border-color: None;
text-align: center;

cursor: pointer;    
}

button:hover {background-color: hsl(var(--expertblue-h), var(--expertblue-s), calc(var(--expertblue-l)*3));}

input { padding: 0.5em;
    border-radius: 0.5em;
     border: 1px solid #ccc;
}

select {
      appearance: none;
  -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    border-radius: 0.5em;
    border: 1px solid #ccc;
    padding: 0.35rem;
    box-sizing: border-box;
    
}
select option {padding: 1em;}


label {font-size: 0.8em;}
details {margin:0px;}
div.opnieuw {border-color: hsl(191, 100%, 50%); background-color: hsl(191, 100%, 90%);}
div.error {border-color: #ff0000 ; background-color:#ffcccc;}
div.opnieuw > p {margin:0em;}
.instructies {
    margin: 0;
    
}
div.logo {border-width: 3px; border-color:black; flex:2 ; background-color: #0a0e27 }

div#logo-band {
    min-height:6em;
    background-color: #0a0e27;
background-image: url('../images/arcade-uil.svg');   
background-repeat: repeat;
background-size: contain;
background-position: center;   
}

div {border-width:3px; border-radius:0.5em; border-style:solid;}

header  {display:flex;
        width: calc(100vw-2em);}

header#logos {display:flex;}        
        
summary {
    list-style: none; /* Verwijder de standaard marker */
    /*position: relative;*/
}
summary::-webkit-details-marker {
    display: none; /* Verberg de standaard marker in WebKit browsers */
}

summary:hover::after {cursor: pointer;}

summary::after {
    content: '+'; /* Of gebruik een ander symbool zoals '›' of '→' */
    display: inline-block; /* direct achter de tekst */
     margin-left: 0.5em;
     color: black;             /* kleur van het + teken */
    padding: 0.05em 0.3em;     /* beetje ruimte rond de + */
    border: 2px solid black;
    border-radius: 50%;     /* optioneel: afgeronde hoeken */
    font-weight: bold;
    transition: transform 0.2s ease;
}
details[open] summary::after {
    transform: rotate(315deg);
}

div.result {  opacity: 0;
animation: fadeIn 400ms ease forwards;
animation-delay: calc((sibling-index()* 300ms) +  random(1ms, 400ms));}

.result p {margin:0px;}
/* animatie */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 800px) {
  header {
    flex-direction: column;
  }
    header#logos {
    flex-direction: row;
  }
}