@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
}


body{
    margin:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background: radial-gradient(circle at top, #0b1a3a, #000000);

    font-family:'Montserrat', sans-serif;
}


.title {
    font-size: clamp(25px, 9vw, 60px);
    font-weight: 700;
    color: #e6f2ff;
    letter-spacing: clamp(10px, 0.5vw, 5px);
    margin-bottom: 30px;
}


img{
    max-width:90vw;
    max-height:90vh;
}


.subtitle {
    font-size: clamp(16px, 4vw, 24px);
    font-weight: 300;
    color: #7aa6ff;
    margin-top: 30px;
    /* line-height: 1.4;  */
}


.title span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: fadeInUp 1.4s forwards;
    

    --i: 0;
    animation-delay: calc(var(--i) * 0.10s);
}

.title span:nth-child(1) { --i: 0; }
.title span:nth-child(2) { --i: 1; }
.title span:nth-child(3) { --i: 2; }
.title span:nth-child(4) { --i: 3; }
.title span:nth-child(5) { --i: 4; }
.title span:nth-child(6) { --i: 5; }
.title span:nth-child(7) { --i: 6; }


@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}