body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./images/campNou.jpg);
    background-size: cover;
}

canvas{
background-image: url("./images/campoFutbol.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 20px;


}

.startScreen{
    background-image: repeating-linear-gradient(
        45deg,
        red,
        blue 200px,
        red 10px,
        blue 20px
    );
    width: 40vw;
    border: 10px solid yellow;
    height: 80vh;
    box-sizing: border-box;
    margin: 20px;
    display: flex;  
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;

}

.gameOver{
    background-color: black;
    width: 40vw;
    border: 10px solid yellow;
    height: 80vh;
    box-sizing: border-box;
    margin: 20px;
    display: flex;  
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    color: white;


}

.theWinner{

    background-color: black;
    width: 40vw;
    border: 10px solid yellow;
    height: 80vh;
    box-sizing: border-box;
    margin: 20px;
    display: flex;  
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    color: white;



}


#start-button {
    width: 200px;
    height: 100px;
    border: 5px solid yellow;
    border-radius: 10px;
    background-color: black;
    font-style:monospace;
    font-size: large;
    color: white;

}

.messiImage{
width: 300px;
border-radius: 10px;

}


 .hidden{
display: none;

}