*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Georgia, serif;
    color:white;
    overflow-x:hidden;
}

/* ========================= */

#bg-video{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;
}

/* ========================= */

.overlay{

    position:relative;

    z-index:10;
}

/* ========================= */

.panel{

    width:75%;

    max-width:900px;

    margin:150px auto;

    padding:60px;

    min-height:70vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(12px);

    border-radius:20px;

    box-shadow:0 10px 40px rgba(0,0,0,.5);

    opacity:0;

    transform:translateY(80px);

    transition:all 1.3s ease;
}

.panel.show{

    opacity:1;

    transform:translateY(0);
}

.hero{

    text-align:center;
}

.hero h1{

    font-size:2rem;
    font-weight:normal;
}

.hero h2{

    font-size:4rem;

    margin:20px 0;

    letter-spacing:4px;
}

.quote{

    font-style:italic;

    font-size:1.3rem;
}

h2{

    margin-bottom:25px;

    font-size:2.4rem;
}

p{

    font-size:1.2rem;

    line-height:1.8;
}

footer{

    text-align:center;

    padding:80px;

    font-size:1.2rem;

    letter-spacing:2px;

    background:rgba(0,0,0,.35);
}

@media(max-width:900px){

.panel{

    width:90%;

    padding:35px;

}

.hero h2{

    font-size:2.5rem;
}

}