/** CSS resets **/

* {
    padding: 0;
    margin: 0;
}

/**
accessibility classes 
- https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
*/

.sr-only {
    left: -100vw;
    position: absolute;
}

/* styling */

:root {
    --table-width: min(calc(100vh - (80px + 133px + 29px + (1.5rem * 3))), 100%);
  }

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 5rem;
}

header > h1 {
    font-family:  'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 80%;
    height: calc(100vh - 5rem);
    font-family: Arial, Helvetica, sans-serif;
}

li:hover {
    cursor: pointer;
}

main > form {
    width: var(--table-width);
}

main > table {
    width: var(--table-width);
    aspect-ratio: 1;
    border: solid black 3px;
    border-collapse: collapse;
}

main > ol {
    display: flex;
    justify-content: space-around;
    width: var(--table-width);
}

main > table td {
    text-align: center;
    border: solid black 1px;
}

.letter-selected {
    background-color: green;
    color: white;
}

.word-crossed {
    text-decoration: line-through;
}

#shuffle-btn {
    padding: 0.25rem;
    border: solid black 1px;
    border-radius: 0.25rem;
}

#shuffle-btn:hover {
    cursor: pointer;
}