*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}



.hero{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(223, 207, 177, 0.11),rgba(179, 166, 146, 0.171));
    position: relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;

}


.content{
    color: #fff;
    text-align: center;
    
    
}

.content h1{
    font-size: 160px;
    margin-bottom: 20px;
    font-weight: 600;
    /* start with transparent stroke so it can fade in/out */
    -webkit-text-stroke: 2px transparent;
    transition: color 0.8s ease, -webkit-text-stroke-color 0.8s ease;
}


.content a{
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border : 2px solid #fff;
    padding: 14px 70px;
    border-radius: 50px;
    margin-top: 20px;
}

.back-video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

@media (min-aspect-ratio: 16/9){
    .back-video{
        width: 100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9){
    .back-video{
        width: auto;
        height: 100%;
    }
}

/* Background overlay */

#welcomeOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    animation:fadeIn 0.4s ease;
}

/* Popup card */

#welcomeCard{
    background:#ffffff;
    width:340px;
    max-width:90%;
    padding:28px;
    border-radius:16px;
    text-align:center;
    font-family:system-ui,-apple-system,sans-serif;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    animation:popIn 0.35s ease;
}

#welcomeCard h2{
    margin-top:0;
    font-size:22px;
}

#welcomeCard p{
    font-size:14px;
    color:#555;
}

/* Animations */

@keyframes popIn{
    from{transform:scale(0.9);opacity:0;}
    to{transform:scale(1);opacity:1;}
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}