@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
/* @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap");

:root {
  --main-font: "Onest";
  --letter-font: "Sofia Sans Condensed";
  --box-base: 2em;
  --letter-size: calc(var(--box-base) * 1);
  --text-color: rgb(51, 51, 51);
  --green-color: rgb(119, 161, 102);
  --yellow-color: rgb(197, 181, 102);
  --letter-border: 5px solid black;
  --letter-border-inactive: 5px solid white;
}

h1,
h2,
input {
  font-family: var(--main-font), sans-serif;
}

body {
  font-family: var(--main-font), sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 98vw;
}

main {
  display: grid;
  grid-template-rows: repeat(3, max-content);
  width: 98vw;
  justify-items: center;
}

section {
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 0.5em;
  column-gap: 0.5em;
}

#greens {
  grid-template-columns: repeat(5, 1fr);
  /* width: min-content; */
}

#yellows {
  grid-template-columns: repeat(5, 1fr);
}

#grays {
  grid-template-columns: 1fr;
}

#greens span,
#yellows span,
#grays span {
  grid-row: 2;
  justify-self: center;
}

#greens input,
#yellows input,
#grays input {
  grid-row: 1;
  justify-self: center;
}

.any-input {
  height: var(--box-base);
  font-size: var(--letter-size);
  text-align: center;
  font-family: var(--letter-font);
  font-weight: 800;
  text-transform: uppercase;
  /* color: var(--text-color) !important; */
  border: var(--letter-border-inactive);
  box-shadow: 0px 0px 2px black;
}

.any-input:focus {
  outline: none;
  border: var(--letter-border);
}

.green-input {
  width: var(--box-base);
  /* width: 20%; */
}

.yellow-in {
  /* width: calc(var(--box-base) * 2); */
  width: calc(var(--box-base) * 2);
}

.green {
  color: rgb(119, 161, 102);
}

.yellow {
  color: rgb(197, 181, 102);
}

.gray {
  color: #666;
}

#results {
  font-family: Menlo, "Meslo LG S", "Monaco", sans-serif;
  grid-template-rows: 1fr;
}