/* index.css */

/* 
font-family: 'Oswald', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Orbitron', sans-serif;
font-family: 'Paytone One', sans-serif;
font-family: 'Uncial Antiqua', sans-serif;
font-family: 'Della Raspira', sans-serif;
font-family: 'Righteous', sans-serif;
font-family: 'Ranchers', sans-serif;
font-family: 'Erica One', sans-serif;
*/

@font-face {
    font-family: FuturaXB;
    src: url(../fonts/FuturaXBlkBT.ttf);
}



body {
    
    
    font-family: FuturaXB, Arial, Helvetica, sans-serif;
    background: black;
    color:white;
    min-height: 100vh;

}

nav{
    width: 100%;
    
    background-color: rbga(255, 255, 255, 0.5);
    border-bottom: 1px solid rbga(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    margin-bottom: 2rem;
    animation: fadeInOutNavBar 30s ease-in; 
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    
}

.logo{
    font-family: FuturaXB, Arial, Helvetica, sans-serif;
    font-size: 2.375rem;
    font-weight: 700;
    color: silver;
    letter-spacing: 1px;

    box-sizing: border-box;
    margin-left: 45px;
}

.nav-links{
    list-style: none;
    display: flex;
    gap: 2rem;
    font-size: 1.25rem;
    color: #bbb;
}

.nav-links li a {
    position: relative;
    text-decoration: none;
    color: #FFF;
    font-weight: 500;
    transition: 0.3s;
}

.nav-links li a:hover{
    color: #f66;
    text-shadow: 0 0 10px lightskyblue;
}

/* .btns{
    display: flex;
}

.btn{
    padding: 0.5rem 1.5rem;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1rem;
    background: #38bdff;
    color: navy;
    box-shadow: 0 0 15px #38bdff;
    border: none;
    cursor: pointer;
    transition: 0.3s;

} */

/* .btn:hover{
    background: darkred;
    box-shadow: lightblue;
} */

.message-container {
    display: flex;
    align-items: center;    /* vertical center */
    justify-content: center; /* horizontal center */
    font-family: FuturaXB, Arial, sans-serif;
    width: 100%;
    z-index: 0;  
    pointer-events: none;  
}


.message {
    position: absolute;
    inset: 0;
    font-size: 4rem;
    color: #f0f0f0;
    text-align: center;
    display: flex;
    align-items: center;    /* vertical center */
    justify-content: center; /* horizontal center */
      opacity: 0;
      /* Total cycle = 4 messages × 4s each = 16s */
      animation: fadeInOut 40s ease-in-out 1;
    }

    .message2 {
    position: absolute;
    inset: 0;
    font-size: 4rem;
    color: #f0f0f0;
    text-align: center;
    display: flex;
    align-items: center;    /* vertical center */
    justify-content: center; /* horizontal center */
      opacity: 0;
      /* Total cycle = 4 messages × 4s each = 16s */
      animation: fadeInOutHero 5s ease-in 1;
      animation-fill-mode: forwards;
      animation-delay: 40s;
    }
    
    .graphic {
        vertical-align: middle;
    }

    .message:nth-child(1) { animation-delay: 0s;  }
    .message:nth-child(2) { animation-delay: 8s;  }
    .message:nth-child(3) { animation-delay: 16s;  }
    .message:nth-child(4) { animation-delay: 24s; }
    .message:nth-child(5) { animation-delay: 32s; }




    @keyframes fadeInOut {
      0%   { opacity: 0; }
      10%  { opacity: 1; }
      20%  { opacity: 1; }
      32%  { opacity: 0; }

    }

    @keyframes fadeInOutNavBar{
    
        0%  {opacity: 0;}
        25% {opacity: 25%;}
        75% {opacity: 75%;}
        100% {opacity: 1;}

    }

    @keyframes fadeInOutHero{
    
        0%  {opacity: 0;}
        50% {opacity: 25%;}
        75% {opacity: 75%;}
        100% {opacity: 1;}

    }