.underline {
        position: absolute;
        background: #000FFF;
        background: -moz-linear-gradient(top, #000FFF 0%, #010062 50%, #050048 100%);
        background: -webkit-linear-gradient(top, #000FFF 0%, #010062 50%, #050048 100%);
        background: linear-gradient(to bottom, #000FFF 0%, #010062 50%, #050048 100%);
        height: 50%;
        border: 0.1em groove blue;
        border-radius: 100%;
        margin-left: 100%;
    }


    .logo {
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        background: white;
        height: 100%;
        position: fixed;
        box-shadow: -1px -10px 10px 0.1em rgb(67, 0, 252);
    }

    .logo img {
        width: 95%;
        margin-right: 2em;
        margin-left: 1em;
    }

    /* contenido */

    @media (max-width: 700px) {

        .logo {
            all: unset;
            z-index: 10;
            display: block;
            width: 100%;
            position: sticky;
        }

        main {
            padding: 0;
            margin: 0;
            width: 100%;
        }


        .logo img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 2em;
            margin-bottom: 1em;
            width: 20em;
        }

    }