html {
	display: flex;
}

body {
	background:url(../image/background1.jpg) 100%;
	background-size: 100% auto;
	margin: auto;
      }
      
.mobile {
        display: none;
      }
      
#dream_nav {
	background:url(../image/dream.png);
	width:50px; 
	height:50px;
    position: absolute;
    top: calc(8% - 25px);
    left: calc(5% - 15px);
	background-position: 50% 45%;
	background-size: 50px auto;
}

#stairs_nav {
	background:url(../image/stair.png);
	width:50px; 
	height:50px;
    position: absolute;
    top: calc(8% - 25px);
    left: calc(10% - 15px);
	background-position: 50% 45%;
	background-size: 50px auto;
}
#stairs_nav:after {
    display: block;
    content: "";
    width: 1.5px;
    height: 30px;
    background: #C8EFFA;
    position: absolute;
    top: 10px;
 	left: -10px;
	transform: rotate(90deg);
    z-index: -1;
    }

#dream {
	background:url(../image/dream.png);
	width:205px; 
	height:190px;
    position: absolute;
    top: calc(50% - 95px);
    left: calc(50% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
}

#stair1 {
	background:url(../image/stair1.png);
	width:200px; 
	height:250px;
    position: absolute;
    top: calc(80% - 95px);
    left: calc(20% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
}
#stair1:hover{
	background:url(../image/stair1.png);
	width:200px; 
	height:250px;
    position: absolute;
    top: calc(80% - 95px);
    left: calc(20% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
	opacity: 0.5;
}
#stair1:after {
    display: block;
    content: "";
    width: 3px;
    height: 400px;
    background: #C8EFFA;
    position: absolute;
    top: -150px;
 	left: 260px;
	transform: rotate(60deg);
    z-index: -1;
    }
    
#stair2 {
	background:url(../image/stair2.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(30% - 95px);
    left: calc(20% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
}
#stair2:hover{
	background:url(../image/stair2.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(30% - 95px);
    left: calc(20% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
	opacity: 0.5;
}
#stair2:after {
    display: block;
    content: "";
    width: 3px;
    height: 250px;
    background: #C8EFFA;
    position: absolute;
    top: 40px;
 	left: 290px;
	transform: rotate(110deg);
    z-index: -1;
    }
#stair3 {
	background:url(../image/stair3.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(90% - 95px);
    left: calc(50% - 102.5px);
    transform: rotate(-30deg);
	background-position: 50% 45%;
	background-size: 200px auto;
}
#stair3:hover {
	background:url(../image/stair3.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(90% - 95px);
    left: calc(50% - 102.5px);
    transform: rotate(-30deg);
	background-position: 50% 45%;
	background-size: 200px auto;
	opacity: 0.5;
}
#stair3:after {
    display: block;
    content: "";
    width: 3px;
    height: 120px;
    background: #C8EFFA;
    position: absolute;
    top: -75px;
 	left: 130px;
	transform: rotate(50deg);
    z-index: -1;
    }
#stair4 {
	background:url(../image/stair4.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(30% - 95px);
    left: calc(80% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
}   
#stair4:hover {
	background:url(../image/stair4.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(30% - 95px);
    left: calc(80% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
	opacity: 0.5;
}
#stair4:after {
    display: block;
    content: "";
    width: 3px;
    height: 350px;
    background: #C8EFFA;
    position: absolute;
    top: -30px;
 	left: -50px;
	transform: rotate(70deg);
    z-index: -1;
    }
#stair5 {
	background:url(../image/stair5.png);
	width:200px; 
	height:190px;
    position: absolute;
    top: calc(15% - 95px);
    left: calc(50% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
} 
#stair5:hover {
	background:url(../image/stair5.png);
	width:200px; 
	height:190px;
    position: absolute;
    top: calc(15% - 95px);
    left: calc(50% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
	opacity: 0.5;
} 
#stair5:after {
    display: block;
    content: "";
    width: 3px;
    height: 100px;
    background: #C8EFFA;
    position: absolute;
    top: 140px;
 	left: 70px;
	transform: rotate(-10deg);
    z-index: -1;
    }
#stair6 {
	background:url(../image/stair6.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(80% - 95px);
    left: calc(80% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
} 
#stair6:hover {
	background:url(../image/stair6.png);
	width:200px; 
	height:200px;
    position: absolute;
    top: calc(80% - 95px);
    left: calc(80% - 102.5px);
	background-position: 50% 45%;
	background-size: 200px auto;
	opacity: 0.5;
} 
#stair6:after {
    display: block;
    content: "";
    width: 3px;
    height: 330px;
    background: #C8EFFA;
    position: absolute;
    top: -140px;
 	left: -80px;
	transform: rotate(-60deg);
    z-index: -1;
    }
@media (max-width: 600px) {


body {
			background:url(../image/background1.jpg) 100%;
			margin: auto;
        }
        
.mobile {
          display: block;
        }
        
#showweb {
	 	display: none;
}

.desktop {
          display: none;
        }