* {
    font-family: Monospace;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
main{
  background-color: rgb(22, 19, 19);
  display: flex;
  align-items: center;
  justify-content: center;


}

.glass{
  width: 95%;
  background: rgb(231, 231, 231);
  border-radius: 0.3rem;
  backdrop-filter: blur(2rem);
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  padding-top: 1.5%;
  margin: 0.1rem;
  
}

.wrapper{
  min-height: 10vh;
  max-height: 98vh;
  width: 95%;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wrapper h1{
  font-size: 2vw;
}

.container {
  
  min-height: 75vh;
  width: 90vw;
  display: flex;
  

  align-items: center;
  justify-content: center;
  border-radius: 0.1rem;
  border:solid rgb(22, 19, 19);

}

.container .canvas-container {

  display: flex;
  align-items: center;
  justify-content: center;
  
}

.container  #canvs-in{
  min-height: 77vh;
  min-width: 92vw;
  max-width: 92vw;
  max-height: 77vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.control-area {
  border:solid rgb(22, 19, 19);
  height: 7vh;
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.2rem;
  margin-bottom: 0.1rem;
}

.info{
  margin-bottom: 0.5rem;
  margin-top: 0.1rem;
  font-size: 2vw;
  padding-right: 1rem;
  padding-left: 1rem;
}
.control-area .start-button-area{
  display: flex;
  height: 5vh;
  width: 50vw;
  justify-content: center;
  justify-items: center;
  position: relative;
  font-weight: bold;
  margin-bottom: 0.2rem;
}
.start-button{
  display: flex;
  height: 5vh;
  width: 10vw;
  justify-content: center;
  justify-items: center;
  font-weight: bold;
  font-size: 2.2vw;
  border-radius: 0.1rem;
  margin: 0.1rem;
  text-align-last: center;
  border: solid rgb(22, 19, 19);;
  background: none;
  padding-top: 0.4rem;
  border-width: revert;
}

.control-area .rules {
  display: flex;
  flex-direction: column;
  min-height: 1hv;
  width: 30vw;
  justify-content: center;
  justify-items: center;
  position: relative;
}

.inctext{
  font-weight:600;
  font-size: 1.3vw;
  margin: 0.9vw;
  border: double rgba(51, 51, 51, 0.5);
  padding: 0.1rem;
  text-align-last: left;
}

.control-area .rules .value-button{
  display: flex;
  min-height: 1vh;
  width: 4vw;
  justify-content: center;
  justify-items: center;
  font-size: 1.2vw;
  font-weight: 900;
}

.control-area .rules .numbers{
  display: flex;
  min-height: 1vh;
  width: 4vw;
  justify-content: center;
  justify-items: center;
  text-align-last: center;
  background: none;
  font-size: 1.2vw;
  font-weight: 900;
}

  
.control-area .rules .value-button {

}
  
.control-area .rules .value-button:hover {

}
  
.rules #decrease {
  border: solid rgb(22, 19, 19);
  background: none;
  border-width: thin;
  }
  
.rules #increase {
  border: solid rgb(22, 19, 19);
  background: none;
  border-width: thin;
  }
  
.rules #input-wrap {


  }
  
  input#numberOver  {


  }
  
  input#numberUnder  {

    
  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }