body {
  font-family: Arial, sans-serif;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100vh;
  margin: 0;
  background-color: #fff;
  color: #000;
}
.logo {
  background-image: url("/images/logo.png");
  background-size: contain;
  cursor: pointer;
  margin-bottom: 10px;
  height: 200px;
  width: 200px;
}
.title {
  color: #000000;
  font-family: 'Nunito', sans-serif;
  font-size: 48px;
  font-weight: 400;
  font-style: normal;
}
.subtitle {
  color: #555555;
  font-family: 'Exo';
  font-size: 16px;
}
#full_size {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  text-align: center;
  width: 100%;
}
.g {
  border-collapse:collapse;
  border-spacing:0;
  border:3px solid #000;
}
.rb {
  border-bottom:3px solid #000;
}
.c, .cb {
  background-color: #fff;
  width:22px;
  height:22px;
  text-align: center;
  border:1px solid #000;
  font-size: 18px;
}
.cb {
  border-right:3px solid #000;
}
input[type=text],input[type=number] {
  padding: 4px 4px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-size: 16px;
  line-height: 16px;
}
input[type=text]:focus {
  border: 3px solid #555;
}
input[type=number]:focus {
  border: 3px solid #555;
}
input[type=button], input[type=submit], input[type=reset] {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
select {
  padding: 4px 4px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-size: 16px;
  line-height: 16px;
}
.form_field {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
}
.book_title {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
}
.page_and_id {
  color: #555;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
}
.sudoku-container {
  display: inline-block;
  margin-bottom: 5px;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

td {
  background-color: #eee;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #000;
  font-size: 20px;
}

td input {
  background-color: #fff;
  color: #000;
  width: 90%;
  height: 90%;
  text-align: center;
  border: none;
  font-size: 20px;
  font-weight: bold;
}

td input:focus {
  outline: none;
}

.block-border-right {
  border-right: 2px solid #000;
}

.block-border-bottom {
  border-bottom: 2px solid #000;
}

.block-border-left {
  border-left: 2px solid #000;
}

.block-border-top {
  border-top: 2px solid #000;
}

.outer-border-right {
  border-right: 3px solid #000;
}

.outer-border-bottom {
  border-bottom: 3px solid #000;
}

.outer-border-left {
  border-left: 3px solid #000;
}

.outer-border-top {
  border-top: 3px solid #000;
}

.invalid {
  background-color: #ffb3ba;
}

.conflict, .conflict input {
  background-color: #bae1ff;
}

.completed {
  background-color: #9fdc9f;
}

.links a {
  color: #000;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  margin: 20px 5px 0px 5px;
}

.level {
  color: #000;
  font-family: 'Nunito', sans-serif;
  font-size: 23px;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 5px;
}

.level .beginner {
  color: #ebcf55;
}

.level .intermediate {
  color: #559beb;
}

.level .expert {
  color: #da4348;
}

.level .master {
  color: #555555;
}

.level a {
  color: #555;
}

.date {
  color: #555;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
  .logo {
    background-image: url("/images/logo_dark.png");
  }
  .title {
    color: white;
  }
  .subtitle {
    color: #aaa;
  }
  .g {
    border:3px solid white;
  }
  .rb {
    border-bottom:3px solid white;
  }
  .c, .cb {
    background-color: #000;
    border:1px solid white;
  }
  .cb {
    border-right:3px solid white;
  }
  input[type=text]:focus {
    border: 3px solid #aaa;
  }
  input[type=number]:focus {
    border: 3px solid #aaa;
  }
  .page_and_id {
    color: #aaa;
  }
  td {
    background-color: #555;
    border: 1px solid #fff;
  }
  td input {
      background-color: #000;
      color: #fff;
  }
  .block-border-right {
      border-right: 2px solid #fff;
  }

  .block-border-bottom {
      border-bottom: 2px solid #fff;
  }

  .block-border-left {
      border-left: 2px solid #fff;
  }

  .block-border-top {
      border-top: 2px solid #fff;
  }

  .outer-border-right {
      border-right: 3px solid #fff;
  }

  .outer-border-bottom {
      border-bottom: 3px solid #fff;
  }

  .outer-border-left {
      border-left: 3px solid #fff;
  }

  .outer-border-top {
      border-top: 3px solid #fff;
  }

  .invalid {
      background-color: #a2212e;
  }

  .conflict, .conflict input {
      background-color: #2974ae;
  }
  .completed {
      background-color: #258625;
  }
  .links a {
    color: #fff;
  }
  .level {
    color: #fff;
  }
  .level a {
    color: #aaa;
  }
  .date {
    color: #aaa;
  }
}