main{
    display: flex;
    justify-content: center;
}

.formulario{
    width: 50vw;
    padding: 3rem;
    border: 5px dotted rgb(255, 255, 255);
}

.opcion{
    width: 100%;
    height: 35px;
    border: 1px solid rgb(44, 43, 43);
    color: rgb(110, 106, 99);
}

.opcion:hover{
    border: 1px solid rgb(20, 130, 220);
}

.fa-arrow-alt-circle-down{
    color: rgb(74, 155, 202);
}

img{
    width: 35vw;
    height: 50vh;
    margin-top: 5rem;
}

button{
    color:rgb(0, 0, 0);
    background: linear-gradient(225deg, rgb(255, 247, 255), rgb(202, 173, 221));
    width: 100px;
    height: 40px;
    margin: 20px;
    border: 1px solid rgba(24, 22, 22, 0.514);
    border-radius: 10%;
    box-shadow: -5px 5px 11px #706a74,
                5px -5px 11px #ffffff;
}

button:hover{
    color: rgb(109, 162, 192);
    border: rgb(222, 184, 135);
    box-shadow: -5px 5px 11px #ffffff;
    transition: all 0.2s ease-in;
}

@media (min-width: 427px) and (max-width: 768px){/*Vista para tablet*/
    .formulario{
        width: 70vw;
        padding: 2rem;
    }
    #titulo-secundario{
        font-size: 4rem;
        letter-spacing: 2px;
    }
    img{
        width: 55vw;
        height: 40vh;
    }
}

@media screen  and (max-width: 426px){ /* Vista para celulares*/
    #titulo-secundario{
        font-size: 3rem;
        letter-spacing: 1px;
    }
    .formulario{
        font-size: 2.5rem;
        width: 90vw;
        padding: 1rem;
    }
    button{
        width: 75px;
        height: 30px;
    }
    img{
        width: 70vw;
        height: 150px;
    }
}