body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* full viewport height */
  margin: 0;
  background: linear-gradient(55deg,rgba(161, 235, 255, 1) 0%, rgba(0, 120, 194, 1) 100%);
}

h1 {
  font-size: 2.5rem !important;
}

.outerlayer {
  margin: 20px;
  margin-bottom: 120px;
}

input {
  all: unset;
  width: 30px;
  height: 30px;
  display: inline;
  border: none;
}

input:focus {
  all: unset;
  width: 30px;
  height: 30px;
}

table {
  margin:1em auto;
}

td {
  height:30px;
  width:30px;
  border: 1px solid #909090;
  text-align:center;
}

td:first-child {
  border-left: solid;
}
td:nth-child(3n) {
  border-right: solid;
}
tr:first-child {
  border-top: solid;
}
tr:nth-child(3n) td {
  border-bottom: solid;
}

.bg-custom-gray, input.bg-custom-gray:focus {
  color: #4a6472;
}

.bg-incorrect, input.bg-incorrect:focus  {
  color: #ff0000;
}

.container-custom {
  padding: 15px;
  margin: 20px auto;
}

.sudoku-container {
  width: 450px;
  margin: 0 auto;
}

.setup-container {
  width: 450px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  text-align: center;
  z-index: 1000;
}

.fixed-top-left {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

#sudoku {
  width: 450px;
  margin: 0 auto;
}

#sudoku td {
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

#sudoku input {
  width: 100%;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  background: transparent;
  outline: none;
}

#light-grey {
  background-color: #eeeeee;
}
    
@media (max-width: 480px) {
  #sudoku {
    width: 315px;
  }
  
  #sudoku td {
    width: 35px;
    height: 35px;
  }
  
  #sudoku input {
    font-size: 16px;
  }
  
  .sudoku-container,
  .setup-container {
    width: 315px;
  }
  
  h1 {
    font-size: 2rem !important;
  }
}