body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    background-color: #111;
}

.grainy-background-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    filter: url(#grainy);
    background-color: #060038;
    background-image: radial-gradient(ellipse at 34% 0%, #3f3e99e7 0%, #0004ff00 74%), radial-gradient(ellipse at 62% 100%, #12133b 0%, #5763d200 72%);
    opacity: 1;
}

main{
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    /***
    height: 100vh;
    width: 100vw;
    ***/
}

[class^="letter"] {
    display: inline-block;
    transition: opacity 3s ease;
}
.letter-0 {
    transition-delay: 0.2s;
}
.letter-1 {
    transition-delay: 0.4s;
}
.letter-2 {
    transition-delay: 0.6s;
}
.letter-3 {
    transition-delay: 0.8s;
}
.letter-4 {
    transition-delay: 1.0s;
}
.letter-5 {
    transition-delay: 1.2s;
}
.letter-6 {
    transition-delay: 1.4s;
}
.letter-7 {
    transition-delay: 1.6s;
}
.letter-8 {
    transition-delay: 1.8s;
}
.letter-9 {
    transition-delay: 2.0s;
}
.letter-10 {
    transition-delay: 2.2s;
}
.letter-11 {
    transition-delay: 2.4s;
}

h1 {
    color: #ddd;
    font-size:1.8rem;
    visibility: hidden;
    transform: translate(-50%, -50%);
    text-shadow: 0px 0px 55px #9e8aff;
}

h1.transition-in {
    visibility: visible;
}

h1 [class^="letter"] {
    opacity: 0;
}

h1.transition-in [class^="letter"] {
    opacity: 1;
}


.text-gradient {
    color: #201648; 
    background-image: linear-gradient(4deg,  #cdd4d9 , #A8B2C1 , #cdd4d9 , #CEEDFF , #D6F2FF , #fff ); 
    background-clip: text; 
}

/*
@media (width < 800px) {
    h1 {
        font-size:3.2rem;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}


@media (orientation: vertical) and (width < 800px) {
    main{
        align-items: end;
    }
}

@media (orientation: horizontal) and (width < 800px) {
    main{
        align-items: end;
    }
}
*/