@font-face {
    font-family: Montserrat;
    src: url(assets/fonts/Montserrat-Regular.ttf);
}
body {
	font-family: Montserrat, "Montserrat", sans-serif;
    font-size: 13px;
    width: 100vw;
    height: 100vh;
    margin: 0px;
}

.row{
    width: 100%;
}

.row .space{
    width: 100%;
    height: 10%;
}

#key{
  background-color: white;
  text-align: center;
  /* width: 92%; */
  /* height: 98%; */
  /* margin: auto; */
  /* margin-top:1%;  */
  border-style: solid;
  border-color: red;;
  border-radius: 15px;

}

#status-text{
  background-color: red;
  text-align: center;
  /* width: 92%; */
  /* height: 98%; */
  /* margin: auto; */
  /* margin-top:1%;  */
  border-style: solid;
  border-color: red;;
  border-radius: 15px;
  color: white;
  font-size: 2em;
  padding: 5px;
}

#key .icon-text{
    padding: 10%;
    margin: 5px;
}

#key .icon-text img{
    background-color: red;
    border-radius: 5px;
    pointer-events: none;

}

#status{
    width: 100%;
    /* height: 50vh; */
    float: left;
    margin: 10px 0px;
}

#left{
    width: 50%;
    /* height: 50vh; */
    float: left;
    margin: 10px 0px;
}

#right{
    width: 50%;
    /* height: 50vh; */
    float: left;
    margin: 10px 0px;
}

#up{
    /* background-color: green; */
    width: 100%;
    /* height: 50vh; */
    float: left;
    margin: 10px 0px;
}

#down{
    /* background-color: green; */
    width: 100%;
    /* height: 50vh; */
    float: left;
    margin: 10px 0px;
}

#reset{
    /* background-color: green; */
    width: 50%;
    /* height: 50vh; */
    margin-top: 25%;
    float: left;
    margin: 10px 0px;
}

#start{
    background-color: green;
    width: 100%;
    height: 30px;
    float: left;
}

.code-field{
    width: 100%;
    text-align: center;
    padding: 5px;
}

.code-input-overlay{
    width: 100vw;
    height: 100vh;
    background-color: rgba(136, 136, 136, 0.49);
    position: absolute;
}

.code-input{
    /* position: absolute; */
    background: white;
    color: red;
    
    /* width: 100%; */
    padding: 20px;
    padding-top: 20vh;
    text-align: center;
}

.btn-start span{
    padding: 15px;
    border-style: solid;
    border-radius: 5px;
}

#code-field{
    padding: 5px;
    font-size: 2em;
    text-align: center;
    width: 50%;
    border-radius: 5px;
    border-color: red;
    border-style: solid;
}

.code-input .text{
    font-size: 1.5em;
}

@media only screen and (max-width: 700px) {
    .show-on-mobile {
      display: inline-block;
    }
    .show-on-desktop {
      display: none;
    }
  }

@media only screen and (min-width: 700px) {
    .show-on-mobile {
      display: none;
    }
    .show-on-desktop {
        display: inline-block;
      }
  }