@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');

a {
    text-decoration: none;
    color: #333;
    transition: color 0.5s ease;
}

a:hover {
    color: #5fb9cb;


}

.landing {
    font-family: "STIX Two Text", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    background-repeat: no-repeat;
    padding-top: 150px;
    background-position: center bottom;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgb(0, 0, 0, 0.5)), url("../img/fondo_web.jpg");
    background-size:cover;
}

.margen {
    margin-top: -480px;
}

.fondo_cuerpo {
    background: linear-gradient(rgba(36, 78, 73, 0.1), rgb(36, 78, 73, 0.1));
    background-size: cover;
    background-color:#244e49 ;
}

.landing h1 {
    font-size: clamp(2rem, 1.538rem + 1.69vw, 6rem);
    font-weight: 500;
    font-family: "STIX Two Text", serif;
    font-style: normal;
    text-transform: uppercase;
}
.landing h1 span{font-size: 0.7em;}
.landing .texto {
    font-size: clamp(1.25rem, 1.025rem + 1.12vw, 1.5rem);
    line-height: 120%;
    text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.6);
}

.fondo {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgb(0, 10, 20, 0.2)), url("../img/fondo_pescao.jpg");
    background-size: cover;
    min-height: calc(100vh - 30px);
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (width <= 575.98px) {
    .landing { height: 50vh; padding-top: 50px; }
    .landing .texto { font-size: 1.2rem;}
    .margen { margin-top: -180px; }
}
/* Extra small devices (portrait phones, less than 576px)*/
@media (width <= 575.98px)and (orientation: portrait) {
    .landing { height: 50vh; padding-top: 50px; }
    .landing .texto { font-size: 1.2rem;}
    .margen { margin-top: -140px; }
}

/* Small devices (landscape phones, 576px and up)*/
@media (576px <= width <= 767.98px) {
    .landing {
        height: 100vh;
        padding-top: 50px;
    }
    .landing .texto { font-size: 1.2rem;}
    .margen { margin-top: -190px; }

}

/* Medium devices (tablets, 768px and up)*/
@media (768px <= width <= 991.98px) {
    .landing { height: 100vh; padding-top: 50px; }

    .margen { margin-top: -170px; }
}

/* Medium devices (tablets, 768px and up)*/
@media (768px <= width <= 991.98px) and (orientation: portrait) {
    .landing {
        height: 50vh;
        padding-top: 50px;
    }

    .margen {
        margin-top: -150px;
    }
}


/* Large devices l (desktops, 992px and up)*/
@media (992px <= width <= 1199.98px) {

}

/* Large devices l (desktops, 992px and up)*/
@media (992px <= width <= 1199.98px)  and (orientation: portrait) {
    .landing {
        height: 50vh;
        padding-top: 50px;
    }

    .margen {
        margin-top: -150px;
    }
}


/* Extra large devices xl(large desktops, 1200px and up)*/
@media (1200px <= width <= 1399px) {
    .landing {
        padding-top: 150px;
    }

}

/* Extra large devices xl(large desktops, 1400px and up)*/
@media (width >= 1400px) {
    .landing {
        padding-top: 150px;
    }

}