:root {
    --bg: #141426;
    --bg2: #1e1e34;
    --text: #fff;
    --text1: #000;
    --text2: #9c9cbb;
    --color1: #7350ff;
    --color2: #896ef3;
    --light: rgb(255 255 255 / 10%);
    --light2: rgb(255 255 255 / 30%);
    --dark: rgb(0 0 0 / 30%);
    --radius: 12px;
    --green: #43c79c;
    --red: #ff5089;
    --orange: #f90;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--bg);
}

.coming-soon {
    font-size: 3em;
    color: #ededed;
    cursor: default;
}

.letter {
    opacity: 0;
    animation: fadeIn 1s forwards;
    display: inline-block;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.1s; }
.letter:nth-child(3) { animation-delay: 0.2s; }
.letter:nth-child(4) { animation-delay: 0.3s; }
.letter:nth-child(5) { animation-delay: 0.4s; }
.letter:nth-child(6) { animation-delay: 0.5s; }
.letter:nth-child(7) { animation-delay: 0.6s; }
.letter:nth-child(8) { animation-delay: 0.7s; }
.letter:nth-child(9) { animation-delay: 0.8s; }
.letter:nth-child(10) { animation-delay: 0.9s; }
.letter:nth-child(11) { animation-delay: 1s; }
.letter:nth-child(12) { animation-delay: 1.1s; }
.letter:nth-child(13) { animation-delay: 1.2s; }
.letter:nth-child(14) { animation-delay: 1.3s; }
.letter:nth-child(15) { animation-delay: 1.4s; }

@media screen and (max-width: 600px) {
    .coming-soon {
        font-size: 2em;
    }
}