@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,900&display=swap');

*{
    font-family: 'Poppins', cursive;
}

body{
    color: azure;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    transition: opacity .5s ease;
}

body.fade-out{
    opacity: 0;
}

/* ================= TEXT ================= */

.greetings{
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
}

.greetings > span{
    display: inline-block;
    animation: heartbeat 1.2s ease-in-out infinite, shake 1.2s ease-in-out infinite;
}

@keyframes heartbeat{
    0%, 100%{
        color: #ff9ad6;
        text-shadow: 0 0 5px #ff4db8, 0 0 15px #ff4db8, 0 0 30px #ff4db8;
        transform: scale(1);
    }
    50%{
        color: #fff;
        text-shadow: 0 0 20px #ff4db8, 0 0 40px #ff4db8, 0 0 60px #ff4db8;
        transform: scale(1.08);
    }
}

/* getar halus */
@keyframes shake{
    0%,100%{ transform: translateX(0); }
    25%{ transform: translateX(1px); }
    75%{ transform: translateX(-1px); }
}

/* delay gelombang */
.greetings > span:nth-child(2){ animation-delay: .05s; }
.greetings > span:nth-child(3){ animation-delay: .1s; }
.greetings > span:nth-child(4){ animation-delay: .15s; }
.greetings > span:nth-child(5){ animation-delay: .2s; }
.greetings > span:nth-child(6){ animation-delay: .25s; }
.greetings > span:nth-child(7){ animation-delay: .3s; }
.greetings > span:nth-child(8){ animation-delay: .35s; }
.greetings > span:nth-child(9){ animation-delay: .4s; }
.greetings > span:nth-child(10){ animation-delay: .45s; }
.greetings > span:nth-child(11){ animation-delay: .5s; }
.greetings > span:nth-child(12){ animation-delay: .55s; }
.greetings > span:nth-child(13){ animation-delay: .6s; }
.greetings > span:nth-child(14){ animation-delay: .65s; }
.greetings > span:nth-child(15){ animation-delay: .7s; }
.greetings > span:nth-child(16){ animation-delay: .75s; }

/* ================= DESCRIPTION ================= */

.description{
    font-size: 1rem;
    text-align: center;
    margin-bottom: 20px;
}

/* ================= BUTTON ================= */

.button button{
    background: #ff4db8;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    animation: buttonPulse 1.2s ease-in-out infinite;
}

.button a{
    text-decoration: none;
    font-size: .9rem;
    color: white;
}

@keyframes buttonPulse{
    0%,100%{
        box-shadow: 0 0 5px #ff4db8, 0 0 15px #ff4db8;
        transform: scale(1);
    }
    50%{
        box-shadow: 0 0 20px #ff4db8, 0 0 40px #ff4db8;
        transform: scale(1.05);
    }
}

/* ================= MOBILE ================= */

@media screen and (max-width:574px){
    .greetings{
        font-size: 1.5rem;
    }
    .description{
        font-size: .9rem;
    }
}