@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

/*General*/
html,body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  overflow-x: hidden;
}
body{
  font-family:arial;
}

a{
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

svg{
  vertical-align: middle;
  fill:currentColor;
}

svg.disabled{
  opacity:0.5;
}

h1{
  margin:0px;
  padding:0px;
  display:inline-block;
  vertical-align:middle;
  font-family: 'Press Start 2P', arial;
  word-spacing: -20px;
}

h2{
  margin:0px;
  font-size: 16pt;
}

.error{
	transition:border-color 0.5s ease;
	border:2px solid red;
}


/*Header*/
.header{
  height: 60px;
}

.header, .header a{
  color:#fff;
}

.header .level,.header .score,.header .moves,.header .endCondition{
  display:inline-block;
  font-weight:bold;
  margin-left:10px;
  font-size:14pt;
}

.header .moves{
/*display:none;*/
}

.header .hamburger{
  float:right;
}


/*Menu Screen*/
.menuScreen{
  display:none;
}

.menuScreen.display{
  display:inline-block;
}


/*Hamburger menu*/
.hamburgerMenu{
  display:none;
  background:#5151a0;
  color:#fff;
  width:206px;
  height:calc(100% - 10px);
  position:absolute;
  padding:5px;
  top:0px;
  right:0px;
  font-size:17pt;
  z-index:6;
}

.hamburgerMenu .closeHamburger{
  float:right;
}

.hamburgerMenu a{
  display:block;
  color:#fff;
}

.hamburgerMenu.display{
  display:inline-block;
}

.screenControl{
  height: calc(100% - 70px);
}

/*Screen*/
.screen{
  display:none;
  height:calc(100% - 0px);
  padding:0px 5px;
}

.screen.display{
  display:block;
}

/*Game*/
.game{
  padding:0px;
}

/*tip*/
.tip{
  background:#f6f6f6;
  color:#000;
  min-height:30px;
  width:250px;
  padding:3px;
  padding-bottom:42px;
  border-radius:5px;
  display:none;
  font-size:12pt;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 27% 76%, 10% 100%, 11% 76%, 0% 75%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 27% 76%, 10% 100%, 11% 76%, 0% 75%);
  transition:opacity 1s;
  position:absolute;
  top: 0px;
  left: 34px;
  z-index:5;
}

.tip.display{
  display:inline-block;
}

/*timer*/
.timer{
  height:6px;
  width:100%;
}

.timerBar{
  height:100%;
  width:0%;
  background-color:green;
  transition:width 0.5s, background-color 0.5s;
}

/*.timerBar.yellow{
  background-color:yellow;
}

.timerBar.red{
  background-color:red;
}*/

.board{
  height:calc(100% - 6px);
  display: inline-block;
  /*border:1px solid black;*/
}


/*Space*/
.space{
  display:inline-block;
  /*border:1px solid black;*/
  width:100px;
  height:100px;
  position:relative;
  vertical-align:top;
}

.space.highlighted{
  outline:2px dashed #30f030;
}

.space.selected, .space.highlighted.selected{
  outline:2px dashed #ffc107;
}


/*Token*/
.highlight{
  width:7px;
  height:8px;
  background:#fff;
  position:absolute;
  margin-top: 28px;
  margin-left: 35px;
  z-index:4;
  opacity:0.6;
  /*border-radius:50%;*/
}

.triangle ~ .highlight{
  margin-left:40px;
}

.star ~ .highlight{
  margin-top: 28px;
  margin-left: 43px;
}

.token{
  margin:10px;
  width:80px;
  height:80px;
  background:#000;
  display:inline-block;
  transition:border-radius 0.5s,background-color 0.5s,opacity 0.25s;
  position:absolute;
  opacity:1;
  z-index:3;
}

.shadow{
  width:80px;
  height:80px;
  background:rgba(0,0,0,0.5);
  display:inline-block;
  position:absolute;
  bottom:8px;
  right:8px;
  z-index:2;
  opacity:1;
}

.outline{
  width:90px;
  height:90px;
  background:#ffc107;
  display:inline-block;
  position:absolute;
  bottom:5px;
  right:5px;
  z-index:1;
  opacity:0;
  transition: opacity 0.5s;
}

.selected .outline{
    opacity:1;
}

/*Colors*/
.red{
  background:#ff0000;
}

.blue{
  background:#0000ff;
}

.green{
  background:#00ff00;
}

.orange{
  background:orange;
}

.purple{
  background:purple;
}

.yellow{
  background:yellow;
}

/*Shapes*/
.token.square{
}

.circle{
  border-radius:50%;
}

.triangle{
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pentagon{
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.rabbet{
  -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
  clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

.star{
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 2% 35%, 39% 35%);
}

/*Level Select*/
.levelSelect{
  /*text-align:center;*/
  font-size:16pt;
}

.levelSelect .levelSelection{
  display:inline-block;
  margin-left:10px;
  margin-top:10px;
  padding:5px;
  background:#c0c0c0;
  border-radius:5px;
  min-width:160px;
  min-height:30px;
  padding-top:15px;
  transition:background-color 0.5s;
  color:#000;
  vertical-align:top;
  font-weight:bold;
  border: 3px solid #333;
}

.levelSelect .levelSelection.selected{
  border: 3px solid #00dcff;
}

.levelSelect .levelSelection:hover{
  background:#fff;
}

.levelSelect .levelSelection.locked:hover{
  background:#c0c0c0;
}

.levelSelect .levelSelection.locked a:hover{
  text-decoration:none;
  cursor:default;
}

.levelSelection .levelLock{
  display:none;
}

.levelSelection.locked .levelLock{
  display:inline-block;
}

.endLevel .content{
  font-size:16pt;
}

.nextLevelLink, .retryLevelLink{
  background: #fff;
  padding: 7px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 5px;
  font-weight: bold;
  font-size:17pt;
}


/*About screen*/
.about .content{
  font-size:16pt;
}

.about .content a{
  color:#c0c0c0;
}

/*options screen*/
.options .playSpeedContainer, .options .musicVolumeContainer{
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;
  text-align:center;
}

.options .musicControl{
  display:inline-block;
}

.options .musicControl:hover{
  color:yellow;
}

.options .musicControl .mute{
  display:none;
}

.options .musicControl.disabled .mute{
  display:inline-block;
}

.options .musicControl.disabled .unmute{
  display:none;
}


.options .button{
  background-color:#c0c0c0;
  border-radius:5px;
  padding:5px;
  font-weight:bold;
  font-size:16pt;
  color:#000;
  transition:background-color 0.5s;
}

.options .apply{
  background-color:#333;
}

.options .apply.changes{
  background-color:#c0c0c0;
}

.noTransition{
  transition: none;
}

.editorControl{
  background:orange;
  display:inline-block;
  height:calc(100% - 6px);
  width:200px;
  vertical-align:top;
  color:#000;
  resize:horizontal;
  overflow:auto;
  font-size:15pt;
}

.editorControl a{
  color:#000;
}

.editorControl .control{
  margin:5px 5px;
}

.editorControl .control.inline{
  display:inline-block;
  margin:0px;
}


.editorControl .startBlocksList{
  height:150px;
  background:#fff;
  overflow:auto;
  resize:both;
}


.editorControl .startBlocksList .startBlock{
  width:30px;
  height:30px;
  margin:1px;
  display: inline-block;
}

.editorControl .shapeSelection{
  width: 30px;
  height: 30px;
  background: #000;
  margin:1px;
  display:inline-block;
}

.editorControl .colorSelection{
  width: 30px;
  height: 30px;
  margin:1px;
  display:inline-block;
}

@media screen and (max-width:425px){
  .header h1{
    display:none;
  }
}