@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap');

#secInicial {
    background-image: url(/images/backgrounds/water-texture-background-pastel-blue-design.jpg);
    background-size: cover;
}

#gridOpeningArea {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 60% 1fr;
}

#openingArea {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
}

#firstTitle {
    font-family: 'Geologica', sans-serif; 
    font-weight: 900;
    font-size: 6vw;
}

#secondTitle {
    font-family: 'Geologica', sans-serif; 
    font-size: 2vw;
    font-weight: 400;
    color: rgb(0, 131, 193);
    letter-spacing: 4px;
    padding: 20px;
    text-shadow: 0px 13px 25px rgba(0, 0, 0, 1);
}

.divContentCenter {
    display: flex;
    text-align: center;
    flex-direction: column;
}

.flexColumnBottom {
    justify-content: flex-end;
}

.flexColumnTop {
    justify-content: flex-start;
}
 
.logo-telaInicial img {
    width: 100%;
    height: 100%;
}


@media only screen and (max-width: 830px) {
    #gridOpeningArea {
        height: 80vh;
    }
}

@media only screen and (max-width: 500px) {
    #gridOpeningArea {
        height: 70vh;
        grid-template-columns: 1fr 80% 1fr;
    }
}

@media only screen and (max-width: 400px) {
    #gridOpeningArea {
        height: 60vh;
        grid-template-columns: 1fr 80% 1fr;
    }
}