/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 versions
*/

@keyframes dots {
    from { width: 0px }
    to { width: 4ch }
    }
@-webkit-keyframes dots {
    from { width: 0px }
    to { width: 4ch }
    }
@keyframes gliching {
    from, to,
    15%, 35%,
    65%, 95% { text-shadow: none; }
    20%, 25%, 30% { text-shadow: red -3px -1px 1px, cyan 3px 1px 1px; }
    23%, 27% { text-shadow: red -2px -1px 1px, cyan 2px 1px 1px; }
    70%, 80%, 90% { text-shadow: red -3px 2px 1px, blue 0 -2px 1px, green 3px 2px 1px; }
    75%, 85% { text-shadow: red -2px 2px 1px, blue 0 -3px 1px, green 2px 2px 1px; }
    }
@-webkit-keyframes gliching {
    from, to,
    15%, 35%,
    65%, 95% { text-shadow: none; }
    20%, 25%, 30% { text-shadow: red -3px -1px 1px, cyan 3px 1px 1px; }
    23%, 27% { text-shadow: red -2px -1px 1px, cyan 2px 1px 1px; }
    70%, 80%, 90% { text-shadow: red -3px 2px 1px, blue 0 -2px 1px, green 3px 2px 1px; }
    75%, 85% { text-shadow: red -2px 2px 1px, blue 0 -3px 1px, green 2px 2px 1px; }
    }
* {
    color: white;
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    }
body, 
html {
    height: 100%;
    font-size: 62.5%;
    }
.hidden { display: none; }

.title-card {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center center;
    place-content: center center;
    }
.title-card > .display {
    font-size: 15vmin;
    text-align: center;
    animation: gliching 10s ease 0s infinite forwards;
    -webkit-animation: gliching 10s ease 0s infinite forwards;
    }
.title-card > .dots {
    width: 0px;
    font-size: 7.5vmin;
    overflow: hidden;
    animation: dots 6s steps(4, end) 0s infinite forwards;
    -webkit-animation: dots 6s steps(4, end) 0s infinite forwards;
    }
.title-card > .autor {
    position: fixed;
    bottom: 0.2rem;
    right: 0.2rem;
    font-size: min(5vmin, 1.2rem);
    }