body {
  background-color: #1f253a;
}

* {
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  border-spacing: 0;
  box-sizing: border-box;
}

.starting-box {
  padding-top: 30px;
  width:100%;
  border:0px solid white;
  text-align: center;
}

.img-start {
  width:180px;
  padding: 2px;
  border:1px solid white;
}

.change-grid {
  margin-top:-4px;
  height:70px;
  font-size:36px;
  /* width:100%; */
  cursor: pointer;
  background-color: #1f253a;
  color: white;
  letter-spacing: 4px;
  border:0px solid white;
}

.change-grid:hover {
  opacity: 0.8;
}

select {
  margin-top:20px;
  width:120px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transition: 0.5s;
  outline: none;
  overflow: hidden;
}

table {
  margin: 20px auto;
  background-color: white;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

tr {
  border-bottom: 1px solid #ccc;
  display: block;
}

tr:nth-of-type(3),
tr:nth-of-type(6) {
  border-bottom: 5px solid rgb(223, 223, 223);
}

td {
  border-right: 1px solid #ccc;
}

td:nth-of-type(3),
td:nth-of-type(6) {
  border-right: 5px solid rgb(207, 207, 207);
}

input {
  cursor: pointer;
  height: min(calc(100vh / 10), calc(100vw / 10));
  width: min(calc(100vh / 10), calc(100vw / 10));
  background-color: #efefef;
  -moz-appearance: textfield;
  font-size: min(7vh, 7vw);
  text-align: center;
  color: transparent;
  border: 16px solid white;
  border-radius: 100%;
}

/* input:focus {
  border: 1px solid red;
} */

input[readonly] {
  cursor: default;
  /* color: #ffffff; */
  color: transparent;
  border: 6px solid white;
  border-radius: 100%;
}

/* input[readonly]:focus {
  border: 0px solid transparent;
} */

input:invalid,
.invalid {
  border: 1px solid red;
  background-color: #eec3c3;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

button {
  display: block;
  margin: 1em auto 0;
  padding: .5em 2em;
  font-size: min(3vh, 3vw);
}

.sudoku-color-1 {
  background-color: #ad1457;
}

.sudoku-color-2 {
  background-color: #ee80a5;
}

.sudoku-color-3 {
  background-color: #283593;
}

.sudoku-color-4 {
  background-color: #9ccc65;
}

.sudoku-color-5 {
  background-color: #8fcefa;
}

.sudoku-color-6 {
  background-color: #8d6e63;
}

.sudoku-color-7 {
  background-color: #2e7d32;
}

.sudoku-color-8 {
  background-color: #ff6f00;
}

.sudoku-color-9 {
  background-color: #fbc02d;
}

/* Modal */
.modal {
  /* background: #FFF; */
  width: 100%;
  height: 100px;
  text-align: center;
  /* box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); */
  position: fixed;
  top: 0%;
  line-height: 25px;
  z-index: 99;
}

@media all and (min-width: 700px) {
  .modal {
    /* border-left: 100px solid transparent; */
    /* border-right: 100px solid transparent; */
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 2%;
  }
}

@media all and (min-width: 1000px) {
  .modal {
    padding-left: 30%;
    padding-right: 30%;
    padding-top: 8%;
  }
}

.modal a {
  line-height: 1em;
}

.modal-bg {
  background: #1f253a;
  zoom: 1;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

.colors-box {
  display: flex;
  flex-flow: row wrap;
  padding-bottom:20px;
  padding-left:20%;
  padding-right: 20%;
  background-color: #1f253a7a;
  border-radius:20px;
  /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); */
  
}

.colors-box button {
  cursor: pointer;
  width: 33.3%;
  padding: 20px;
  color: transparent;
  border: 1px solid #1f253a;
  /* border-radius: 2px; */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.colors-box button:hover {
  opacity: 0.4;
  transition: 0.3s;
}

#choose-color-1 {
  background-color: #ad1457;
}

#choose-color-2 {
  background-color: #ee80a5;
}

#choose-color-3 {
  background-color: #283593;
}

#choose-color-4 {
  background-color: #9ccc65;
}

#choose-color-5 {
  background-color: #8fcefa;
}

#choose-color-6 {
  background-color: #8d6e63;
}

#choose-color-7 {
  background-color: #2e7d32;
}

#choose-color-8 {
  background-color: #ff6f00;
}

#choose-color-9 {
  background-color: #fbc02d;
}

#no-color {
  background-color: #dadada;
}