:root {
    --link-hover-transition-duration: 0.1s;
    --primary-bg-color: #000;
    --primary-text-color: #fff;
    --steam-hover-color: #66c0f4;
    --telegram-hover-color: #2ca5e0;
    --twitch-hover-color: #9146ff;
    --youtube-hover-color: #ff0000}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0}

body {
    -moz-user-select: none;
    align-items: center;
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    justify-content: center;
    min-height: 100vh;
    user-select: none;
}

.container {
    text-align: center}

h1 {
    font-size: 4rem;
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
}

h1 span {
    animation: singleLetterLowercase 2.7s cubic-bezier(0, 1, 1, 0) infinite;
    display: inline-block;
}

h1 span:nth-child(1) {
    animation-delay: 0s}

h1 span:nth-child(2) {
    animation-delay: 0.3s}

h1 span:nth-child(3) {
    animation-delay: 0.6s}

h1 span:nth-child(4) {
    animation-delay: 0.9s}

h1 span:nth-child(5) {
    animation-delay: 1.2s}

h1 span:nth-child(6) {
    animation-delay: 1.5s}

h1 span:nth-child(7) {
    animation-delay: 1.8s}

h1 span:nth-child(8) {
    animation-delay: 2.1s}

h1 span:nth-child(9) {
    animation-delay: 2.4s}

@keyframes singleLetterLowercase {

    0%,
    100% {
        text-transform: lowercase;
    }

    30%,
    70%,
    100% {
        text-transform: uppercase;
    }
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.social a {
    color: var(--primary-text-color);
    font-size: 2.5rem;
    transition: transform var(--link-hover-transition-duration) ease, color var(--link-hover-transition-duration) ease;
}

.social a:hover {
    transform: scale(1.2)}

.social a[title="Telegram"]:hover i {
    color: var(--telegram-hover-color)}

.social a[title="YouTube"]:hover {
    color: var(--youtube-hover-color)}

.social a[title="Twitch"]:hover {
    color: var(--twitch-hover-color)}

.social a[title="Steam"]:hover i {
    color: var(--steam-hover-color)}