body {
    background: #f5f0e8;
    margin: 0px;
    display: block;
    overflow: hidden;
    font-family: 'Press Start 2P', cursive;
}   

.disable {
    pointer-events: none;
    visibility: hidden;
}

#light-filter{

        position:fixed;
        z-index: 100;
        top:0; 
        left:0;
        bottom:0; 
        right:0;
        background-color:rgba(0,0,0);
        pointer-events: none;   
    
}
#loading{  
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 101;
    color: white;
}

.eye {
    position: relative;
    left: 3vw;
    bottom: -7.5vw;
    width: 21vw;
    height: 20vw;
    border: 5px solid hsl(37, 21%, 54%);
    
    background-image: radial-gradient( whitesmoke 90%, red);
    border-radius: 0px 15vw;
    transform: rotate(90deg);
    overflow: hidden;
    z-index: 4;
    
   

}
.eyelid {
    position: absolute;
    left: -11vw;
    bottom: -9vw;
    width: 21vw;
    height: 20vw;
    border: 5px solid hsl(37, 21%, 54%);
    background-color: #f5f0e8;
    border-radius: 0px 15vw;
    transform: rotate(0deg);
    transition: all 0.8s ease-out 0.05s;
}

.eyelid.closed {
    left: 0vw;
    bottom: 0vw;
}

.eyebrows {
    
    position: absolute;
    left: 24vw;
    bottom: 45vh;
    width: 20vw;
    height: 20vw;
    border: 0.5vw solid #674f04;
    border-radius: 30vw 5vw;
    border-bottom: transparent;
    background: #a28f70;
    transform: rotate(54deg);
    z-index: 2;

}
.eyebrows::after {
    content: "";
    border: 10px solid #674f04;
    width: 21vw;
    height: 16vw;
    z-index: 3;
    border-radius: 435px 9px 0px 0px;
    position: absolute;
    left: -1vw;
    bottom: 0vw;
    background: #f5f0e8;
    border-bottom: #f5f0e8;
    border-right: #f5f0e8;
}

.right {
    left: 58vw;
    transform: rotate(306deg) rotateY(178deg);
}

.innerEye {
    width:7vw;
    height: 7vw;
    border-radius: 50%;
    background-image: radial-gradient( black 20%, blue 60%);
    position: relative;
    transition: all 0.5s ease-out;
}

.shine {
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background-image: radial-gradient( white 20%, transparent 60%);
    position: relative;
    left: 0vw;
    top: 2vw;
} 
.shine.right {
    left: 1.5vw;
    top: 3vw;
}

/* to do
eye red when click
follow the eye 
close eye on click 
add sounds
wash with water
moqito and medicine on mouse
add bottom t
drop shadow mosquto and shadows all things
o  go crazy or angary cry */


.win{
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}