@font-face {
    font-family: 'Lazer84';
    src: url('./fonts/Lazer84.ttf');
}

:root {
    --width-app: 300px;
}

* {
    font-family: 'Lazer84', Courier, monospace;
    box-sizing: border-box;
}

body {
    background-color: #321c3b;
    max-width: var(--width-app);
    margin: 0 auto;
}

#modal {
    border: 10px black dashed;
}

#modal::backdrop {
    background-color: #321c3b;;
}

.options {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.options > label > input[type="text"] {
    border: 10px violet dashed;
    height: 3rem;
}

.options > label > input[type="text"]:focus {
    border-color: darkorange;
    outline: none;
}

.options > .error {
    color: red;
    visibility: hidden;
}

button {
    background-color: #eacee3;
    color: #321c3b;
    padding: 20px 35px;
    width: 100%;
}

.options > label {
    display:flex;
    align-items: center;
    gap: 1rem;
}

h1 {
    color: white;
}

h2 {
    text-align: center;
}

.container {
    display: grid;
    grid-template-rows: repeat(3, minmax(100px, 1fr));
    grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.container > .cell {
    border: 1px white solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 10px solid white;
    color: white;

}

.winner {
    margin-top: 3rem;
    color: white;
    font-size: 2rem;
}

.result {
    margin-top: 3rem;
    color: white;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.buttons {
    margin-top: 3rem;
}