/*--------------------------------------------------------------------------------------------4 PHONES */
@media only screen and (max-width: 699px){
      html{
      
    }
    
    body{
    color: gray;
    text-align: center;
    }
    
    #splorer{
      position: relative;
      top: 500px;
      z-index: 10;
      margin: auto;
      transform: rotate(90deg);
    }
    
    .dragscroll{
      cursor: grab; cursor : -o-grab; cursor : -moz-grab; cursor : -webkit-grab;
      margin: 100px auto 130px auto;
      background-color: white;
      max-height: 700px;
      max-width: 80%;
      border: 20px solid #4e4e4e;
      border-image: url('/stuffs/border1.png') 150 round;
      overflow: scroll;
      color: gray;
      font-family: Calibri;
      padding: 10px;
      text-align: center;
    }
}

/*------------------------------------------------------------------------------------------4 DESKTOP */
@media only screen and (min-width: 700px){

h1{
  color:black;
}

#intro{
  background-color: white;
  margin: auto;
  width: 40%;
  border: 20px solid #4e4e4e;
  border-image: url('/stuffs/border1.png') 150 round;
  box-shadow: 1px 1px 10px blue, 1px 1px 5px darkblue;
}

.map1{
 margin-top: -210px; 
}

.box20{
  position: relative;
top: -220px;
left: 600px;
}

.box19{
      position: relative;
    top: 5024px;
    left: 1198px;
}

.box18{
  position: relative;
top: 5905px;
left: 391px;
}

.box17{
      position: relative;
    top: 6993px;
    right: 241px;
}

.box16{
  position: relative;
top: 7364px;
left: 3568px;
}

.box15{
  position: relative;
top: 6805px;
left: 1604px;
}

.box14{
  position: relative;
top: 6252px;
left: 2424px;
}

.box13{
  position: relative;
top: 7558px;
left: 921px;
}

    .box12{
          position: relative;
    top: 7374px;
    left: 2344px;
    }
    
    .box11{
          position: relative;
 left: 447px;
top: 2891px;
    }
    
    .box10{
      position: relative;
top: 4100px;
left: 700px;
    }
    
    .box9{
position: relative;
top: 2399px;
right: 300px;
    }
    
    .box8{
      position: relative;
top: 3210px;
left: 2231px;
    }
    
    .box7{
      position: relative;
top: 4799px;
right: 186px;
    }
    
    .box6{
position: relative;
top: 4365px;
left: 2797px;
    }
    
    .box5{
      position: relative;
left: 3062px;
top: 971px;
    }
    
    .box4{
      position: relative;
top: 136px;
left: 1812px;
    }
    
    .box3{
      position: relative;
top: 1020px;
right: 174px;
    }
    
    .box2{
      position: relative;
      left: 964px;
top: 1045px;
    }

    
    html{
      
    }
    
    body{
    color: gray;
    text-align: center;
    background-image: url('/imgz/mbws/sisymbol2.gif');
    font-family: sans-serif;
    }
    
    #splorer{
      display: none;
    }
    
    .dragscroll{
      cursor: url("/imgz/mbws/Bug.gif"), default;
      margin: 50px auto 300px auto;
      background-color: white;
      max-height: 600px;
      max-width: 60%;
      border: 20px solid #4e4e4e;
      border-image: url('/stuffs/border1.png') 150 round;
      box-shadow: 1px 1px 10px blue, 1px 1px 5px darkblue;
      overflow: scroll;
      color: black;
      font-family: Calibri;
      padding: 10px;
      text-align: center;
      scroll-behavior: smooth;
    }
    
    .story {
  width: 60%;
  margin: auto 18% 150px 18%;
  text-align: left;
  padding: 30px;
  border: 20px solid #4e4e4e;
  border-image: url('/stuffs/border1.png') 150 round;
  box-shadow: 1px 1px 10px blue, 1px 1px 5px darkblue;
  color: black;
  background-color: white;
}

.story > div{
  display: inline;
  color: #9d50b8;
  font-weight: bold;
}
.story >h2{text-align: center;}

#share{
  width: 30%;
  margin: auto auto 130px auto;
  padding: 30px;
  border: 20px solid #4e4e4e;
  border-image: url('/stuffs/border1.png') 150 round;
  box-shadow: 1px 1px 10px blue, 1px 1px 5px darkblue;
  color: black;
  background-color: white;
}

.fount{
 position: relative;
 left: 3250px;
bottom: 740px;
height: 80px;
}

.submit:hover{
  box-shadow: 1px 1px 2px black, 0 0 25px yellow, 0 0 5px darkblue;
}
.submit{
  display: block;
 margin: auto;
 text-align: center;
}

.evil{
  position: relative;
left: 3310px;
bottom: 130px;

}
.evil:hover{box-shadow: 1px 1px 2px black, 0 0 15px red, 0 0 5px darkblue;}


}