body {
    margin: 0;
    padding: 0;

}

.page {
    height: 100vh;
    width: 100vw;

}

.centrar {
    display: flex;
    justify-content: flex-start;
    align-items:center;
    flex-direction: column;
    
    height: 100vh;
    width: 100vw;

}

.centrar2 {
    display: flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction: column;
    
    height: 100vh;
    width: 100vw;

}

.centrar4 {
    display: flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction: column;

    height: 100vh;
    width: 100vw;
}

.button {
    height: 15vh;
    width: 15vw;

    background-color: black;
}

#button1 {
    height: 15vh;
    width: 15vw;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url("../img/startflags.jpg");  

    border: 0.1em solid black;
    border-radius: 5% 5% 5% 5%;
}

#button4 {
    height: 8vh;
    width: 20vw;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url("../img/newgame.jpg");  

    border: 0.1em solid black;
    border-radius: 5% 5% 5% 5%; 
}

.startimage {
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url("../img/start.jpg");
}

.raceimage {
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url("../img/race.jpg");
}

.goalimage {
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url("../img/goal.jpg");
}

.character {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: row;
    
    height: 20vh;
    width: 80vw;
    
    background-color: darkkhaki;
}

.carpic {
    height: 20vh;
    width: 30vw;

    border: 0.1em solid black;
    color:black;

    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;

}

#carpicplayer1 {
    margin-bottom: 0.2%;
    margin-top: 0.2%;
    margin-left: 0.2%;
    margin-right: 0.2%;  
}

#carpicplayer2 {
    margin-bottom: 0.2%;
    margin-top: 0.2%;
    margin-left: 0.2%;
    margin-right: 0.2%;  
}

.info {
    font-family:cursive;
    color:black;

    border: 0.1em solid black;

    background-color: darkkhaki;

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

#winnerscript {
    height: 8vh;
    width: 37vw;
    border-radius: 5% 5% 5% 5%;   
}

#playerselectionscript {
    height: 10vh;
    width: 45vw;
    border-radius: 5% 5% 5% 5%;
}

#eventstate {
    height: 20vh;
    width: 40vw;

    border-radius: 3% 3% 3% 3%;

    margin-bottom: 0.2%;
    margin-top: 0.2%;
    margin-left: 0.2%;
    margin-right: 0.2%;
}

.cartext {
    height: 20vh;
    width: 50vw;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:cursive;
    border: 0.1em solid black;
    color:black;
}

.car1 {
    background-image: url("../img/cars/chatarraJoe.jpg");
}

.car2 {
    background-image: url("../img/cars/purpleTruck.jpg");
}

.car3 {
    background-image: url("../img/cars/johnyElRojo.jpg");
}

.car4 {
    background-image: url("../img/cars/inferno.jpg");
}

#page1row1 {
    height: 10vh;
}

#page3row1 {
    height: 21vh;
    width: 100vw;

    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction: row;
}

#page3row2 {
    height: 49vh;
    width: 100vw;

    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction: row;
}

.carspace {
    height: 47vh;
    width: 30vw;

    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction: column;
}

.cardescription {
    color:black;
    border: 0.1em solid black;
    font-family:cursive;

    height: 10vh;
    width: 28vw;

    background-color: darkkhaki;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom: 0.2%;
    margin-top: 0.2%;
    margin-left: 0.2%;
    margin-right: 0.2%;
}

#page3space2 {
    height: 49vh;
    width: 40vw;

    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;

    margin-bottom: 0.2%;
    margin-top: 0.2%;
    margin-left: 0.2%;
    margin-right: 0.2%;
}

#page3row3 {
    height: 30vh;
    width: 100vw;

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

#steeringwheel {
    height: 10vh;
    width: 10vw;

    display:flex;

    background-image: url("../img/volante.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
}

.grey {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.autoestopista {
    background-image: url("../img/autoestopista.jpg");
    border: 0.1em solid black;
    border-radius: 5% 5% 5% 5%;
}

.policia {
    background-image: url("../img/controlpolicial.webp");
    border: 0.1em solid black;
    border-radius: 5% 5% 5% 5%;
}

.gas {
    background-image: url("../img/gas.jpg");
    border: 0.1em solid black;
    border-radius: 5% 5% 5% 5%;
}

.obstaculo {
    background-image: url("../img/obstaculo.jpg");
    border: 0.1em solid black;
    border-radius: 5% 5% 5% 5%;
}