:root {
    --PrincipalBlue: hsl(223, 87%, 63%);
    --WaitPaleBlue: hsl(223, 100%, 88%);
    --ErrorLightRed: hsl(354, 100%, 66%);
    --TitleGray: hsl(0, 0%, 59%);
    --SpanVeryDarkBlue: hsl(209, 33%, 12%);
}

body{
    background-color: white;
    font-family: "Libre Franklin", sans-serif;
    display: flex;
    align-items: center; 
    justify-content: center;
    min-height: 120vh;
}
@media (min-width: 768px) {
body{
    min-height: 100vh;
}
}

/**Txt*/
h1{
    color: var(--TitleGray);
    font-weight: 300;
    font-size: 28px; 
}
@media (min-width: 768px) {
    h1{
        font-size: 40px; 
    }
}
span{
    color: var(--SpanVeryDarkBlue);
    font-weight: 700;
}
p{
    color: var(--SpanVeryDarkBlue);
    font-weight: 300;
    font-size: 10px;
}
@media (min-width: 768px) {
    p{
        font-size: 20px;
    }
}

/**Container*/
.container{
    width: 90%;
    margin: auto;
    text-align: center;
}

/**Forms*/
.formulario{
    display: block;
    width: 100%;
}

@media (min-width: 768px) {
    .formulario{
        display: flex;
        justify-content: center;
        align-items: center;
    } 

}
input{
    border: 1px solid var(--WaitPaleBlue);
    border-radius: 30px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 25px;
}
@media (min-width: 768px) {
    input{
        width: 400px;
        padding: 20px 200px 20px 20px;
        margin: 0px 10px;
        margin-top: 25px;
    }
}
.input-error {
    border-color: var(--ErrorLightRed);
}
.error{
    color: var(--ErrorLightRed);
    font-size: 10px;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}
@media (min-width: 768px) {
    .error{
        text-align: left;
        margin-left: 30px;
    }
}
.noactive{
    visibility: hidden;
}
.active{
    visibility:visible;
}
button{
    background-color: var(--PrincipalBlue);
    border: none;
    border-radius: 30px;
    padding: 20px 60px; 
    color: white;
    font-size: 15px;
    cursor: pointer;
}
button:hover{
    background-color: var(--WaitPaleBlue);
}



/**Img*/
.imgMain{
    width: 90%;
    margin-top: 50px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .imgMain{
        width: 40%;
    } 
}


/**Footer*/
.Copyright{
    color: var(--TitleGray);
    font-size: 15px;
}

.logos{
    border-radius: 50%;
    border: 1px solid var(--WaitPaleBlue);
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    filter: invert(48%) sepia(50%) saturate(2404%) hue-rotate(198deg) brightness(97%) contrast(93%);
}

.logos:hover{
    background-color: var(--PrincipalBlue);
}