html.preload body {
  visibility: hidden;
}

/* Intro Cover Page */
/*#coverAllIntro {*/
/*    pointer-events: none;*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100vh;*/
/*    background: linear-gradient(to bottom right,*/
/*     #0b1c2c 0%,*/
/*     #0d2536 40%,*/
/*     #15334d 70%,*/
/*     #1f3e5d 100%);*/
/*    z-index: 100;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*    transition: none;*/
/*}*/

#coverAllIntro{
    display:none;
}

/* Fix fadeOut keyframe (you can't animate display) */
@keyframes fadeOut {
    to {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

#coverAllIntro.hide {
    animation: fadeOut .5s ease-out 5.5s forwards;
}

#titleContIntro {
    text-align: center;
}

#titleIntro {
    font-size: 70px;
    font-weight: bold;
    color: #eaeaf0; 
}

.char {
    display: inline-block;
    margin-right: 1px;
    opacity: 0;
    will-change: opacity, scale;
}

.space{
    margin: 0px 5px
}

@keyframes pulseInOut {
    0% {
    opacity: 0;
    }
    25% {
    opacity: 1;
    }
    53% {
        opacity: 0;
    }
    85%, 100% {
        opacity: 1;
    }
}

#titleIntro.reveal .char {
    animation: pulseInOut 4s ease-in;
    animation-delay: calc(var(--delay) * 90ms + 500ms);
    animation-fill-mode: forwards;
}

@media(max-width: 600px){
    #titleIntro{
    font-size: 50px;
    }
}

@media(max-width: 450px){
#titleIntro{
    font-size: 45px;
    }
}

@media(max-width: 400px){
#titleIntro{
    font-size: 35px;
    }
}