@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&display=swap');

:root{
    --fs-xl: clamp(3.38rem, calc(-2.42rem + 12.06vw), 6.63rem);
    --fs-l: clamp(0.69rem, calc(-0.54rem + 2.55vw), 1.38rem);
    --fs-m: clamp(0.75rem, calc(0.08rem + 1.39vw), 1.13rem);
    --fs-s: clamp(0.75rem, calc(0.53rem + 0.46vw), 0.88rem);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
}

.navbar{
    top: 0;
    padding-top: 3rem;
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: space-around;
    color: white;
    font-size: var(--fs-m);

    animation: fade-in 3.5s;
}

.navbar a{
    text-decoration: none;
    color: white;
    opacity: 1;
}

/* HOVER EFFECT */
.navbar a:hover{
    opacity: .8;
}

.center-text{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    background: rgba(0, 0, 0, 0.437);
}

.center-text h1{
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1em;

    animation: fade-in 1s ;
}

.center-text p{
    font-size: var(--fs-l);
    font-weight: 600;

    animation: fade-in 2.25s;
}

.video-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    background: rgb(210, 210, 210);  

}

.image-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    background: rgb(210, 210, 210);  
}


.credits{
    bottom: 0;
    margin-bottom: 3rem;
    margin-left: -0.5em;
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: space-around;
    color: grey;
    font-size: var(--fs-s);

    animation: fade-in 3.5s;
}


/* FADE IN ANIMATION */

@keyframes fade-in{
    0%{opacity: 0;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}