.hero{

    height:100vh;

    background-size:cover;

    background-position:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding-left:clamp(20px,10vw,120px);

    color:white;

}


.hero h1{

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(45px,8vw,80px);

    font-weight:400;

    max-width:700px;

}


.read-button{

    margin-top:18px;

    background:#0071e3;

    color:white;

    text-decoration:none;

    font-size:17px;

    font-weight:500;

    padding:10px 28px;

    border-radius:999px;

    border:2px solid #0071e3;

    width:fit-content;

    transition:all .25s ease;

}


.read-button:hover{

    background:rgba(255,255,255,0.12);

    color:#0071e3;

    border-color:#0071e3;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}



#danish{

    background-image:url("../images/dannebrog.jpg");

}



#curdled{

    background-image:url("../images/japanese-street.jpg");

}



.separator{

    height:24px;

    background:white;

}



.hero.fade-in{

    opacity:0;

    transform:translateY(40px);

}



.hero.fade-in.visible{

    opacity:1;

    transform:translateY(0);

}



@media(max-width:600px){


    .hero{

        height:85vh;

        padding-left:20px;

        padding-right:20px;

    }


    .hero h1{

        font-size:clamp(38px,12vw,55px);

    }


    .read-button{

        font-size:15px;

        padding:9px 24px;

    }

}