body {
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow:auto;
  height: 100%; 
}

header {
  background-color: rgb(0, 128, 128);
  width: 100%;
  height: 8%;
  text-align: center;
}

h1 {
  width: 100%;
  position: center;
  margin: 0 auto;
  color: #fff;
  font-size: 1.8em;
  line-height: 2.4em;
  text-align: center;
}
.nav{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
.nav li {
  display: inline-block;
}

.nav a{
color: #fff;
display: inline-block;
padding: 0.5em 0.75em;
background-color: rgba(30, 66, 67, 0.922);
border-radius: 4px;
text-decoration: none;
}
.nav a:hover{
  background-color: #000;
}
.nav .current {
  background-color: rgba(255, 0, 0, 0.703);
}
.nav {
  display: inline-block;
}



.blockly-editor {
  position: absolute;
  top: 130px;
  left: 42%;
  transition: left 1s;
  height: 98%;
  width: 95%;
  background-color:white;
}

#grid-elements {
  top: 90px;
  left: 31%;
  position: absolute;
  height: 88%;
  width: 10.2%;
  background-color: rgb(239, 252, 239);
  box-shadow:  3px 3px 4px rgba(145, 138, 138, 0.6),
               -3px -3px 4px rgba(44, 44, 44, 0.6);
  background-size: cover;
  display:inline-block;
  
}

#el-category {
  position: relative;
  height: 2.2%;
  width: 100%;
  text-align: center;
  background-color: rgb(23, 75, 26);
  box-shadow: inset 3px 3px 4px rgba(36, 35, 35, 0.6),
              inset -3px -3px 4px rgba(44, 44, 44, 0.6);
  background-size: cover;
display:inline-block;
color: rgb(248, 240, 240);
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0em;
  text-align: center;
 
}



.accessible-enable {
  position: absolute;
  top: 85px;
  left: 42%;
  transition: left 1s;
  height: 100px;
  width: 95%;
  background: white;
  font-size: 0.8em;
}


/* Create a custom checkbox */
.checkmark {
  height: 20px;
  width: 20px;
  background-color: #eee;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  display: none;
}


input[type="range"] {
  top: 80%;
  width: 100px;
}

label {
  display: inline-block;
  margin: 0em;
  width: 40px;
}

.option1 {
  margin: .5em;
  font-size: 0.8rem;
}

button{
  
  display: inline-block;
  border-radius: 2px;
  border: none;
  font-size: 0.9em;
  width: 100px;
  line-height: 1.6em;
  padding: 0 20px;;
  background: rgb(252, 249, 249);
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
 
  color: rgb(54, 52, 52);
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0em;
  text-align: center;
}

button:hover, butt:focus {
  opacity: 0.75;
  cursor: pointer;
  background-color:  rgb(39, 39, 39);
}

button:active {
  opacity: 1;
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}

#buttonlabel {
  top: 60%;
  width: 30%;
  position: relative;
}

.styled {
  display: inline-block;
  border: none;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: .1em;
  border-radius: 5px;
  background-color:  rgb(59, 59, 59);
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
  opacity: 0.75;
  background-color: rgb(39, 39, 39);
  cursor: pointer;
}

.styled:active {
  opacity: 1;
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}


#maze_container {
  top: 10px;
  left: 5px;
  position: relative;
  display: inline-block;
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.25);*/
}

#maze {
  background-color: rgb(73, 202, 94);
  background-image: radial-gradient(circle at 0% 0%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at center, rgba(0,0,0,0.1) 50%, transparent 50%), radial-gradient(circle at 100% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at 0% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at 100% 0%, transparent 50%, rgba(0,0,0,0.1) 50%);
  background-size: 8em 8em;

}
#maze div {
  display: flex;
}
#maze div div {
  position: relative;
  /*grid size*/
  width: 2.4em;
  height: 2.4em;
}
#maze div div::after {
  position: absolute;
  left: 15px;
  top: 20%;
  text-align: center;
  text-shadow: 0 0 1px black;
  font-size: 1.2em;
  z-index: 10;
}

.width {
  width: 100%;
}

#maze div.hero::after {
  content: url(hero1.png) !important;
  transform: scale(-1, 1);
}
#maze.face-left div.hero::after {
  transform: scale(1, 1);
}
#maze div div.wall, #maze div div.door.exit {
  background-color: #053f27;
  background-size: 0.5em 0.5em;
}


#maze div div:nth-child(odd) {
  width: 2.4em;
}
#maze div:nth-child(odd) div {
  height: 2.4em;
}

div.apple::after {
  
  content: url(apple.png);
  font-size: 1.3em;

}

div.water::after {
  content: url(water1.png);
  font-size: 1.3em;
  
}
div.fire::after {
  content: url(fire.png);
  font-size: 1.3em;
}
div.elephant::after {
  content: url(elephant.png);
  font-size: 1.3em;
}
div.castle::after {
  content: url(castle.png);
  font-size: 1.3em;
}
div.dollar::after {
  content: url(dollar.png);
  font-size: 1.3em;
}
div.grapes::after {
  content: url(grapes.png);
  font-size: 1.3em;
}
div.flower::after {
  content: url(flower.png);
  font-size: 1.3em;
}
div.candy::after {
  content: url(candy.png);
  font-size: 1.3em;
}
div.tiger::after {
  content: url(tiger.png);
  font-size: 1.3em;
}
div.ghost::after {
  content: url(ghost.png);
  font-size: 1.3em;
}
div.dinosaur::after {
  content: url(dinosaur.png);
  font-size: 1.3em;
}
div.house::after {
  content: url(house1.png);
  font-size: 1.3em;
}
div.trophy::after {
  content: url(trophy.png);
  font-size: 1.3em;
}
div.flag::after {
  content: url(flag.png);
  font-size: 1.3em;
}
div.gift::after {
  content: url(gift.png);
  font-size: 1.3em;
}
div.skull::after {
  content: url(skull.png);
  font-size: 1.3em;
}
div.tree::after {
  content: url(tree.png);
  font-size: 1.3em;
}
div.pizza::after {
  content: url(pizza.png);
  font-size: 1.3em;
}
div.cat::after {
  content: url(cat.png);
  font-size: 1.3em;
}
div.petstore::after {
  content: url(petstore.png);
  font-size: 1.3em;
}
div.fish::after {
  content: url(fish.png);
  font-size: 1.3em;
}
div.school::after {
  content: url(school.png);
  font-size: 1.3em;
}

#maze_output {
  background-color: white;
  height: 10px;
  display: flex;
  margin: 0 auto;
  
}
#maze_score, #maze_message {
  position: relative;
  font-family: fantasy;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}
#maze_score {
  flex: 1;
  text-align: left;
}
/*
#maze_score::before {
  content: "Score: ";
}
*/
#maze_score.has-key::after {
  content: "\00a0\1F511";
}
#maze_message {
  flex: 3;
  text-align: right;
}

#maze.finished::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  content: "Game Over";
  line-height: 480px;
  text-align: center;
  text-transform: uppercase;
  font-family: monospace;
  font-size: 5em;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
  color: #fff;
  z-index: 10;
}


#maze-grid{
	border-collapse: collapse;
	margin: 10px;
  margin-left: 10px;
}

#cell11, #cell12, #cell13, #cell14, #cell15, #cell21, #cell22, #cell23, #cell24, #cell25, #cell31, #cell32, #cell33, #cell34, #cell35, #cell41, #cell42, #cell43, #cell44, #cell45, #cell51, #cell52, #cell53, #cell54, #cell55{
	border: 0px solid black;
	width: 60px;
	height: 50px;
  font-size: 3em;
  background-color: rgb(73, 202, 94);
  background-image: radial-gradient(circle at 0% 0%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at center, rgba(0,0,0,0.1) 50%, transparent 50%), radial-gradient(circle at 100% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at 0% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at 100% 0%, transparent 50%, rgba(0,0,0,0.1) 50%);
  background-image: url(bg.jpg);
  box-shadow: inset 3px 3px 4px rgba(255, 255, 255, .6),
              inset -3px -3px 4px rgba(0, 0, 0, .6);
  
  background-size: cover;
  display:inline-block;
}