:root {
    --font-head: 'Bebas Neue', sans-serif;
    --font-text: 'Segoe UI', Roboto, Helvetica, Arial;

    --default: #21211f;
    --env-prm: #ffffff;
    --env-sec: #94a4aa;

    --acc-VT: #4b32a7;
    --acc-PK: #a9347e;
    --acc-RD: #e50914;
    --acc-OG: #f29722;
    --acc-YE: #e5e128;
    --acc-TQ: #00aeef;

    --height: 1.2em;
}

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

body {
    font-family: var(--font-text);
    color: var(--env-prm);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--default);
    background-image: url('assets/background.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    font-family: var(--font-head);
    font-size: 5rem;
    font-weight: 400;
    font-style: normal;
    line-height: var(--height);
}

footer {
    padding-top: var(--height);
    color: var(--env-sec);
}

.acc-VT {
    color: var(--acc-purple);
}

.acc-PK {
    color: var(--acc-PK);
}

.acc-RD {
    color: var(--acc-RD);
}

.acc-OG {
    color: var(--acc-OG);
}

.acc-YE {
    color: var(--acc-YE);
}

.acc-TQ {
    color: var(--acc-TQ);
}

.container {
    padding: 2rem 5rem;
}

/* Wrapper for .dynamic-text */
.title {
    display: flex;
    align-items: center;
}

/* ** Animation ** */
.dynamic-text {
    height: var(--height);
    /* margin-left: 4px; */
    color: var(--accent-color);
    font-weight: bold;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.items {
    display: flex;
    flex-direction: column;
    animation: slider 9s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

.item {
    height: var(--height);
    display: block;
}

@media (max-width: 480px) {
    .title {
        font-size: calc(1.5 * var(--height));
    }
}

/* ** Keyframes **
    var n = number of words
    var i = iteration from 0 to number of words

    Start of pause = i * ( 100 / n )
    End of pause = i * ( 100 / n ) + ( 100 / ( n + 1 ) )

    NOTE: 100% - slide to repeat the first word
*/
@keyframes slider {

    0%,
    20% {
        transform: translateY(calc(-4 * var(--height)));
    }

    25%,
    45% {
        transform: translateY(calc(-3 * var(--height)));
    }

    50%,
    70% {
        transform: translateY(calc(-2 * var(--height)));
    }

    75%,
    95% {
        transform: translateY(calc(-1 * var(--height)));
    }

    100% {
        transform: translateY(calc(-0 * var(--height)));
    }
}


#test {
    content: 'Co to je?';
}