:root {
    --bg-color: #222;
    --color: #222;
    --typewriterSpeed: 5s;
    --typewriterCaracters: 31;
}
@keyframes typewriter {
    to {left: 100%;}
}
@keyframes blinker {
    to {background: none;}
}
@keyframes fadeInUp {
    to {opacity: 1; transform: translateY(0);}
}
@keyframes lienApparition {
    0% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 1; color: aqua;}
}
body {
    margin: 0;
    font-family: Tahoma;
    min-height: 100vh;
    display: grid;
    place-content: center;
    text-align: center;
    overflow: hidden;
    background-color: var(--bg-color);
}
h1 {
    position: relative;
    width:500px;
    left:20px;
    color: aquamarine;
    filter: blur(1px);
}
.subtitle {
    color: red;
    font-size: 1.5em;
    font-weight:bolder;
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 1s ease calc(var(--typewriterSpeed) + 6s) forwards;
}
h1::before, h1::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
h1::before { 
    background: var(--color);
    animation: typewriter var(--typewriterSpeed) 4s steps(var(--typewriterCaracters)) forwards;
}
h1::after { 
    width: 0.200em;
    background-color: aquamarine;
    filter: blur(1px);
    animation: typewriter var(--typewriterSpeed) 4s steps(var(--typewriterCaracters)) forwards,
               blinker 750ms 3s steps(var(--typewriterCaracters)) infinite;
}
.lien {
    opacity: 0;
    animation: lienApparition 14s linear forwards;
}
.lien > a {
    color: aliceblue;
}
.lien > a:hover {
    color: aqua;
}