body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: url('/img/background1.jpg') fixed;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    font-family: 'Tourney', sans-serif;
}

.logo {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: -10em;
}

.logoPages {
    position: relative;
    display: flex;
    justify-content: center;
}

.logoPages img {
    width: 25vw;
    margin-top: -15%;
}

@media only screen and (max-width: 767px) {
      body {
        overflow: hidden;
    }

    .logo {
        width: 100vw;
        height: 70vh; 
        overflow: hidden;
    }
    .botonesInicio {
        justify-content: center;
        flex-direction: column;
        height: 20vh;
     }
}

.botonesInicio {
    display: flex;
    position: relative;
    justify-content: space-around;
    align-items: center;
    margin: 0 15%;
}

.botonPlay, .botonAbout {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(67, 147, 184);
    height: 12vh;
    width: 12vw;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    border-radius: 0.7em;
    font-size: 200%;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    background-color: rgba(133, 163, 175, 0.7);   
    text-decoration: none;
    color: rgb(129, 53, 148);
}

.namebox, .levelboard, .colors {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 60vh; 
    width: 50vw;
    margin-top: -9%;
    margin-left: 25%;
    background-color: rgba(133, 163, 175, 0.7);    
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
}

.name {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(129, 53, 148);
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    width: 25vw;
    height: 10vh;
    font-size: 300%;
    font-weight: bold;
    border-radius: 0.5em;
}

.inputName {
    width: 15vw;
    height: 8vh;
    border-radius: 1em;
    display: flex;
    position: relative;
    justify-content: center;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    background-color: rgba(178, 197, 206, 0.7); 
}

.botonnext {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(129, 53, 148);
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    width: 8vw;
    height: 8vh;
    font-size: 200%;
    font-weight: bold;
    border-radius: 0.5em;
    text-decoration: none;
}

.levels {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(129, 53, 148);
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    width: 15vw;
    height: 10vh;
    font-size: 250%;
    font-weight: bold;
    border-radius: 0.5em;
    text-decoration: none;
}

.colortabbox {
    width: 50vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: rgb(129, 53, 148);
}

.colorInput {
    width: 10vw; 
    height: 15vh; 
    margin: 2%;
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    background-color: rgba(112, 173, 202, 0.815);
}

.nextandback {
    display: flex;
    justify-content: space-around;
    width: 40vw;
}

.botonnb {
    text-decoration: none;
    color: rgb(129, 53, 148);
    font-size: 200%;
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    border-radius: 0.5em;
    width: 20%;
    height: 120%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(133, 163, 175, 0.7); 
}

.choose {
    color: rgb(129, 53, 148);
    font-size: 190%;
    margin-top: -1%;
    margin-bottom: 2%;
}

.colorboxes {
    display: flex;
    width: 35vw;
    height: 30vh;
    justify-content: center;
    align-items: center;
}

.gamebox {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 78vh;
    width: 80vw;
    margin: -13% 10% 0;
    background-color: rgba(133, 163, 175, 0.7);
    border: solid 0.12em rgb(175, 53, 209, 0.7);
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7);
}

@media only screen and (max-width: 767px) {
    .gamebox {
        overflow: hidden;
        height: 90vh;
        width: 85vw;
        margin: -12% 8%;
}
}

.gamebox-play {
    width: 39vw;
    height: 77vh;
    background-color: rgba(133, 163, 175, 0.7);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.game {
    width: 39vw;
    height: 3.3vw;
    border: solid 0.12em rgb(175, 53, 209, 0.7);
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7);
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.game-try {
    font-size: 230%;
    margin-left: 2%;
    color: rgb(129, 53, 148);
    
}
.coloredbox {
    display: flex;
    margin-left: 3%;
    width: 20vw;
    height: 6.4vh;
    align-items: center;
    justify-content: space-between;
}

.color1, .color2, .color3, .color4 {
    width: 2.9vw;
    height: 5.9vh;
    margin: 1%;
    border: 0.1em solid black;
    border-radius: 2vw;
    background-color: rgba(133, 163, 175, 0.7);
}

.rightchoice {
    width: 10vw;
    height: 6.4vh;
    display: flex;
    margin-left: 2%;
    align-items: center;
    justify-content: space-around;
}

.checkbox {
    width: 1.5vw;
    height: 2.8vh;
    border: 0.1em solid black;
    border-radius: 50%;
}

#number10 {
    margin-left: -1.5%;
}

.gamebox-indicators { 
    width: 39vw;
    height: 77vh;
    background-color: rgba(133, 163, 175, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

#selectedColor-name {
    font-size: 180%;
    color: rgb(129, 53, 148);
    display: flex;
    align-items: center;
    width: 9vw;
    margin-left: 2%;
}

.selectedColor-box {
    width: 38vw;
    height: 20vh;
    border: solid 0.12em rgb(175, 53, 209, 0.7);
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7);
    border-radius: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(129, 53, 148);
}

#selectedColor1, #selectedColor2, #selectedColor3, #selectedColor4{
    width: 6vw;
    height: 12vh;
    border: solid 0.12em rgba(96, 25, 116, 0.7);
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7);
    margin: 2%;
    border-radius: 1em;
}

.selectedUsername {
    font-size: 180%;
    width: 20vw;
    height: 22vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: -10%;
    color: rgb(129, 53, 148);
}

.checkButtons {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 10vw;
    height: 25vh;
    margin-top: -10%;
    align-items: center;
}

/* .removeButton, */
.checkButton { 
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(129, 53, 148);
    font-size: 180%;
    width: 12vw;
    height: 7vh;
    border: solid 0.1em rgb(175, 53, 209, 0.7);
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7);
    border-radius: 0.5em;
    cursor: pointer;
}

#showSelectedName {
    display: flex;
    color: rgb(129, 53, 148);
    font-size: 170%;
}

.winnerName {
    color: rgb(129, 53, 148);
    font-size: 450%;
    margin-top: -5%;
    margin-bottom: 1%;
}

.result-box{
    background-color: rgba(133, 163, 175, 0.7);
    width: 60vw;
    height: 75vh;
    margin-top: -12%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-left: 20%;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); 

}
.winnerimg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 40vh; 
    width: 28vw;
    background-image: url(../img/winner.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); 
}

.playAgainBox{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 30vw;
    height: 10vh;
    margin-top: 4%;
    display: flex;
    color: rgb(129, 53, 148);
    font-size: 200%;
}
.yesPlay, .noPlay {
    text-decoration: none;
    color: rgb(129, 53, 148);
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    border-radius: 0.5em;
    width: 7vw;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(133, 163, 175, 0.7);   
}

.loserimg{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 40vh; 
    width: 26vw;
    background-image: url(../img/loser.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
    overflow: hidden;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); 
}

.about {
    background-color: rgba(133, 163, 175, 0.7);
    width: 60vw;
    height: 75vh;
    margin-top: -12%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-left: 20%;
    border: solid 0.12em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); 
    font-size: 100%;
    text-align: center;
}

p {
    margin: 1%;
}

.buttonPlay-Home {
    color: rgb(129, 53, 148);
    width: 15vw;
    height: 5vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.button-Play, .button-Home {
    background-color: rgba(133, 163, 175, 0.7);  
    border: solid 0.001em rgb(175, 53, 209, 0.7); 
    box-shadow: 0 0 40px rgba(175, 53, 209, 0.7); 
    border-radius: 0.5em;
    text-decoration: none;
    width: 6vw;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(129, 53, 148);
}