@import url("https://alv.cx/styles.css");

:root {
  --default-bg: #fefefe;
  --dark-bg: #b8b8b8;
  --selected-bg: #383838;
  --default-fg: #454545;
  --red: #ab4642;
  --orange: #dc9656;
  --yellow: #f7ca88;
  --green: #a1b56c;
  --teal: #86c1b9;
  --blue: #7cafc2;
  --purple: #ba8baf;
  --brown: #a16946;
}

#letter_grid {
    width: fit-content;
    margin: 0 auto;
}

.grid_row {
    display: flex;
    flex-direction: row;
}

.grid_item {
    width: 3em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2em solid var(--dark-bg);
    margin: 1em;
    text-transform: uppercase;
    font-weight: 800;
}

.grid_item * {
    text-align: center;
    margin: 0;
}

.grid_correct { background-color: var(--green)}
.grid_present { background-color: var(--yellow)}
.grid_wrong { background-color: var(--brown)}