* {
    margin: 0;
    padding: 0;
}


body {
    background-image: linear-gradient(120deg, #2264fdd5 0%, #f54b50a8 100%), url(archivos/img-univeso.jpg);
    background-attachment: fixed;
}
/* backgorung-attachment es para que el fondo colorido no se vea cortado por secciones */


h1 {
    font-family: 'Monoton', cursive;
    font-size: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.imagen {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    margin-left: 18%;
    margin-top: 50px;
    animation: fadeIn 3s ease;
}

@keyframes fadeIn {
    0% {
       opacity: 0;
       filter: blur(20px);
    }

    10% {
        opacity: 1;
        filter: brightness(2) blur(10px);
    }
}

/* el enlace para volver al inicio */
.enlace-volver {
    font-size: 15px;
    color: #fff;
}

/* las redes del navbar */
.redes {
    color: blueviolet;
}

.redes:hover {
    transition: 1s;
    color: orangered;
}

/* el enlace al correo electronico */
.enlace-correo {
    padding-left: 25px;
    
}

a {
    color: #fff;
    text-decoration:none;
    transition: 1.5s;
    font-family: 'Ysabeau Office', sans-serif;
}

a:hover {
    color: #0313f8;
    transition: 1s;
}

/* formulario */

.formulario {
    padding-left: 70%;
    margin-top: -9%;
    font-family: 'Ysabeau Office', sans-serif;
    opacity: 1%;
    transition: 1s;
    
}

.mi-boton {
    color: #fff;
    background-color: #f56bf5;
    border-color: #ea55f7;
}

.mi-boton:hover {
    background-color: #8f089b;
    border-color: #8f089b;
    color: #a18cd1;
}

p {
    color: #fff;
}

.form-grupo {
    color: #fff;
}

textarea {
    padding: 5px;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    border: 0;
    border-radius: 8px;
    height: 150px;
}

/* la trasparencia del formulario */
.formulario:hover{
    opacity: 100%;
    transition: 1s;
}

.mensaje-abajo {
    padding-left: 45%;
    font-family: 'Ysabeau Office', sans-serif;
    color: #fff;
    
}
/* el fondo colorido del area texto del formulario */
.form-input {
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    border: 0;
    padding: 5px;
    border-radius: 8px;
    
}

/* el fondo colorido del interior del navbar de la derecha */
.offcanvas-header{
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.offcanvas-body {
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

/* seccion responsive-------------------------------------------------------------------------- */

@media screen and (max-width:1000px){
    .imagen {
        width: 300px;
        height: 300px;
        border-radius: 50%;
    }

    .mensaje-abajo {
        padding-left: 30px;
        padding-top: 50%;
        font-size: 15px;
    }

    #formulario{
    margin-left: -50px;
   }
}

@media screen and (max-width:790px){
    h1 {
        font-size: 40px;
    }

    .imagen {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .enlace-correo a {
        font-size: 13px;
    }

    .mensaje-abajo {
        font-size: 13px;
    }

    textarea {
        width: 200px;
        height: 200px;
    }

    .form-grupo {
        padding: 5px;
    }

    .parrafo {
        display: none;
    }

    .form-input {
        width: 100px;
        height: 30px;
    }

    .form-label {
        font-size: 15px;
    }
}

@media screen and (max-width:590px){
    .imagen {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-left: 20px;
    }

    h1 {
        font-size: 25px;
    }

    .enlace-correo a {
        font-size: 10px;
    }

    .mensaje-abajo {
        display: none;
    }

    /* .formulario {
        display:none;
    } */

    .formulario {
        padding-left: 200px;
        padding-top: 100px;
    }

    .form-input {
        width: 100px;
        height: 20px;
    }

    .area-texto {
        width: 70px;
        height: 70px;
    }

    .mi-boton {
        margin-top: 140px;
    }

    .form-label {
        font-size: 15px;
    }


    .navbar-toggler {
        width: 20px;
        height: 20px;
    }

    .navbar-toggler-icon {
        display: none;
    }
}