* {
    box-sizing: border-box;
}

html {
    background-color: black;
}

body {
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s;
}

.main-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 40px;
    gap: 90px;
    align-items:center;
}


.main-container2 {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 40px;
    gap: 90px;
    align-items:center;
}

.door1 {
    background: rgb(57, 50, 39);
    width: 20%;
    height: 100%;
    position: relative;

}

.door2 {
    background: rgb(165, 116, 42);
    width: 10%;
    height: 100%;
    position: relative;
}

.door3 {
    background: rgb(85, 47, 32);
    width: 50%;
    height: 100%;
    position: relative;
}

.door4 {
    background: rgb(105, 88, 82);
    width: 20%;
    height: 100%;
    position: relative;
}

.door5 {
    background: rgb(50, 41, 37);
    width: 40%;
    height: 100%;
    position: relative;
}

.door6 {
    background: rgb(149, 90, 67);
    width: 15%;
    height: 100%;
    position: relative;
}

.door7 {
    background: rgb(128, 82, 8);
    width: 35%;
    height: 100%;
    position: relative;
}

.door8 {
    background: rgb(208, 156, 88);
    width: 25%;
    height: 100%;
    position: relative;
}

.pl1 {
    background: rgb(80, 70, 55);
    width: 25%;
    height: 40%;
    top: 10%;
    left: 20%;
    position: absolute;
}

.pr1 {
    background: rgb(80, 70, 55);
    width: 25%;
    height: 40%;
    top: 10%;
    right: 20%;
    position: absolute;  

}

.bpl1 {
    background: rgb(80, 70, 55);
    width: 25%;
    height: 30%;
    bottom: 10%;
    left: 20%;
    position: absolute;
}

.bpr1 {
    background: rgb(80, 70, 55);
    width: 25%;
    height: 30%;
    bottom: 10%;
    right: 20%;
    position: absolute;
}

.knob1 {
    background: rgb(80, 70, 55);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    top: 45%;
    left: 5%;
    position: absolute;
    cursor: grab;
    display: block;
}

.knob2 {
    background: rgb(183, 139, 74);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    top: 54%;
    right: 15%;
    cursor: grab;
    display: block;
}

.pl3 {
    background: rgb(103, 60, 43);
    width: 30%;
    height: 40%;
    left: 13%;
    top: 13%;
    position: absolute;
}

.pr3 {
    background: rgb(103, 60, 43);
    position: absolute;
    width: 30%;
    height: 40%;
    top: 13%;
    right: 13%;
}

.bpl3 {
    background: rgb(103, 60, 43);
    width: 30%;
    height: 20%;
    position: absolute;
    bottom: 13%;
    left: 13%;
}

.bpr3 {
    background: rgb(103, 60, 43);
    width: 30%;
    height: 20%;
    position: absolute;
    bottom: 13%;
    right: 13%;
}

.knob3 {
    background: rgb(103, 60, 43);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    bottom: 38%;
    right: 4.5%;
    cursor: grab;
    display: block;
}

.pl4 {
    background: rgb(124, 105, 98);
    width: 30%;
    height: 45%;
    right: 15%;
    top: 7%;
    position: absolute;
}

.knob4 {
    background: rgb(124, 105, 98);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    bottom: 38%;
    right: 5%;
    cursor: grab;
    display: block;
}

.pl5 {
    background: rgb(68, 57, 52);
    width: 80%; 
    height: 45%;
    top: 10%;
    left: 10%;
    position: absolute;
}

.bpl5 {
    background: rgb(68, 57, 52);
    width: 80%; 
    height: 15%;
    position: absolute;
    bottom: 25%;
    left: 10%;
}

.bpr5 {
    background: rgb(68, 57, 52);
    width: 80%; 
    height: 10%;
    position: absolute;
    bottom: 10%;
    left: 10%;
}

.knob5 {
    background: rgb(68, 57, 52);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    bottom: 40%;
    left: 3.5%;
    cursor: grab;
    display: block;
}

.knob6 {
    background: rgb(174, 114, 90);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    bottom: 44%;
    left: 14%;
    cursor: grab;
    display: block;
}

.pl7 {
    background: rgb(149, 97, 14);
    width: 30%;
    height: 40%;
    left: 15%;
    top: 12%;
    position: absolute;
}

.pr7 {
    background: rgb(149, 97, 14);
    width: 30%;
    height: 40%;
    position: absolute;
    top: 12%;
    right: 15%;
}

.bpl7 {
    background: rgb(149, 97, 14);
    width: 30%;
    height: 20%;
    position: absolute;
    bottom: 12%;
    left: 15%;
}

.bpr7 {
    background: rgb(149, 97, 14);
    width: 30%;
    height: 20%;
    position: absolute;
    bottom: 12%;
    right: 15%;
}

.knob7 {
    background: rgb(149, 97, 14);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    bottom: 38%;  
    right: 6%;
    cursor: grab;
    display: block;
}

.pl8 {
    background: rgb(226, 172, 102);
    width: 72%;
    height: 84%;
    left: 14%;
    top: 8%;
    position: absolute;
}

.knob8 {
    background: rgb(226, 172, 102);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    bottom: 42%;  
    left: 4.5%;
    cursor: grab;
    display: block;
}













.door9 {
    background: rgb(128, 8, 8);
    width: 25%;
    height: 100%;
    position: relative;
}

.pl9 {
    background: rgb(145, 16, 16);
    width: 75%; 
    height: 83%;
    position: absolute;
    bottom: 8%;
    left: 12%;
}

.knob9 {
    background: rgb(145, 16, 16);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 40%;
    right: 3.5%;
    display: block;
}

.door10 {
    background: rgb(128, 8, 8);
    width: 25%;
    height: 100%;
    position: relative;
}

.pl10 {
    background: rgb(145, 16, 16);
    width: 28%; 
    height: 40%;
    top: 8%;
    left: 15%;
    position: absolute;
}

.pr10 {
    background: rgb(145, 16, 16);
    width: 28%; 
    height: 40%;
    position: absolute;
    right: 15%;
    top: 8%;
}

.bpl10 {
    background: rgb(145, 16, 16);
    width: 28%; 
    height: 34%;
    position: absolute;
    bottom: 8%;
    left: 15%;
}

.bpr10 {
    background: rgb(145, 16, 16);
    width: 28%; 
    height: 34%;
    position: absolute;
    right: 15%;
    bottom: 8%;
}

.knob10 {
    background: rgb(145, 16, 16);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 45%;
    right: 5%;
    display: block;
}

.ghost {
    position: fixed;
    top: 0;
    left: 0;
    animation: ghost-move 10s infinite alternate, ghost-scale 2s infinite alternate;
    
}

.shell {
    animation: spin 3s infinite linear;
}

@keyframes ghost-move {
    0% {
        top: 0;
        left: 0;
    }
    100% {
        top: 90vh;
        left: 90vw;
    }
}

@keyframes ghost-scale {
    0% {
  
        transform: scale(1);
    }
    100% {
    
        transform: scale(3);
    }
}














.tape1, .tape4, .tape6, .tape8, .tape9, .tape10, .tape11 {
    pointer-events: none;
}

.tape1 {
    position: fixed;
    z-index: 1;
    transform: rotate(20deg);
    top: 270px;
    left: 520px;
}

.tape4 {
    position: fixed;
    z-index: 1;
    transform: rotate(25deg);
    top: 540px;
    left: 500px;
}

.tape6 {
    position: fixed;
    z-index: 1;
    transform: rotate(-30deg);
    top: 20px;
    left: 490px;
}

.tape8 {
    position: fixed;
    z-index: 1;
    transform: rotate(-20deg);
    top: 300px;
    left: 520px;
}

.tape9 {
    position: fixed;
    z-index: 1;
    transform: rotate(9deg);
    top: 270px;
    left: 540px;
}

.tape10 {
    position: fixed;
    z-index: 1;
    transform: rotate(-5deg);
    top: 500px;
    left: 540px;
}

.tape11 {
    position: fixed;
    z-index: 1;
    transform: rotate(8deg);
    top: 620px;
    left: 540px;
}


.draggable {
    cursor:grab;
    pointer-events: auto;
}



.sign1 {
    position: fixed;
    z-index: 4;
    top: 60px;
    left: 80px;
    pointer-events: none;
}

.sign2 {
    position: fixed;
    z-index: 4;
    top: 220px;
    left: 280px;
    pointer-events: none;
}

.sign3 {
    position: fixed;
    z-index: 4;
    top: 500px;
    left: 180px;
    pointer-events: none;
}

.sign4 {
    position: fixed;
    z-index: 4;
    top: 60px;
    left: 1260px;
    pointer-events: none;
}

.sign5 {
    position: fixed;
    z-index: 4;
    top: 300px;
    right: 300px;
    pointer-events: none;
}

.sign6 {
    position: fixed;
    z-index: 4;
    top: 530px;
    left: 1200px;
    pointer-events: none;
}



.door11 {
    background: rgb(128, 8, 8);
    width: 25%;
    height: 100%;
    position: relative;
}

.pl11 {
    background: rgb(145, 16, 16);
    width: 28%; 
    height: 40%;
    position: absolute;
    left: 15%;
    top: 9%;
}

.knob11 {
    background: rgb(145, 16, 16);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 47%;
    left: 5%;
    display: block;
    z-index: 1;
}











.door12 {
    background: rgb(246, 238, 0);
    width: 40%;
    height: 100%;
    position: relative;
}

.pl12 {
    background: rgb(255, 249, 79);
    width: 81%; 
    height: 55%;
    top: 9%;
    left: 9.5%;
    position: absolute;
}

.pr12 {
    background: rgb(255, 249, 79);
    width: 81%; 
    height: 20%;
    position: absolute;
    bottom: 9%;
    left: 9.5%;
}

.knob12 {
    background: rgb(255, 249, 79);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 30.5%;
    right: 3%;
    display: block;
    animation: move 8s infinite;
   
}



.door13 {
    background: rgb(246, 238, 0);
    width: 25%;
    height: 100%;
    position: relative;
}

.knob13 {
    background: rgb(255, 249, 79);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 45%;
    right: 7%;
    display: block;
    animation: move2 8s infinite;
    animation-delay: -4s;
}




@keyframes move {
    0% {
        transform: translateY(-800px);
    }
    50% {
        transform: translateY(0vw);
    }
    100% {
        transform: translateY(50vw);
    }
}

@keyframes move2 {
    0% {
        transform: translateY(800px);
    }
    50% {
        transform: translateY(0vw);
    }
    100% {
        transform: translateY(-60vw);
    }
}

















.door14 {
    background: azure;
    width: 15%;
    height: 100%;
    position: relative;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.pl14 {
    background: rgb(110, 67, 171);
    width: 30%; 
    height: 82.5%;
    position: absolute;
    left: 35%;
    top: 9%;
}

.knob14 {
    background: rgb(110, 67, 171);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 40%;
    left: 13%;
    display: block;
}

@keyframes pulse {
    0% {
        background-color: rgb(85, 46, 140);
        transform: scale(1);
    }
    100% {
        background-color: azure;
        transform: scale(0.6);
    }
}












.backwave {

    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 200px;
    animation: waves 3s infinite alternate;
  }

.frontwave {

    z-index: 4;
    width: 100%;
    height: 100%;
    top: 400px;
    position: fixed;
    animation: waves 3s -1s infinite alternate;
    opacity: 0.7;
}

.fish1 {
    position: fixed;
    left: 50%;
    bottom: 0vh;
    transform: translate(-50%, -50%);
    animation: fish-move 7s infinite linear;
    animation-delay: -3s;
    z-index: 3;
}

.fish2 {
    position: fixed;
    left: 50%;
    bottom: 0vh;
    transform: translate(-50%, -50%);
    animation: fish-move 7s infinite linear;
    animation-delay: -4s;
    z-index: 3;
}

.fish3 {
    position: fixed;
    left: 50%;
    bottom: 0vh;
    transform: translate(-50%, -50%);
    animation: fish-move2 7s infinite linear;
    animation-delay: -11s;
    z-index: 3;
}

.door15 {
    background: rgb(20, 20, 184);
    width: 25%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.pl15 {
    background: rgb(34, 34, 212);
    width: 28%; 
    height: 40%;
    top: 8%;
    left: 15%;
    position: absolute;
}

.pr15 {
    background: rgb(34, 34, 212);
    width: 28%; 
    height: 40%;
    position: absolute;
    right: 15%;
    top: 8%;
}

.bpl15 {
    background: rgb(34, 34, 212);
    width: 28%; 
    height: 34%;
    position: absolute;
    bottom: 8%;
    left: 15%;
}

.bpr15 {
    background: rgb(34, 34, 212);
    width: 28%; 
    height: 34%;
    position: absolute;
    right: 15%;
    bottom: 8%;
}

.knob15 {
    background: rgb(34, 34, 212);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 45%;
    right: 5%;
    display: block;
}

.door16 {
    background: rgb(20, 20, 184);
    width: 25%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.pl16 {
    background: rgb(34, 34, 212);
    width: 75%; 
    height: 83%;
    position: absolute;
    bottom: 8%;
    left: 12%;
}

.knob16 {
    background: rgb(34, 34, 212);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 40%;
    left: 3.5%;
    display: block;
}

@keyframes fish-move {
    0% {
        transform: rotate(360deg) translateX(30vw) rotate(-360deg);
    }
    100% {
        transform: rotate(0deg) translateX(30vw) rotate(0deg);
    }
}

@keyframes fish-move2 {
    0% {
        transform: rotate(0deg) translateX(30vw) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(30vw) rotate(-360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes waves {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(70px);
    }
}









@keyframes doormove {
    0% {
        transform: translateX(-2000px);
    }
    50% {
        transform: translateX(0px);
    }

    100% {
        transform: translateY(4000px);
    }
}

.door17 {
    background: rgb(171, 15, 109);
    width: 50%;
    height: 100%;
    position: relative;
    animation: doormove 10s infinite ease-in-out;
}

.pl17 {
    background: rgb(201, 27, 131);
    width: 87.5%; 
    height: 40%;
    position: absolute;
    top: 9%;
    left: 6.2%;
}

.pr17 {
    background: rgb(201, 27, 131);
    width: 87.5%; 
    height: 16%;
    position: absolute;
    bottom: 26.5%;
    left: 6.2%;
}

.bpl17 {
    background: rgb(201, 27, 131);
    width: 87.5%; 
    height: 9%;
    position: absolute;
    bottom: 9%;
    left: 6.2%;
}

.knob17 {
    background: rgb(201, 27, 131);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 37%;
    left: 1.8%;
    display: block;
}










.door18 {
    background: rgb(151, 133, 87);
    width: 23%;
    height: 100%;
    position: relative;
    z-index: 3;
}

.pl18 {
    background: rgb(126, 109, 65);
    width: 72.5%; 
    height: 30%;
    position: absolute;
    top: 8%;
    left: 13.5%;
}

.knob18 {
    background: rgb(126, 109, 65);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 43%;
    right: 5%;
    display: block;
    z-index: 99;
}

.mountain {
    position: fixed;
    z-index: 1;
    top: 200px;
    background: cover;
}

.backgrass {
    position: fixed;
    z-index: 2;
    top: 450px;
    background: cover;
}

.frontgrass {
    position: fixed;
    z-index: 4;
    top: 600px;
    left: 300px;
    background: cover;
}

.giraffe {
    position: fixed;
    z-index: 5;
    top: -200px;
    left: 70px;
    filter: blur(5px);
    pointer-events: none;
}

.giraffe2 {
    position: fixed;
    z-index: 5;
    top: 54px;
    left: 1000px;
    background: cover;
    pointer-events: none;

  
}








.brick {
    background: url("img/brick.png") no-repeat center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
    pointer-events: none;
}

.ivy {
    position: fixed;
    top: -25%;
    z-index: 1;
    pointer-events: none;
}

.door19 {
    background: rgb(255, 255, 255);
    width: 25%;
    height: 100%;
    position: relative;
}

.pl19 {
    background: rgb(236, 236, 236);
    width: 75%; 
    height: 83%;
    position: absolute;
    bottom: 8%;
    left: 12%;
}

.knob19 {
    background: rgb(236, 236, 236);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 40%;
    right: 3.5%;
    display: block;
}

.door20 {
    background: rgb(255, 255, 255);
    width: 25%;
    height: 100%;
    position: relative;
}

.pl20 {
    background: rgb(236, 236, 236);
    width: 28%; 
    height: 40%;
    top: 8%;
    left: 15%;
    position: absolute;
}

.pr20 {
    background: rgb(236, 236, 236);
    width: 28%; 
    height: 40%;
    position: absolute;
    right: 15%;
    top: 8%;
}

.bpl20 {
    background: rgb(236, 236, 236);
    width: 28%; 
    height: 34%;
    position: absolute;
    bottom: 8%;
    left: 15%;
}

.bpr20 {
    background: rgb(236, 236, 236);
    width: 28%; 
    height: 34%;
    position: absolute;
    right: 15%;
    bottom: 8%;
}

.knob20 {
    background: rgb(236, 236, 236);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    cursor: grab;
    bottom: 45%;
    right: 5%;
    display: block;
}







.red-dot {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: 55px;
    position: relative;
    cursor: crosshair;
    bottom: 1300px;
    left: 450px;
    display: block;
}

.red-dot2 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor: crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 10;
}

.red-dot3 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor: crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 10;
}

.red-dot4 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor:crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 4;
}

.red-dot5 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor: crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 5;
}

.red-dot6 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor: crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 10;
}

.red-dot7 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor:crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 5;
}

.red-dot8 {
    background: rgb(255, 0, 0);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    cursor:crosshair;
    top: 15px;
    right: 15px;
    display: block;
    z-index: 4;
    
}












.items {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s;

    user-select: none;
    cursor: pointer;
    height: 100vh;
  

  
  }


.door {
    display: inline-block;
 
    position: relative;
  
  
   

 

}