*{
    margin:0;
    padding:0;
    box-sizing:border-box
}

/*Fonts*/
.yarn-bombing {
    font-family: 'Fredoka', sans-serif;
} 

.public-sculpture {
    font-family: 'Luckiest Guy', cursive;
} 

.wall-painting {
    font-family: 'Rubik Wet Paint', cursive;
} 

.graffiti {
    font-family: 'Sedgwick Ave Display', cursive;
} 

.threeD-Art {
    font-family: 'Shrikhand', cursive; 
}

body {
    background-image: url(plaatjes/achtergrond1.png);
    background-size: 800px 800px;
    background-repeat: repeat;
    height: 150vh;
    overflow-x: hidden;
}

.koptekst{
  display:flex;
  justify-content:center;
  align-items:center;
  height:90vh;
  position:relative;
  z-index:3;
  color:#DF4A21;
  font-family:'Nosifer', cursive;
  font-size:120px;
  text-shadow:
    4px 0 0 white,
    -4px 0 0 white,
    0 4px 0 white,
    0 -4px 0 white;
}

.hero-wrapper{
  position:sticky;
  top:0;
  height:280px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:-280px;
  z-index:2;
}

.hero{
  height:255.57px;
  transform: rotate(-45deg) translateY(0px);
  transition:transform 0.05s linear, opacity 0.3s linear;
  will-change: transform, opacity;
  display:block;
}

.plaatjes{
  left: -140px;
  height: 300px;
  width: 100%;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.track{
  display:flex;
  gap:20px;
  width:max-content;
  align-items:flex-end;
}

.scroll-active{
  animation: scroll 30s linear infinite;
}

.item{
  flex-shrink:0; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  text-decoration:none; 
  color:white
}

.plaatjes img{
  height:255.57px; 
  width:auto; 
}

.plaatjes p{
  color:white; 
  font-size:20px; 
  margin-top:6px; 
  text-transform:capitalize; 
  text-align:center;
}


.center-item img,
.center-item p {
  opacity:0;
  visibility:hidden;
  transition:opacity .3s linear, visibility .3s linear;
}

.center-item.revealed img,
.center-item.revealed p {
  opacity:1;
  visibility:visible;
}

@keyframes scroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-2229.51px) }
}

@media(max-width:700px){
  .koptekst{font-size:72px}
  .hero{height:180px}
  .plaatjes img{height:160px}
}