@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

* {
    margin: 0;
    padding: 0;

}


.container {
    position: relative;
}

.fotowallyachtergrond {
    position: absolute;
    z-index: -1;
    width: 100%;
}

#bombutton {
    width: 100px;
    height: 100px;
    background-image:url(image/bomfoto.png);
    background-size: cover;
    background-color: transparent;
    border: none;
    margin-top: 530px;
    margin-left: 760px;
    z-index: 10;
    opacity: 80%;

}

#boekbutton {
    position: absolute;
    width: 80px;
    height: 40px;
    background-image:url(image/boek\ woordzoeker.png);
    background-size: cover;
    background-color: transparent;
    border: none;
    margin-left: -460px;
    margin-top: 513px;
    transform: rotate(350deg);
    opacity: 50%;
    z-index: 10;
}



#computerbutton {
    position: absolute;
    width: 60px;
    height: 40px;
    background-image:url(image/sleutel.png);
    background-size: cover;
    background-color: transparent;
    border: hidden;
    margin-left: 115px;
    margin-top: 615px;
    transform: rotate(10deg);
    z-index: 10;
    opacity: 70%;
}

.tekstzoek {
    margin-top: 180px;
    font-family: 'Larsseit';
    font-size: 2.5rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8.5%;
    z-index: 8;
    color: white;
}

.tekstvoorwerpen {
    /* font-family: 'Staatliches', cursive; */
    font-family: 'Larsseit';
    display: flex;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 8;
    color: white;
}

.countclicks{
    color: white;


}

.backgroundtext {
    position: absolute;
    z-index: -2;

    margin-top: -10%;
    width: 100%;
    height: 100%;

}

.bomtext {
    font-family: 'Larsseit';
    display: flex;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 8;
    color: white;
}

.zwartachtergrond {
    position: absolute;
    background-color: black;
    width: 100%;
    z-index: 1;

}

.perkamentusrol {
    position: absolute;
    z-index: 10;
    margin-top: 100px;
    margin-left: 10%;
}

.deurrebus {
    position: absolute;
    z-index: 11;
    margin-top: 200px;
    margin-left: 350px;
}

.kokrebus {
    position: absolute;
    z-index: 11;
    margin-top: 205px;
    margin-left: 580px;
}

.boterrebus {
    position: absolute;
    z-index: 11;
    margin-top: 205px;
    margin-left: 780px;
}

.wijnrebus{
    position: absolute;
    z-index: 11;
    margin-top: 205px;
    margin-left: 950px;
}

.slotrebus{
    position: absolute;
    z-index: 11;
    margin-top: 450px;
    margin-left: 350px;
}

.oorrebus{
    position: absolute;
    z-index: 11;
    margin-top: 450px;
    margin-left: 600px;
}

.visrebus {
    position: absolute;
    z-index: 11;
    margin-top: 450px;
    margin-left: 900px;
}

.ringrebus {
    position: absolute;
    z-index: 11;
    margin-top: 700px;
    margin-left: 350px;
}

.webrebus{
    position: absolute;
    z-index: 11;
    margin-top: 700px;
    margin-left: 550px;
}

.bomrebus1 {
    position: absolute;
    z-index: 11;
    margin-top: 700px;
    margin-left: 750px;
}

.zonrebus {
    position: absolute;
    z-index: 11;
    margin-top: 700px;
    margin-left: 950px;
}
.melkrebus {
    position: absolute;
    z-index: 11;
    margin-top: 1000px;
    margin-left: 400px;
}
.bomrebus2 {
    position: absolute;
    z-index: 11;
    margin-top: 1000px;
    margin-left: 700px;
}
.peerrebus {
    position: absolute;
    z-index: 11;
    margin-top: 1000px;
    margin-left: 900px;
}

.oudevinger {
    position: absolute;
    z-index: 11;
    margin-top: 580px;
    margin-left: 1170px;
    transform: rotate(90deg);
}

.deurtext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 420px;
    margin-top: 400px;

}

.koktext {
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 660px;
    margin-top: 400px;
}

.botertext {
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 860px;
    margin-top: 400px;
}

.plus1 {
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 770px;
    margin-top: 300px;
}

.wijntext {
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 1030px;
    margin-top: 400px;
}

.slottext{
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 545px;
    margin-top: 550px;
}

.oortext {
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 760px;
    margin-top: 550px;
}

.vistext {
    font-family: 'Larsseit',cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 1030px;
    margin-top: 600px;
}

.ringtext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 400px;
    margin-top: 900px;
}

.webtext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 620px;
    margin-top: 900px;
}

.zontext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 1020px;
    margin-top: 900px;
}

.melktext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 450px;
    margin-top: 1200px;
}

.bomtext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 770px;
    margin-top: 1200px;
}

.peertext {
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 975px;
    margin-top: 1200px;
}

.plus2{
    font-family: 'Larsseit', cursive;
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: black;
    margin-left: 890px;
    margin-top: 1100px;
}

.ontcijfer {
    font-family: 'Larsseit';
    position: absolute;
    gap: 8%;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: white;
    margin-left: 500px;
    margin-top: 1500px;
}

.ontcijferantwoord {
    font-family: 'Larsseit';
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: white;
    margin-left: 400px;
    margin-top: 1550px;
}

.ontcijferantwoord1 {
    font-family: 'Larsseit';
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.0rem;
    z-index: 150;
    color: white;
    margin-left: 150px;
    margin-top: 1600px;
}
.vulin {
    font-family: 'Larsseit', cursive;
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 8.0rem;
    z-index: 150;
    color:  white;
    margin-left: 400px;
    margin-top: 1600px;
}