body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CCCCCC; 
}

.container {
    background-color: #CCCCCC;
    padding: 50px;
    border-radius: 10px;
}
@font-face { 
    font-family: 'Pusab';
    src: url('/fonts/pusab.ttf') format('truetype'); 
}
.rainbow-text {
    font-size: 108px;
    text-align: center;
    color: transparent;
    font-family: 'Pusab'; 
    -webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: black;
    animation: rainbow-animation 1s linear infinite; 
}

@keyframes rainbow-animation {
    0% {
        color: #FF0000;
    }
    16.666% {
        color: #FFFF00;
    }
    33.333% {
        color: #00FF00;
    }
    50% {
        color: #00FFFF;
    }
    66.666% {
        color: #0000FF;
    }
    83.333% {
        color: #FF00FF;
    }
    100% {
        color: #FF0000;
    }
}

/* mobile test */

@media screen and (max-width: 600px) {
    .rainbow-text {
        font-size: 10vw;
        -webkit-text-stroke-width: 1px;
    }
}
.mobile-padding .rainbow-text {
    padding: 0 20px; 
}