@font-face {
    font-family: "Inter";
    src: url("font/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 700;  
    font-style: normal;
}

h1, h2 {
    font-family: "Inter";
    font-weight: 700;
    margin: 0;
    opacity: 0.8;
    width: 52vw;
}

h3{
    font-family: "Inter";
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1;
}

h4{
    font-family: "Inter";
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 50px;
}

h5{
    margin: 0;
}

h1{
    font-size: 80px;
    text-transform: uppercase;
    font-weight: 700;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter";
    font-weight: 450;
    font-size: 16px;
    line-height: 1.5;
}

/* initial image and title */
#cover{
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-image: url("Immagini/Cover.jpg");
    background-size: cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.text {
    font-family: "Inter";
    font-weight: 450;
    width: 40vw;      
    margin: 0 auto;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    padding-top: 80px;
    padding-bottom: 80px ;
    font-size: 18px;
}

/* map */

#sticky { 
    position: relative; 
    height: auto; 
    overflow-x: hidden; 
}
#map{ 
    position: sticky; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: 1; 
}
#map svg{
    display: block; 
    width: 100%; 
    height: 100%;
}

#map-text {
    position: relative; 
    z-index: 2; 
}

.map-text-rect{
    background: rgba(250, 250, 250, 0.7);
    padding: 50px;
    border-radius: 5%;
    
}
.step {
  padding: 80vh 8rem; 
  width: 500px;
  
}

#Base  {
    opacity: 1; 
}

#_1988, #_1995, #_2004, #_2005, #_2020 {
    opacity: 0.2; 
    transition: opacity 0.25s ease;
}

#map svg .active   { opacity: 1; }


/* Boe*/

.boe-11,.boe-12,.boe-2,.boe-6{fill:none}
.boe-2{opacity:0.1}
.boe-12,.boe-16,.boe-2,.boe-6{stroke:#000}
.boe-11,.boe-16{stroke-miterlimit:10}
.boe-11{stroke:#757db4}
.boe-6{stroke-dasharray:11.93 11.93}
.boe-20,.boe-21,.boe-22{isolation:isolate}
.boe-16{fill:hsl(0, 0%, 100%)}
.boe-11,.boe-16{stroke-width:0.28px}
.boe-21,.boe-22,.boe-27{font-family: "Inter";font-weight: 550;;font-size: 16px;}
.boe-22,.boe-27{font-size:16px}

#Boe{
    margin-right: 20px;
}
#Marinetta, #Vallona, #Basson, #Scardovariinterno, #ScardovariGiulia, #Canarin, #Caleri, #Barbamarco, #Scardovarimare{
    fill-opacity: 0;    
    stroke-opacity: 0.2;
}


#Marinetta_pallino, #Vallona_pallino, #Basson_pallino, #Scardovariinterno_pallino, #ScardovariGiulia_pallino, #Canarin_pallino, #Caleri_pallino, #Barbamarco_pallino, #Scardovarimare_pallino{
    stroke-opacity: 1;
}
.is-active {
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
    
}

/* Salinity*/

.sal-2,.sal-3,.sal-4{isolation:isolate}.sal-4{font-size:20px}.sal-6{opacity:.1}.sal-12,.sal-6,.sal-9{fill:none;stroke:#000}.sal-9{stroke-dasharray:12.07 12.07}.sal-14,.sal-3{font-size:14px}.sal-14,.sal-3,.sal-4{font-family: "Inter";font-weight: 550;;font-size: 16px;}


#sal-scheme{
    margin-left: 30px;
}

#sal2021, #sal2024, #sal2025{
    stroke-opacity: 0.2;
    fill-opacity: 0;
}


#sal-quad-2025{
    fill-opacity: 0;
}

.is-active-sal {
    stroke-opacity: 1 !important;
    fill-opacity: 1 !important;
}

.container{
    display: flex;
    margin-left: 25vw;
    
}

/* highlighted words */

.worlds{
    width: 15vw;
    padding-right: 150px;
    padding-bottom: 80px ;
    color: #757db4;
    font-weight: 600;
    position: relative;
}

.worlds div {
  position: absolute;
  padding-top: 100px;
  width: 15vw;
}

#alluvial, #distributary, #natura, #cuneo, #river, #tidal, #probes, #lagoons, #parameters, #riparian, #shift, #halophytic{
    font-weight: 700;
    color: #757db4;
}

#worlds-alluvial, #worlds-distributary, #worlds-natura, #worlds-cuneo, #worlds-river, #worlds-tidal, #worlds-probes, #worlds-lagoons, #worlds-parameters, #worlds-riparian, #worlds-shift, #worlds-halophytic{
    opacity: 0;
    transition: opacity .2s;
}

.container:has(#alluvial:hover) #worlds-alluvial {
  opacity: 1;
}

.container:has(#distributary:hover) #worlds-distributary {
  opacity: 1;
}

.container:has(#natura:hover) #worlds-natura {
  opacity: 1;
}

.container:has(#cuneo:hover) #worlds-cuneo {
  opacity: 1;
}

.container:has(#river:hover) #worlds-river {
  opacity: 1;
}

.container:has(#tidal:hover) #worlds-tidal {
  opacity: 1;
}

.container:has(#probes:hover) #worlds-probes {
  opacity: 1;
}
.container:has(#lagoons:hover) #worlds-lagoons {
  opacity: 1;
}
.container:has(#parameters:hover) #worlds-parameters {
  opacity: 1;
}

.container:has(#riparian:hover) #worlds-riparian{
  opacity: 1;
}
.container:has(#shift:hover) #worlds-shift {
  opacity: 1;
}
.container:has(#halophytic:hover) #worlds-halophytic {
  opacity: 1;
}

/* Biodiversity */

g > g[id$="-card"] {
  display: none;
}

.hanging-indent {
    margin-left: 2em; 
    text-indent: -2em;
    line-height: 1.6;
}


/* Footer */
.footer{
    display: flex;
    background: #e2e2e2;
    padding: 30px;
}

.footer-section{
    width: 40vw;
    padding: 2cqh;
}

.footer-section-a{
    width: 15vw;
    padding: 2cqh;
}




/* Tablet*/
@media (max-width: 768px) {
    .text {
        width: 85vw;
        font-size: 16px;
        padding-top: 50px;
    }
    h1, h2 {
        width: 75vw;
    }

    .worlds{
    /* margin-left: 75vw; */
    width: 0vw;
    opacity: 0;
    }

}

/* Mobile*/
@media (max-width: 480px) {
    .text {
        width: 95vw;
        font-size: 14px;
        padding-top: 20px;
    }
    h1, h2 {
        width: 85vw;
    }

    .worlds{
    /* margin-left: 75vw; */
    width: 0vw;
    opacity: 0;
    }
}