* {
    box-sizing: border-box;
}

:root {
    --blue: #5EC0DC;
    --red: #DD292E;
    --yellow: #F8B443;
    --darkgrey: #312E3A;
}

body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url("../images/space.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Roboto Mono',
    monospace;

}

header {
    background-color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vmin;
    color: var(--darkgrey);
    letter-spacing: 1vmin;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
}

section {
    display: grid;
    grid-template-rows: 10vmin 50vmin 20vmin;
}

section > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

section > div > div {
    text-align: center;
}

#play-again-btn {
    margin-top: 5vmin;
}

article {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40vmin;
}

button {
    font-size: 3vmin;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

article>button {
    height: 5vmin;
    width: 5vmin;
    margin: 0.5vmin;

}

img {
    height: 100%;
    transform: rotate(-8deg);
    margin: 50px;
}

h1,
h2 {
    text-align: center;
}

h2 {
    font-size: 3vmin;
    color: var(--yellow)
}

#guess {
    font-size: 7vmin;
    letter-spacing: 2vmin;
    color: var(--red);
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid black;
    border-radius: 10px;
    line-height: 60px;
}

.wrong, .correct {
    cursor: not-allowed;
}

.wrong {
    background-color: var(--red);
}

.correct {
    background-color: var(--blue);
}