*{
    
 cursor: none;
    
}



body{

    overflow: hidden;
    overflow-x: scroll;

    margin:0;
    padding:0;

    background-color: lightgrey;
    
    height: 100vh;
    width: 100vw;
}

main{
    position:fixed;
    z-index: 2000;
    
    width: 100vw;
    height: 100vh;
    
    pointer-events: none;
        
}

.night{
    
    position: fixed;
    
    width: 100vw;
    height: 100vh;
    
    background-color:midnightblue;
    
    mix-blend-mode:darken;
    
    opacity: 0.8;
    
    z-index:4000;
    
    pointer-events: none;
    
    display:none;
    
}

.cloudy{
    
    position: fixed;
    
    width: 100vw;
    height: 100vh;
    
    background-color:lightgrey;
    background-color: skyblue;
    
    mix-blend-mode:screen;
    
    opacity: 0.3;
    
    z-index:4000;
    
    pointer-events: none;
    
    display:none;
    
}

.displaywrap{
    
    position: fixed;
    
    top:2px;
    left:0px;
    
    width:300px;
    
    z-index: 3000;
    
}

.displayframe{
    
    position: absolute;
    
    width:100%;
    
    pointer-events: none;
}

.display{
    
    position: absolute;
    
    top:59px;
    left:30%;
    
    height: auto;
    
    width: auto;

    
}

.display img{
    
    width: 38%;
    
}

.display img:hover{
    
    opacity: 0.8;
    
}

.gateframe{
    
    position: fixed;
    
    bottom:-5px;
    left:-27px;
    
    width:250px;
    
    z-index: 3000;
}

.gate{
    
    width:100%;
    
}

.creature{
    
    position: absolute;
    
    top:-80px;
    left: 110px;
    width: 100px;
    
    pointer-events: all;
    
}

#creature2{
    
    width:70px;
    
    top:45px;
    left: -10px;
    display: none;
}

.creature:hover{
    
    opacity: 0.8;
    cursor: pointer;
    
}

.fountainframe{
    
    position: absolute;
    
    top:95%;
    left:50%;
    
    width:115px;
    
    transform: translate(-50%,-100%);
    
    z-index: 96;
}

.fountain{
    
    width:100%;
    
    pointer-events: all;
    
}

.fountain:hover{
    
    opacity: 0.8;
    cursor: pointer;
    
}

.ray{
    
    position: absolute;
    
    top:0;
    
    left: 1000px;
    
    height: 80%;
    
    z-index: 80;
    
}

.cloud{
    
    position: absolute;
    
    top:0;
    
    left: 1000px;
    
    width: 200px;
    
    transform: translate(-50%,-50%);
    
    
}

.cursor{
    
    position: absolute;
    
    transform: translate(-50%,-50%);
    
    width: 60px;
    
    z-index: 10000000;
    
    pointer-events: none;
    
}

.ground{


    position: absolute;
    overflow: hidden;

    bottom:0;
    left:0;

    width:5000px;
    height: 100%;

    background-color: rgb(101,157,81);
    
    background-image: url("../images/ground_2.png");
    background-repeat: repeat-x repeat-y;
    background-size: 2%;

    pointer-events: none;
    
 

}

.plant, .fence, .tree, .flower, .fog{

    position: absolute;

    height: 70px;

    transform: translate(-50%,-100%) scaleX(-1);

    /*background: white;*/
    
    pointer-events: none;

}

.fence{
    
    top: 99%;
    
    height: auto;
    width: 100px;
    
}

.leaf{

    width: 100px;

}

.bush{

    width:100px;

}



.system{

    position: absolute;


    top: 20%;
    left:70%;

    width: 100px;
    height: 100px;

    border-radius: 50px;

}

.system img:hover{
    
    opacity: 0.8;
    
}

.flower{

    width: 80px;
}

#s2{

    top:50%;
    left:50%;

}

.circle{

    position: absolute;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    border: 1px solid black;

}

.song { 
    position: absolute; 
    
    transform: translate(-50%,-50%);

    width: 10px;
    height: 10px;

    background: transparent;
    
}

.song img{
    
    width:100%;
    
}

.song:hover{

    cursor: pointer;

}

.block{

    position:absolute;

    height:300px;

    transform: translate(-50%,-100%);

    left: 50%;
    top: 100%;

    opacity: 1;
    
}

.frames{

    position: absolute;

    width: 100%;
    height: 100%;

    z-index: 1000;

    pointer-events: none;

}

.frame{

    position: absolute;

    background: white;


}

#left{

    left:0;
    width:50px;

    height: 100%;


}

#right{

    right:0;
    width:50px;

    height: 100%;


}

#top{

    top:0;
    width:100%;
    height: 50px;

}

#bottom{

    bottom:0;
    width:100%;
    height: 50px;

}