html,
body{
  height:100%;
  margin:0;
}

html{
  background-color:#f9b368;
  background-color:#c16f50; /* rebrand sep 2024 */
  background-image:url(../landskap.jpg); /* jan 2024 */
  --border-rad:15px;
}

body{
  display:flex;
  flex-direction:column;
}

header{
  height:20vh;
  padding:1em 0;
}

header .logo{
  height:100%;
}

.logo{
  display:flex;
  justify-content: center;
  align-items: center;
}

.logo img{
  height:80%;
  display:block;
}

.videos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  --transition-duration:400ms;
}

@media (max-width: 700px) {
  .videos{
    flex-direction: column;
  }
}

.video{
  position:relative;
  flex:0 0 25%; /* formerly set to 30%, now the videos are smaller and less intimidating. also more space incase i add a contact form */
  margin:10px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:var(--border-rad);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,0.3));
  transition: opacity 200ms;
  opacity:1;
}

[data-embed]{
  cursor:pointer;
}

.video img{
  width:100%;
  height:auto;
  display:block;
  transition-duration:var(--transition-duration);
}

[data-embed]:before{
  content: '\25b6';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:2em;
  color:#fff;
  opacity:0;
  transition-duration:var(--transition-duration);
  z-index:1;
}

.video:hover img{
  filter:brightness(0.75);
  transform:scale(1.1);
}

.videos:has(.video:hover) .video:not(.video:hover){
  opacity:0.7;
}

.video:hover:before{
  opacity:1;
}

.show--consent .video:hover:before{
  opacity:0!important;
}

@keyframes fadeIn{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

footer {
  background-color: #b40005;
  color: white;
  background-color:rgba(0,0,0,.1); /* rebrand sep 2024 */
  text-align: center;
  font-weight: bold;
  margin: 0;
  padding: 1rem;
  left: 0;
  font-family: sans-serif;
  font-size: 10px;
  opacity: .75;
  opacity:1; /* rebrand sep 2024 */
  font-weight: bold;
}

.grow{
  flex:1;
  display:flex;
}

/* lightbox */
.lightbox{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(0,0,0,.7);
  animation:fadeIn 500ms forwards;
  filter:drop-shadow(0 0 20px rgba(0,0,0,0.5));
}

.lightbox iframe{
  width:80%;
  aspect-ratio:16/9;
  border-radius:var(--border-rad);
  overflow:hidden;
}

.lightbox.hidden{
  display:none;
}

.close{
  position:fixed;
  top:0;
  right:0;
  margin:1% 2%;
  font-size:3rem;
  color:white;
  user-select:none;
  cursor:pointer;
  filter:drop-shadow(0 0 0 #fff);
  transition-duration:100ms;
}

.close:hover{
  filter:drop-shadow(0 0 5px #fff);
}

img{
  pointer-events:none;
  user-select:none;
}