gameplay.css

#start{
  position : fixed;
  width : 100%;
  top : 48%;
  text-align: center;
  color : white;
  font-size : 28px;
  text-shadow : 0 0 10px white;
}

#cursor{
  font-weight: bold;
  position : fixed;
  top : 49%;
  left : 49%;
  color : white;
  z-index : 10;
  font-size : 36px;
  text-shadow : 0 0 3px white;
}

#mana-container{
    position: fixed;
    bottom: 15px;
    left : 20%;
    height: 15px;
    width : 60%;
    border : solid 3px #cccccc;
    border-radius: 5px;
    background-color: rgba(72, 140, 249, 0.3)
    /*overflow : hidden; */
}

#mana-bar{
    position: relative;
    width : 100%;
    height: 100%;
    background-color: rgb(72, 140, 249);
    
}

#start-text, #end-text{
  position: fixed;
  font-size : 28px;
  text-shadow : 0 0 10px white;
  padding : 8px;
  top : 40%;
  width : 100%;
  text-align: center;
  z-index: 10;
  color : white;
}

#sky-view{
  position: fixed;
  top : 0;
  right : 0;
  width : 200px;
  height: 200px;
  border : solid white 2px;
}

#goal-img{
  position: fixed;
  top : 200px;
  right : 0;
  width : 200px;
  height: 200px;
  border : solid white 2px;
  overflow: hidden;
}

#goal-img img{
  position: relative;
  top : -3px;
  left : -3px;
  width : 206px;
  height: 206px;
}

#level-title{
  position: fixed;
  padding: 10px;
  color : white;
  font-size : 20px;
  text-shadow : 0 0 3px white;
}

#controls{
  position: fixed;
  top : 60%;
  width: 100%;
  text-align : center;
  color : white;
  font-size : 20px;
  text-shadow : 0 0 1px white;
}

#retry, #selection{
  position: fixed;
  left : 10px;
  color : white;
  font-size : 18px;
  text-shadow : 0 0 3px white;
}

#selection{
  bottom : 5px;
}

#retry{
  bottom: 35px;
  z-index: 10;
}

#mana-tuto{
  position: fixed;
  width: 100%;
  text-align : center;
  bottom : 60px;
  color : white;
  font-size : 18px;
  text-shadow : 0 0 3px white;
}

.goal-tuto div{
  position: fixed;
  right : 220px;
  color : white;
  font-size : 18px;
  text-shadow : 0 0 3px white;
}

.goal-tuto #target{
  top : 290px;
}

.goal-tuto #topdown{
  top : 90px;
}

#rotations{
  position: fixed;
  width: 55px;
  top : 40%;
  font-size : 26px;
  text-shadow : 0 0 2px white;
  background-color : rgba(255, 255, 255, 0.2);
  border-radius : 0 5px 5px 0;
}

#rotations span{
  display: block;
  margin-left : 10px;
}

#rotation-help{
  position: fixed;
  width : 500px;
  top : 40%;
  font-size : 26px;
  text-shadow : 0 0 2px white;
  color : white;
}

#rotation-help div{
  position: absolute;
}

#r1{ left : 60px; }
#r2{ top : 30px; left : 60px; }
#r3{ top : 60px; left : 60px; }

#rotation-control{
  top : 100px;
  left : 10px;
}