@import url("https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&family=Quicksand:wght@300..700&display=swap");

:root {
  /* body font override */
  --bs-font-sans-serif: "Quicksand", Roboto, sans-serif;

  /* make page responsive for any screen */
  font-size: min(calc(100vw / 29), calc(100vh / 42));
}

#header {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;

  background-color: var(--bs-gray-200);
}

#header h1 {
  font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.5rem;
  text-transform: uppercase;
  padding: 0.25rem 3rem 0.25rem 0;
  margin: 0;
}

.icon {
  width: 2rem;
  height: auto;
}

#footer {
  height: 2rem;
  padding-bottom: 1rem;
}

#footer a {
  color: var(--bs-gray-800);
  text-decoration: none;
}

#controls {
  width: 27rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem auto;
}

#mode {
  display: inline-flex;
  width: 13.5rem;
}

#errors {
  width: 5rem;
  margin: 0;
}

#errors-counter {
  color: var(--bs-red);
  font-weight: 600;
}

.button {
  width: 5rem;
  height: 2rem;

  border: 1px solid var(--bs-gray-600);
  background-color: inherit;
}

.help-button {
  width: 2rem;
}

#board {
  width: 27rem;
  display: grid;
  grid-template-columns: repeat(9, 3rem);
  grid-template-rows: repeat(9, 3rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

#number-inputs {
  width: 27rem;
  height: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 1rem auto;
}

.alert {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;

  background-color: rgba(var(--bs-light-rgb), 0.7);
}

.alert-container {
  width: 27rem;
  padding: 1rem;

  background-color: var(--bs-white);
  border: 1px solid var(--bs-gray-600);
}

.alert-buttons-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.alert p {
  margin: 0;
}

#help ol {
  text-align: left;
}

ol>li::marker {
  font-weight: 600;
}

ul {
  list-style-type: square;
}

strong {
  font-weight: 600;
}

.hidden {
  display: none;
}

.mode-label {
  width: 5rem;
  height: 2rem;

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

  cursor: pointer;

  border: 1px solid var(--bs-gray-600);
  border-right: none;
}

/* fixing double border in mode selector */
.mode-selector>label:last-child {
  border-right: 1px solid var(--bs-gray-600);
}

.mode-selector input:checked+.mode-label {
  background-color: var(--bs-gray-300);
}

.mode-selector input {
  display: none;
}

.tile {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--bs-gray-400);

  font-size: 1.25rem;
  font-weight: 500;
}

.tile-highlight {
  background: linear-gradient(rgba(var(--bs-success-rgb), 0.1), rgba(var(--bs-success-rgb), 0.1));
  mix-blend-mode: multiply;
  /* semi-transparent black */
}

.tile-selected {
  background-color: rgba(var(--bs-success-rgb), 0.3);
}

.tile-prefilled {
  background-color: var(--bs-gray-200);
  mix-blend-mode: multiply;
}

.sector-edge-horizontal {
  border-bottom: 1px solid var(--bs-gray-800);
}

.sector-edge-vertical {
  border-right: 1px solid var(--bs-gray-800);
}

.number-input {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  border: 1px solid var(--bs-gray-700);

  font-size: 1.25rem;
  font-weight: 500;
}

#number-inputs>div:hover {
  background-color: var(--bs-gray-200);
}

.incorrect-number {
  color: var(--bs-red);
}

.correct-number {
  color: var(--bs-info-text-emphasis);
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  text-align: center;
}