*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* background-image: url("../images/fondo.svg"); */
    /* background: linear-gradient(to right, #2C5364, #203A43, #0F2027); */
    text-align: center;
}

.portada {
    background: url(../images/portada.jpg);
    background-repeat: no-repeat;    
    background-position: center;
    /* max-height: 450px; */
    padding: 100px;
    width: 100%;
}

.bg_animate{
    width: 100%;
    /* height: 100vh; */
    background: linear-gradient(to right, #005C98, #505BDA);
    position: relative;
    overflow: hidden;
}

.principal {
    color: black;
    backdrop-filter: blur(2px);
}


h1 {
    font-family: "Balsamiq Sans",cursive;
    background: #171515;
    width: 50%;
    font-weight: bold;
    color: white;
    font-size: 25px;
    display: inline-block;
    border-radius: 2px;
    line-height: 1;
    padding: 10px;
    box-shadow: -4px 4px 0 white;
    margin-top: 0px;
}

p {
    font-family: "Balsamiq Sans",cursive;
    /* font-family: 'Oxygen', sans-serif; */
    text-justify:inter-word;
    text-align: justify;
    font-weight: 500;
    line-height: 30px;
    color: white;
    font-size: 1.3em;
    /* line-height: 30px;
    font-weight: 500; */
    margin: 25px auto;
    width: 51%;
    padding: 10px;
    /* backdrop-filter: blur(4px); */
}

form{
    display: inline-block;
    border-radius: 5px;
    /* background-color: #2C5364; */
    background: #dddddd;
    /* border: 2px solid black; */
    /* box-shadow: 0px 0px 7px 5px white; */
    /* box-shadow: 1px 1px 6px 9px rgba(0 0 0 0.15); */
    width: 50%;
    height: 250px;
    box-shadow: 0 0 3px;
}

img{
    border-radius: 6px;
    width: 50%;
    box-shadow: 0 0 2px;
}

.formula{
    width: 25%;
}

::placeholder {
    color: white;
    opacity: 1; /* Firefox */
}

input {
    text-align: center;
    font-family: "Balsamiq Sans",cursive;
    font-size: 18px;
    line-height: 2;
    margin: 0;
    overflow: visible;
    -webkit-appearance: button;
    border: none;    

    width: 30%;
    background: #929292;
    color: white;
    /* border: none; */
    border-radius: 3px;
    padding: 2px 50px;
    cursor: pointer;
    /* border: 2px solid black; */
    font-weight: 500;
    box-shadow: 0 0 6px black;
}

button{
    font-family: "Balsamiq Sans",cursive;
    width: 25%;
    background: white;
    color: gray;
    font-size: 25px;
    border: none;
    border-radius: 25px;
    padding: 10px;
    cursor: pointer;
    /* border: 2px solid black; */
    box-shadow: 0 0 10px;
    font-weight: 600;
}



/* burbujas */

.burbuja{
    border-radius: 50%;
    background: #fff;
    opacity: .3;

    position: absolute;
    bottom: -150;
    
    animation: burbujas 3s linear infinite;
}

.burbuja:nth-child(1){
    width: 80px;
    height: 80px;
    left: 5%;
    animation-duration: 3s;
    animation-delay: 3s;
}

.burbuja:nth-child(2){
    width: 100px;
    height: 100px;
    left: 35%;
    animation-duration: 3s;
    animation-delay: 5s;
}

.burbuja:nth-child(3){
    width: 20px;
    height: 20px;
    left: 15%;
    animation-duration: 1.5s;
    animation-delay: 7s;
}

.burbuja:nth-child(4){
    width: 50px;
    height: 50px;
    left: 90%;
    animation-duration: 6s;
    animation-delay: 3s;
}

.burbuja:nth-child(5){
    width: 70px;
    height: 70px;
    left: 65%;
    animation-duration: 3s;
    animation-delay: 1s;
}

.burbuja:nth-child(6){
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 4s;
    animation-delay: 5s;
}

.burbuja:nth-child(7){
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 4s;
    animation-delay: 5s;
}

.burbuja:nth-child(8){
    width: 100;
    height: 100px;
    left: 52%;
    animation-duration: 5s;
    animation-delay: 5s;
}

.burbuja:nth-child(9){
    width: 65px;
    height: 65px;
    left: 51%;
    animation-duration: 3s;
    animation-delay: 2s;
}

.burbuja:nth-child(10){
    width: 40px;
    height: 40px;
    left: 35%;
    animation-duration: 3s;
    animation-delay: 8s;
}


@keyframes burbujas{
    0%{
        bottom: 0;
        opacity: 0;
    }
    30%{
        transform: translateX(100px);
    }
    50%{
        opacity: .4;
    }
    100%{
        bottom: 100vh;
        opacity: 0;
    }
    from {top: 1550px;}
    to {top: -40px;}
}

/* @keyframes movimiento{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(100px);
    }
    100%{
        transform: translateY(0);
    }
} */