body {
    font-family: 'Mali', cursive;
    display: flex;
    text-align: center;
    justify-content: center;
}
  
/* GAME INTRO */
.game-intro {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;

    margin: 20px;
    padding: 20px;
    min-width: 1000px;
    max-width: 1000px;
    height: 1000px;
    border-radius: 2%;
    border: 4px darkcyan dotted;
    background-color: RGB(91, 210, 209);
}

.title {
    font-size: 3.5rem;
}

.game-info {
    text-align:justify;
    width: 45%;
    margin: 20px;
}

#start-button {
    font-size: 1.5rem;
    background-color: gainsboro;
    color: black;
    border-radius: 5%;
    border: none;
    padding: 20px 30px;
    margin-bottom: 20px;
}

.p-with-margin-bottom {
    margin-bottom: 20px;
}

.bi {
    font-size: 4rem;
}

.game-intro h4 {
    font-size: 1.5rem;
}

.game-intro p {
    font-size: 1.25rem;
    margin-bottom: 0px;
    width: 80%;
}

.game-intro .main {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.game-intro img {
    border-radius: 10%;
    width: 45%;
    margin: 20px;
}

.game-intro li {
    font-size: 1rem;
}

/* CANVAS */
#canvas {
    border: 4px darkcyan dotted;
    border-radius: 2%;
    margin: 20px;
}

/* GAME OVER  */
.game-over {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;

    margin: 20px;
    padding: 20px;
    min-width: 1000px;
    max-width: 1000px;
    height: 1000px;
    border-radius: 2%;
    border: 4px darkcyan dotted;
    color: white;
    background-color: RGB(91, 210, 209);
    background-image: url('../images/game-over.png');
    background-size: cover;
}

.game-over button {
    font-size: 1.5rem;
    background-color: RGB(91, 210, 209);
    color: black;
    border-radius: 5%;
    border: none;
    padding: 20px 30px;
    margin-bottom: 20px;
}

/* GAME WON  */
.game-won {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;

    margin: 20px;
    padding: 20px;
    min-width: 1000px;
    max-width: 1000px;
    height: 1000px;
    border-radius: 2%;
    border: 4px darkcyan dotted;
    background-color: RGB(91, 210, 209);
    background-image: url('../images/win-game.jpg');
    background-size: cover;
}

.game-won button {
    font-size: 1.5rem;
    background-color: RGB(91, 210, 209);
    color: black;
    border-radius: 5%;
    border: none;
    padding: 20px 30px;
    margin-bottom: 20px;
}