* {
  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; 
}
.stencil-art{
  font-family: "Saira Stencil One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.kopjes-frame2{ 
  font-size: 'Mochiy Pop One', sans-serif;
}

body{
  height: 150vh;
  overflow-x: hidden;
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url(plaatjes/achtergrond1.png);
  background-repeat: repeat;
  background-color: #fcfcfc4d;
  background-blend-mode: lighten;

  background-size: 800px 800px;
  background-position: 50% 100%;

  will-change: background-size;
}

.graffiti-koptekst {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  color: #DF4A21;
  font-family: 'Sedgwick Ave Display', cursive;
  font-size: 180px;
  -webkit-text-stroke: 1px #e4e4e4;

  z-index: 3;
  margin-bottom: -80px;
}

.stencil-art-koptekst {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  color: #DF4A21;
  font-family: "Saira Stencil One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 160px;
  -webkit-text-stroke: 3px #e4e4e4;

  z-index: 3;
}

.sculpture-koptekst {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  color: #DF4A21;
  font-family: 'Luckiest Guy', cursive;
  font-size: 120px;
  -webkit-text-stroke: 1px #e4e4e4;

  z-index: 3;
}

.wall-koptekst {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  color: #DF4A21;
  font-family: 'Rubik Wet Paint', cursive;
  font-size: 120px;
  -webkit-text-stroke: 0.1px #e4e4e4;

  z-index: 3;
}

.yarn-koptekst {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  color: #DF4A21;
  font-family: 'Fredoka', sans-serif;
  font-size: 140px;
  text-shadow:
    6px 0 0 #e4e4e4,
    -6px 0 0 #e4e4e4,
    0 6px 0 #e4e4e4,
    0 -6px 0 #e4e4e4;
  z-index: 3;
}

.threeD-art-koptekst {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  font-family: 'Shrikhand', cursive;
  font-size: 120px;
  color: #DF4A21;
  -webkit-text-stroke: 0.1px #e4e4e4;
  text-shadow:
    -6px -6px 5px #a63719;
  z-index: 3;
}


/*Graffiti pagina*/

/*AFKOMST*/
.graffiti-afkomst-container {
  position: relative;
  width: 55%;
  margin-left: 85px;  
}

.papier1 {
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
}

.graffiti-afkomst {
  position: absolute; 
  width: 75%;
  top: 45%;          
  left: 50%;          
  transform: translate(-50%, -50%);
  z-index: 1;       
  text-align: center;
  color: black;   
}

.graffiti-afkomst h1{
  font-size: 70px;
  margin-bottom: 8%;
  font-family: 'Mochiy Pop P One', sans-serif;
}

.graffiti-afkomst h2{
  font-size: 24px;
  font-family: sans-serif;
}

.graffiti-woord{
  position: absolute;
  top: 600px;
  right: 35px;
  z-index: 4;
  filter: blur(2px);
}

/*STIJLEN*/
.graffiti-stijlen-container {
  position: relative;
  float: right;
  width: 55%;
  margin-right: 85px;  
}

.papier2{
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
}

.graffiti-stijlen {
  position: absolute; 
  width: 70%;
  top: 45%;          
  left: 53%;          
  transform: translate(-50%, -50%);
  z-index: 1;       
  text-align: center;
  color: black;   
}

.graffiti-stijlen h1{
  font-size: 70px;
  margin-bottom: 8%;
  font-family: 'Mochiy Pop P One', sans-serif;
}

.graffiti-stijlen h2{
  font-size: 24px;
  font-family: sans-serif;
}

.graffiti-gezicht{
  position: absolute;
  top: 1450px;
  left: 35px;
  z-index: 4;
  filter: blur(1px);
}

/*IMPACT*/
.graffiti-impact-container {
  position: relative;
  width: 55%;
  margin-left: 85px;  
}

.papier3{
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
}

.graffiti-impact {
  position: absolute; 
  width: 75%;
  top: 73%;          
  left: 52%;          
  transform: translate(-50%, -50%);
  z-index: 1;       
  text-align: center;
  color: black;   
}

.graffiti-impact h1{
  font-family: 'Mochiy Pop P One', sans-serif;
  font-size: 70px;
  margin-bottom: 8%;
}

.graffiti-impact h2{
  font-size: 24px;
  font-family: sans-serif;
}

.graffiti-pijl{
  position: absolute;
  top: 2400px;
  right: 35px;
  z-index: 4;
  filter: blur(1px);
}

.terugknop{
  position: absolute;
  left: 45px;
  top: 10px;
  z-index: 6;
}

.terugknop img{
  width: 200px;
  height: auto;
}

/*Plaatjes stijlen*/
.stencil-art1{
  position: absolute;
  top: 700px;
  right: 65px;
  height: 350px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.stencil-art2{
  position: absolute;
  top: 1700px;
  height: 350px;
  width: auto;
  left: 65px;
  z-index: 4;
  opacity: 0.9;
}

.stencil-art3{
  position: absolute;
  top: 2600px;
  right: 65px;
  height: 300px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.public-sculptures1{
  position: absolute;
  top: 780px;
  right: 85px;
  height: 300px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.public-sculptures2{
  position: absolute;
  top: 1700px;
  height: 300px;
  width: auto;
  left: 65px;
  z-index: 4;
  opacity: 0.9;
}

.public-sculptures3{
  position: absolute;
  top: 2600px;
  right: 85px;
  height: 450px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.wall1{
  position: absolute;
  top: 780px;
  right: 85px;
  height: 400px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.wall2{
  position: absolute;
  top: 1700px;
  height: 300px;
  width: auto;
  left: 65px;
  z-index: 4;
  opacity: 0.9;
}

.wall3{
  position: absolute;
  top: 2600px;
  right: 65px;
  height: 350px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.yarn1{
  position: absolute;
  top: 780px;
  right: 65px;
  height: 280px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.yarn2{
  position: absolute;
  top: 1700px;
  height: 300px;
  width: auto;
  left: 65px;
  z-index: 4;
  opacity: 0.9;
}

.yarn3{
  position: absolute;
  top: 2600px;
  right: 65px;
  height: 350px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.threeD1{
  position: absolute;
  top: 780px;
  right: 85px;
  height: 300px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}

.threeD2{
  position: absolute;
  top: 1700px;
  height: 450px;
  width: auto;
  left: 85px;
  z-index: 4;
  opacity: 0.9;
}

.threeD3{
  position: absolute;
  top: 2600px;
  right: 65px;
  height: 350px;
  width: auto;
  z-index: 4;
  opacity: 0.9;
}