.undersidescreen {
position:relative;
top: 46.5%;
width: 100%;
height: 50%;
}



.image-onderkant {
    position: absolute;
    width: 80%;
    height: 90%;
    top: 60px;
    z-index: 0;
    left: 100px;
    }

.window {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 3px;
    background-color: rgba(200, 200, 200, 0.7);
}



    .background-wall {
    background-color: #CDCDCD;
    width: 40%;
    height: 23%;
    position: absolute;
    z-index: 1;
    }

.background-wall1 {
    background-color: #CDCDCD;
    width: 40%;
    height: 23%;
    position: absolute;
    left: 60%;
        z-index: 1;
    }

.background-wall2 {
    background-color: #CDCDCD;
    width: 40%;
    height: 12.5%;
    position: absolute;
    left: 20%;
        z-index: 1;
    }
    .background-wall3 {
    background-color: #CDCDCD;
    width: 20%;
    height: 100%;
    position: absolute;
    left: 80%;
        z-index: 1;
    }
    .background-wall4 {
    background-color: #CDCDCD;
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0%;
        z-index: 1;
    }
    .background-wall5 {
    background-color: #CDCDCD;
    width: 40%;
    height: 23%;
    position: absolute;
    left: 60%;
    top: 83%;
        z-index: 1;
    }
        .background-wall6 {
    background-color: #CDCDCD;
    width: 40%;
    height: 23%;
    position: absolute;
    left: 0%;
    top: 83%;
        z-index: 1;
    }
.background-wall7 {
    background-color: #CDCDCD;
    width: 40%;
    height: 12.5%;
    position: absolute;
    left: 20%;
    top: 93%;
        z-index: 1;
    }

.flooring {
    position: absolute;
    width: 100%;
    height: 8.5%;
    top:  104%;
    left: 0%;
    background-color:#EBB17D;
    z-index: 2;
}




.deur-frame {
    position: absolute;
    width: 12%;
    height: 80%;
    background-color: #E39D60;
    border: 14px solid #C37836;
    z-index: 3;
    border-bottom: #E39D60;
    top: 22%;
    left: 85%;
}
.deur-knop {
    position: absolute;
    width: 13%;
    height: 6%;
    border-radius: 50%;
    background-color: #C3C0C0;
    z-index: 4;
    top: 50%;
    left: 70%;
    border: black solid 2px;
}
.deur-poster {
    position: absolute;
    width: 68%;
    height: 46%;
    left: 15%;
    top:  2%;
    z-index: 4;
    border: black solid 2px;
    background-color: #F7FCD6;
    border-radius: 10px;
}

.poster-image {
    position: absolute;
    width: 76%;
    height: 70%;
    top: 8%;
    left: 10%;
    border-radius: 5px;
}

.poster-text {
    position: absolute;
    width: 50%;
    height: 80%;
    top: 80%;
    left: 13%;
    font-family: 'Arial Black', sans-serif;
    font-size: 1.2vw;
    text-align: center;
    color: black;
}


.kast-frame {
    position: absolute;
    width: 15%;
    height: 55%;
    border: 14px solid #A86020;
    outline: auto;
    outline-color: rgb(0, 0, 0);
    background-color: #C37836;
    z-index: 2;
    border-bottom: #E39D60;
    top: 46%;
    left: 0.5%;
}



.kast-lade1 {
    position: absolute;
    width: 100%;
    height: 7%;
    background-color: #A86020;
    border: black solid 2px;
    z-index: 3;
    top: 40%;
    left: 0%;
}

.kast-lade2 {
    position: absolute;
    width: 100%;
    height: 8%;
    background-color: #A86020;
    border: black solid 2px;
    z-index: 3;
    top: 70%;
    left: 0%;
}

.lasanga-image, .italie-image {
    position: absolute;
    width: 30%;
    height: 500%;
    top: -550%;
    left: 10%;
    border-radius: 5px;
 }
.italie-image {
    left: 60%;
}

h3 {
    position: absolute;
    top: 0%;
    left: 20%;
    font-family: 'Jacques Francois', sans-serif;
    font-size: 2em;
    text-align: center;
    color: black;
}

.poster {
    position: absolute;
    width: 10%;
    height: 40%;
    background-color: #F7FCD6;
    z-index: 3;
    top: 4%;
    left: 3%;
    border-radius: 10px;
}
.tekst-poster {
    position: absolute;
    width: 90%;
    height: 30%;
    top: 15%;
    left: 6%;
    font-family: 'Arial Black', sans-serif;
    font-size: 0.9vw;
    text-align: center;
    color: black;
}
.poster-spelt {
    position: absolute;
    width: 6%;
    height: 4%;
    background-color: #a41818;
    z-index: 4;
    top: 5%;
    left: 50%;
    border-radius: 50%;
}


@media (max-width: 940px) {
  .image-onderkant {
    width: 100%;
    left: 0;
  }

  .deur-frame {
    width: 20%;
    left: 75%;
    height: 70%;
    top: 32%;
  }

  .kast-frame {
    width: 25%;
    left: 5%;
    top: 52%;
    height: 50%;
  }

  .poster {
    width: 20%;
    height: 30%;
    top: 10%;
    left: 5%;
  }

  h3 {
    font-size: 1.6em;
    position: relative;
    left: -5%;
  }

  .tekst-poster {
    font-size: 0.6em;
  }

  #score {
    font-size: 1em;
  }
  .poster-text{
 font-size: 1em;

  }
}

@media (max-width: 768px) {
  .image-onderkant {
    width: 100%;
    left: 0;
  }

  .deur-frame {
    width: 20%;
    left: 75%;
    height: 70%;
    top: 32%;
  }

  .kast-frame {
    width: 25%;
    left: 5%;
    top: 52%;
    height: 50%;
  }

  .poster {
    width: 20%;
    height: 30%;
    top: 10%;
    left: 5%;
  }

  h3 {
    font-size: 1.6em;
    position: relative;
    left: 2%;
  }

  .tekst-poster {
    font-size: 0.6em;
  }

  #score {
    font-size: 1em;
  }
  .poster-text{
 font-size: 1em;

  }
}
@media (max-width: 500px) {
  .image-onderkant {
    width: 100%;
    left: 0;
  }

  .deur-frame {
    width: 20%;
    left: 75%;
  }

    .deur-poster{
        height: 35%;
      top: 7%;


    }




  .kast-frame {
    width: 25%;
    left: 5%;
    top: 52%;
    height: 50%;
  }

  .poster {
    width: 20%;
    height: 25%;
    top: 10%;
    left: 5%;
  }

  h3 {
    font-size: 1.2em;
    position: relative;
    top: 50%;
    left: 2%;

  }

  .tekst-poster {
    font-size: 0.56em;
  }

  #score {
    font-size: 1em;
  }
  .poster-text{
 font-size: 0.6em;

  }
}