/* body{
  font-family: Avenir, Heveltica, sans-serif;
}
li:nth-child(n):nth-child(-n+9) {
  border-top-width: 4px;
}
li:nth-child(n+73):nth-child(-n+81) {
  border-bottom-width: 4px;
}
li:nth-child(3n) {
  border-right-width: 4px;
}
li:nth-child(9n+1) {
  border-left-width: 4px;
}
li:nth-child(n+19):nth-child(-n+27) {
  border-bottom-width: 4px;
}
li:nth-child(n+46):nth-child(-n+54) {
  border-bottom-width: 4px;
}

ul {
  display: grid;
  grid-template-columns: repeat(9, 4vw);
  grid-template-rows: repeat(9, 4vw);
  justify-content: center;
  align-content: center;
  grid-gap: 0rem;
  list-style: none;
  margin: 0 0 2vw;
  padding: 0;
  font-size: calc(2vw + 10px);
  margin-top: 10%;
  margin-left: 10%;
}
.sudoku {
  margin: 0;
  padding: 0;
  text-align: center;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-top: 0.4rem;
  }  
}

.note {
  background: #ddd;
  font-family: monospace;
  padding: 2em 5em;
  font-size: 120%;
  order: -1;
}
@supports (display:grid) {
  .note {display:none;}
}

#newbtn {
  background-color: blue;
  border-radius: 10px;
  padding: 10px;
  font-size: large;
  position: absolute;
  margin-top: -2.2%;
  margin-left: -14.5%;

}

#checkbtn {
  background-color: green;
  border-radius: 10px;
  padding: 10px;
  font-size: large;
  position: absolute;
  margin-top: -1%;
  margin-left: -9%;
}
.numpad{
  margin-top: 50%;
}
.numpadknopr1{
  padding: 20px;
  border-radius: 20%;
}
.numpadknopr2{
  padding: 20px;
  margin-top: 1%;
  border-radius: 20%;

}
.numpadknopr3{
  padding: 20px;
  margin-top: 1%;
  border-radius: 20%;
} */



body{
  font-family: Avenir, Heveltica, sans-serif;
}
li:nth-child(n):nth-child(-n+9) {
  border-top-width: 4px;
}
li:nth-child(n+73):nth-child(-n+81) {
  border-bottom-width: 4px;
}
li:nth-child(3n) {
  border-right-width: 4px;
}
li:nth-child(9n+1) {
  border-left-width: 4px;
}
li:nth-child(n+19):nth-child(-n+27) {
  border-bottom-width: 4px;
}
li:nth-child(n+46):nth-child(-n+54) {
  border-bottom-width: 4px;
}

ul {
  display: grid;
  grid-template-columns: repeat(9, 5vw);
  grid-template-rows: repeat(9, 5vw);
  justify-content: center;
  align-content: center;
  grid-gap: 0rem;
  list-style: none;
  margin: 0 0 2vw;
  padding: 0;
  font-size: calc(2vw + 10px);
}
li {
  margin: 0;
  padding: 0;
  text-align: center;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-top: 0.4rem;
  }  
}

.note {
  background: #ddd;
  font-family: monospace;
  padding: 2em 5em;
  font-size: 120%;
  order: -1;
}
@supports (display:grid) {
  .note {display:none;}
}
.form-control {
  font-size: 52px;
}