/* style_deeper.css */
.clickdoor{
    transform: scale(1);
    transition: all 8s ease;
    cursor: pointer;
    
}

.clickdoor:hover{
    transform: scale(0.95);
    transition: all 8s ease;
    box-shadow: 0px 0px 70px 40px black;
}

/* donotleave */
#deeperbg{
    background-image: url('../assets/img/deeper/deeperbgd.png');
    background-size: 100vw;
    filter: brightness(0.7)
}

#deepenter{
    position: absolute;
    width: 25.6vw;
    height: 10.1vw;
    left: 39vw;
    top: 17.5vw;
    opacity: 0;
    transition: all 0.5s ease;
}

#deepenter:hover{
    opacity: 1;
}

#deeptxt1{
    position: absolute;
    font-family: 'crumbled';
    font-size: 6vw;
    left: 36vw;
    top: 11vw;
    color: rgb(217, 214, 234, 0.587);
    text-shadow: 0px 0px 2px rgb(38, 16, 68);
    text-shadow: 0px 0px 20px rgb(38, 16, 68);
}

#deeptxt2{
    position: absolute;
    font-family: 'crumbled';
    font-size: 6vw;
    left: 55vw;
    top: 30vw;
    width: 20vw;
    text-align: right;
    color: rgba(217, 214, 234, 0.587);
    text-shadow: 0px 0px 2px rgb(38, 16, 68);
    text-shadow: 0px 0px 20px rgb(38, 16, 68);
}

/*  source: https://deloughry.co.uk/posts/building-glitch-effects-with-css/  */

.glitch-text {
    animation: text-glitch 6s ease-in-out infinite;
}

@keyframes text-glitch {
    0%,
    92%,
    100% {
        transform: translateX(0);
        text-shadow: none;
    }
    93% {
        transform: translateX(-2px);
        text-shadow:
            2px 0 #00d9ff,
            -2px 0 #ff4757;
    }
    94% {
        transform: translateX(2px);
        text-shadow:
            -2px 0 #00d9ff,
            2px 0 #ff4757;
    }
    95% {
        transform: translateX(-1px);
        text-shadow:
            1px 0 #00d9ff,
            -1px 0 #ff4757;
    }
    96% {
        transform: translateX(1px);
        text-shadow: none;
    }
}




/* deeper */

#deeper1bg{
    background-image: url('../assets/img/deeper/deeper1bgd.png');
    background-size: 14.3vw;
    filter: brightness(0.7);
}

#deeptree{
    position: absolute;
    pointer-events: none;
    width: 18vw;
    top: 25vw;
    left: 5vw;
    filter: hue-rotate(250deg);
}

#door1{
    position: absolute;
    width: 18vw;
    left: 41vw;
    top: 6vw;
}

#door6{
    position: absolute;
    width: 18vw;
    height: 39.5vw;
    left: 63vw;
    top: 6vw;
}

#deepdeco1{
    position: absolute;
    width: 9vw;
    left: 25vw;
    top: 15vw;
}

#deeptxt3{
    position: absolute;
    font-family: 'crumbled';
    pointer-events: none;
    font-size: 8vw;
    left: 22vw;
    color: rgb(119, 44, 44);
    background-color: rgba(0, 0, 0, 0.774);
}

#deepdeco0{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.774);
    width: 13vw;
    height: 20vw;
    left: 52vw;
    top: 28.1vw;

}

/* deeper 2 */

#deeper2bg{
    background-image: url('../assets/img/deeper/deeper2bg.gif');
    background-size: 100vw 100vh;
}

#door2{
    position: absolute;
    width: 16vw;
    left: 42vw;
    top: 6vw;
}

#deeptxt4{
    position: absolute;
    font-family: 'drunk';
    font-size: 6.5vw;
    top: 43vw;
    left: 2vw;
    color: white;
}

#deeptxt5{
    position: absolute;
    font-family: 'drunk';
    font-size: 3vw;
    top: 10vw;
    left: 60vw;
    color: rgb(232, 255, 172);
    opacity: 0.9;
}

#seagull{
    position: absolute;
    width: 50vw;
}

#seagull2{
    position: absolute;
    width: 36vw;
    filter: invert(1);
    left: 60vw;
    top: 12vw;
    transform: rotateY(180deg);
    opacity: 0.9;
}

/* depper 3 */

#deepclouds{
    position: absolute;
    width: 100vw;
    top: 1vw;
    pointer-events: none;
    opacity: 0.7;
}

#deeper3bg{
    background-image: url('../assets/img/deeper/deeper3bg.png');
    background-size: 100vw 100vh;
}

#deeptxt6{
    position: absolute;
    font-family: 'bluescreen';
    font-size: 7vw;
    top: 19vw;
    left: 0vw;
    color: rgb(255, 185, 254);
    opacity: 0.9;
    pointer-events: none;
}

#door3{
    position: absolute;
    width: 14vw;
    left: 43vw;
    top: 6vw;
}

/* deeper 4 */

#deeper4bg{
    background-image: url('../assets/img/deeper/deeper4bgd.gif');
    background-size: 100vw 100vh;
}

#door4{
    position: absolute;
    width: 12vw;
    height: 26vw;
    left: 44vw;
    top: 6vw;
}

#deeptxt7{
    position: absolute;
    font-family: "drunk";
    left: 2vw;
    top: 10vw;
    font-size: 7vw;
    color: #2bfbffa9;
    pointer-events: none;
}

#deepdeco2{
    position: absolute;
    width: 30vw;
    left: 65vw;
    filter: hue-rotate(60deg);
    opacity: 0.8;
}

/* deeper 5 */

#door5{
    border: 5px solid #f63090;
    position: absolute;
    width: 10vw;
    height: 22vw;
    left: 45vw;
    top: 6vw;
    box-sizing: border-box;
    font-family: 'coralpixels';
    font-size: 1.39vw;
    padding: 0.2vw;
    line-height: 1.37;
}

#deeper5bg{
    background-image: url('../assets/img/deeper/deeper5bg.gif');
    background-size: 100vw 100vh;
    filter: contrast(0.7);
}

#key{
    position:absolute;
    width: 12vw;
    left: 44vw;
    top: 7vw;
}

#keyshadow{
    position:absolute;
    width: 25vw;
    height: 25vw;
    left: 37.5vw;
    top: 2vw;
    border-radius: 50%;
    background-color: beige;
    border-radius: 50%;
    filter: blur(4vw);
}

#arrows{
    position: absolute;
    width: 100vw;
}