body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:2.5vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    background-color: #071A52;
    font-family: Arial, Helvetica, sans-serif;
    color: #A7FF83;

    & button{
        border-radius: 15px;
        border: none;
        background: linear-gradient(to bottom, white 0%, #A7FF83 20%, #074652 100%);
        color:#030b23;
        cursor: pointer;
    }

    & .ejercicios{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        gap: 20px;
        width: 45vw;
        height: 80vh;
        border-radius: 20px;
        background-color: #086972;

        & .letrero {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 30px;
            color: #17B978;
            font-weight: bold;
        }
    }

    & #ejercicio25{

        & #titulo25{
            text-align: center;
            font-size: 40px;
            color: #071A52;
            background-color: #A7FF83;
            width: 90%;
            padding-top: 1vh;
            padding-bottom: 1vh;
            font-weight: bold;
        }

        & >div:nth-child(3){
            display: flex;
            align-items: center;
            justify-content: center;
            gap:10px;
            font-size: 25px;
            width: 80%;
            color:#030b23;

            & #valor25{
                border:2px solid #A7FF83;
                background: transparent;
                height: 5vh;
                width: 40%;
            }

            & #agregar25{
                height: 85%;
                width: auto;
            }
        }

        & >div:nth-child(4){
            display: flex;
            justify-content: end; 
            width: 90%;
            
            & #boton25{
                height: 10vh;
                width: 60%;
                font-size: 25px;
            }
        }

        & #resultado25{
            border: 2px solid #A7FF83;
            width: 90%;
            font-size: 20px;
            
            & >*{   
                margin:0;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }   

            & #palabras25{
                border-bottom: 1px solid #A7FF83;
            }
        }
    }

    & #ejercicio26{
        & #input26{
            margin-top: 50px;
            background: transparent;
            border: 2px solid #A7FF83;
            height: 5vh;
            text-align: center;
            font-size: 30px;
            color:#A7FF83;

            &::placeholder{
                color:#A7FF83;
            }
        }

        & #titulo26{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 20vh;
            width: 75%;
            border-radius: 90px;
            font-size: 45px;
            font-weight: bold;
            background: radial-gradient(circle at 20% 30%, white 0%, #A7FF83 20%, #074652 100%);
            margin:0;
            color:#071A52;
        }

        & #resultado26{
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 65%;
            height: 10vh;
            border:2px solid #A7FF83;
        }

        & #boton26{
            border: 8px solid white;
            box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.411);
            height: 20vh;
            width: 20vh;
            border-radius: 100%;
            font-size: 50px;
            color: white;
            background: radial-gradient(circle at 20% 30%, white 0%, #A7FF83 20%, #074652 100%);
        }
    }

    & #ejercicio27{
        & >div:nth-child(2){
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 90%;
            border: 2px solid #A7FF83;
            border-radius: 10px;
            padding-top: 20px;
            padding-bottom: 20px;
            gap:20px;

            & #titulo27{
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                border: 2px solid #A7FF83;
                font-size: 45px;
                font-weight: bold;
                margin:0;
                color:#071A52;
                padding-left: 5px;
                padding-right: 5px;
            }
            
            & #resultado27{
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                width: 90%;
                height: 8vh;

                >*{
                    font-size: 25px;
                    color: #A7FF83;
                }
            }

            & #boton27{
                border-radius: 5px;
                font-size: 30px;
                width: 40%;
            }
        }   
    }

    & #ejercicio28{
        & >div:nth-child(2){
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border: 2px solid #A7FF83;
            width: 90%;
            border-radius: 15px;
            padding-top: 20px;
            padding-bottom: 20px;
            gap: 20px;

            & >div:nth-child(1){/* Aquí está el input */
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;

                & #input28{
                    background-color: transparent;
                    border: 2px solid #A7FF83;
                    color: #A7FF83;
                    font-size: 25px;
                    width: 10vw;
                    margin-left: 5px;
                }
            }

            & >div:nth-child(2){/* Aquí estan los botones */
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                width: 70%;

                & #agregar28, #resolver28{
                    font-size: 25px;
                    width: 8vw;
                    border-radius: 5px;
                }
            }

            & #resolverimpares, #resolverpares{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                height: 5vh;
                border: 2px solid #A7FF83;
                width: 70%;
                border-radius:10px;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    }

    & #ejercicio29{
        display: grid;
        grid-template-columns: 60% 20%;
        grid-template-rows: 10% 75%;
        grid-template-areas: "titulo titulo"
        "centro derecha";
        align-items: center;
        justify-content: center;
        padding-top:5%;
        width: 70%;
        height: 110vh;

        & #titulo29, #centro, #derecha{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #A7FF83;
            color: #071A52;
        }

        & #titulo29{
            grid-area: titulo;
            font-size: 40px;
            color: #086972;
        }

        & #centro{
            grid-area: centro;
            gap:70px;
            font-size: 25px;

            & >div{
                height: 8vh;
                width: 90%;
                display: flex;
                justify-content: center;
                align-items: center;

                & >*{
                    margin-left: 20px;
                    background-color: #074652;
                    color: #A7FF83;
                    font-size: 25px;
                }
            }

            & #totalvalores, #input29{
                width: 50%;
                height: 100%;

            }

            & #ultimoextraido, #ultimoagregado{
                height: 100%;
                width: 30%;
            }
        }

        & #derecha{
            grid-area: derecha;
            gap: 20px;
            
            & button{
                border-radius: 5px;
                font-size: 20px;
                height: 9.5%;
                width: 90%;
            }

            & #elimina{
                background: linear-gradient(to bottom, #074652 0%, #A7FF83 50%, #074652 100%);
            }

            & #eliminador{
                font-size: 25px;
                height: 15%;
                width: 90%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                background-color: #074652;
                color: #A7FF83;
            }
        }
    }
}