* {
    margin: 0
}
:root {
    --color-fixture: rgb(210, 231, 250);
}
body {
    background-color: cadetblue;
}
#superior {
    background-color: rgb(83, 138, 139);
    width: 100vw;
    height: 25vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#sub-cont {
    background-color: cadetblue;
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 20px;
}
.seleccion {
    background-color: aliceblue;
    width: 40%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.seleccion:hover {
    transform: scale(1.02);
}

.flecha {
    width: 20px;
    height: 20px;
    background-color: aliceblue;
    border-radius: 50%;
    position: absolute;
    color: rebeccapurple;
}
#adelante {
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#atras {
    left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    width: 100%;
}





/* PARTE INFERIOR */

#inferior {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(10, 50px);
    gap: 5px;
    margin: 5px;
    background: radial-gradient(circle, rgba(29,108,108,1) 0%, rgba(95,158,160,1) 100%);
}

input {
    width: 80%;
    border-radius: 20px;
    border: none;
    height: 17px;
    grid-column: 3/6;
    grid-row: 1;
    text-align: center;
    justify-self: center;
    background-color: rgba(222, 252, 252, 0.5);
    font-weight: 600;
}

#textoFinal {
    color: var(--color-fixture);
    font-size: large;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    grid-column: 4;
    grid-row: 8;
    align-self: center;
    justify-self: center;
}

#contFinal {
    width: 100%;
    height: 100%;
    grid-column: 3/6;
    grid-row: 8/10;    
    display: flex;
    justify-content: space-between;
    align-items: end;
}
#finalistaA {
    width: 49%;
    height: 60%;
    /*grid-column: 3;
    grid-row: 9/10;*/
    background-color: rgb(124, 163, 236);
    border-radius: 40%;
    display: flex;
    align-items: center;
}
#finalistaA img {
    display: none;
    height: fit-content;
}

#finalistaN {
    width: 49%;
    height: 60%;
    /*grid-column: 6;
    grid-row: 9/10;*/
    background-color: rgb(124, 163, 236);
    border-radius: 40%;
    display: flex;
    align-items: center;
}
#finalistaN img {
    display: none;
    height: fit-content;
}

#btn {
    width: 100%;
    height: 50%;
    grid-column: 2/7;
    grid-row: 10/11;
    align-self: end;
    display: flex;
    justify-content: center;
}
#btn button {
    border: none;
    border-radius: 20px;
    background-color: rgb(28, 71, 151);
    color: var(--color-fixture);
    font-size: small;
}

.octavos {
    width: 40px;
    height: 40px;
}


#logo {
    grid-column: 4;
    grid-row: 1/3;
    align-self: center;
    border-radius: 40px;
}

/* OCTAVOS AMERICANA */

#quintoA {
    width: 100%;
    height: 80%;
    grid-column: 1;
    grid-row: 1;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#cuartoA {
    width: 100%;
    height: 80%;
    grid-column: 1;
    grid-row: 2;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

#sextoA {
    width: 100%;
    height: 80%;
    grid-column: 1;
    grid-row: 5;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#terceroA {
    width: 100%;
    height: 80%;
    grid-column: 1;
    grid-row: 6;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

#septimoA {
    width: 100%;
    height: 80%;
    grid-column: 1;
    grid-row: 9;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#segundoA {
    width: 100%;
    height: 80%;
    grid-column: 1;
    grid-row: 10;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

/* CUARTOS AMERICANA */

#mejorA {
    width: 100%;
    height: 80%;
    grid-column: 2;
    grid-row: 4;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

#vacioA1 {
    width: 100%;
    height: 80%;
    grid-column: 2;
    grid-row: 3;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#vacioA1 img {
    display: none;
}


#mejorA63 {
    width: 100%;
    height: 80%;
    grid-column: 2;
    grid-row: 7;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#mejorA63 img {
    display: none;
}

#mejorA72 {
    width: 100%;
    height: 80%;
    grid-column: 2;
    grid-row: 8;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}
#mejorA72 img {
    display: none;
}



/* FINAL AMERICANA */

#mejorAA1 {
    width: 100%;
    height: 80%;
    grid-column: 3;
    grid-row: 6;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}
#mejorAA1 img {
    display: none;
}

#mejorA63A72 {
    width: 100%;
    height: 80%;
    grid-column: 3;
    grid-row: 5;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#mejorA63A72 img {
    display: none;
}





/* OCTAVOS NACIONAL */

#quintoN {
    width: 100%;
    height: 80%;
    grid-column: 7;
    grid-row: 1;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#cuartoN {
    width: 100%;
    height: 80%;
    grid-column: 7;
    grid-row: 2;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

#sextoN {
    width: 100%;
    height: 80%;
    grid-column: 7;
    grid-row: 5;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#terceroN {
    width: 100%;
    height: 80%;
    grid-column: 7;
    grid-row: 6;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

#septimoN {
    width: 100%;
    height: 80%;
    grid-column: 7;
    grid-row: 9;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#segundoN {
    width: 100%;
    height: 80%;
    grid-column: 7;
    grid-row: 10;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}



/* CUARTOS NACIONAL */

#mejorN {
    width: 100%;
    height: 80%;
    grid-column: 6;
    grid-row: 4;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

#vacioN1 {
    width: 100%;
    height: 80%;
    grid-column: 6;
    grid-row: 3;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#vacioN1 img {
    display: none;
}


#mejorN63 {
    width: 100%;
    height: 80%;
    grid-column: 6;
    grid-row: 7;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#mejorN63 img {
    display: none;
}

#mejorN72 {
    width: 100%;
    height: 80%;
    grid-column: 6;
    grid-row: 8;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}
#mejorN72 img {
    display: none;
}



/* FINAL NACIONAL */

#mejorNN1 {
    width: 100%;
    height: 80%;
    grid-column: 5;
    grid-row: 6;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}
#mejorNN1 img {
    display: none;
}

#mejorN63N72 {
    width: 100%;
    height: 80%;
    grid-column: 5;
    grid-row: 5;
    background-color: var(--color-fixture);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
}
#mejorN63N72 img {
    display: none;
}




/* CAMPEÓN */
#textoCampeon {
    grid-column: 3/6;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    color: var(--color-fixture);
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: small;
}
#campeon {
    width: 75%;
    height: 65%;
    grid-column: 3/6;
    grid-row: 2/5;
    background-color: rgba(94, 172, 172, .5);
    border-radius: 40%;
    align-self: end;
    justify-self: center;
    display: flex;
}