:root {
  --white: #ffffff;
  --blue: #0055ff;
  --dark-blue: #003091;
  --green: #19803d;
  --yellow: #f6af3c;
  --red: #df2706;
}

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  src: url("fonts/poppins-regular.woff2");
}

@font-face {
  font-family: "Poppins";
  font-weight: 700;
  src: url("fonts/poppins-bold.woff2");
}

html {
  height: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  height: auto;
  margin: 0;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

label,
input,
select {
  font-family: "Poppins";
  font-size: 1rem;
}

div#rating-calculator {
  max-width: 736px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

div#rating-calculator * {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex-wrap: wrap;
  gap: 16px;
}

div#new-player-block,
div#plus-minus-block,
div#opponents div,
div#calculation-block {
  flex-direction: row;
  align-items: center;
}

select#time-control {
  width: 100%;
  min-width: 0;
  flex-direction: row;
  align-items: center;
}

div#new-player-block,
div#plus-minus-block,
div#calculation-block,
div#stat-block {
  gap: 8px;
}

div.opponent-block {
  gap: 24px !important;
}

div.opponent-block label {
  width: 8px;
}

label#new-rating-block,
label#new-rating-block * {
  display: inline;
}

input[type="number"] {
  width: 48px;
  padding: 4px 16px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
}

input,
select {
  padding: 4px 12px;
  border: 1px solid black;
  border-radius: 16px;
}

input[type="button"],
input[type="submit"] {
  border: none;
  background-color: var(--blue);
  color: var(--white);
  transition: transform 0.1s ease-out;
}

input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: var(--dark-blue);
}

input[type="button"]:focus,
input[type="submit"]:focus {
  background-color: var(--dark-blue);
}

input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) {
  background-color: var(--blue);
}

input[type="button"]:active,
input[type="submit"]:active {
  background-color: var(--blue);
  transform: scale(1.05);
}

input#add-opponent-button,
input#remove-opponent-button {
  padding: 0 24px;
  font-size: 1.35rem;
  font-weight: 400;
}