:root {
    --base-unit: 8px;
    /* small */
    --size-25: calc(.25*var(--base-unit));
    --size-50: calc(.5*var(--base-unit));
    --size-75: calc(.75*var(--base-unit));
    --size-100: var(--base-unit);
    /* medium */
    --size-150: calc(1.5*var(--base-unit));
    --size-200: calc(2*var(--base-unit));
    --size-250: calc(2.5*var(--base-unit));
    --size-300: calc(3*var(--base-unit));
    /* large */
    --size-400: calc(4*var(--base-unit));
    --size-500: calc(5*var(--base-unit));
    --size-600: calc(6*var(--base-unit));
    --size-800: calc(8*var(--base-unit));
    --size-1000: calc(10*var(--base-unit));
}

* {
    margin: 0;
}

.homepage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr auto auto;
    grid-column-gap: 0;
    grid-row-gap: 2em;
    justify-items: center;
    font-family: monospace;
    user-select: none;
}

.homepage__header {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: center;
    line-height: 1.1;
    /* line-height: var(--size-250); */
}


main {
    grid-area: 2 / 2 / 3 / 3;
}

footer {
    grid-area: 3 / 2 / 4 / 3;
    justify-self: center;
    align-self: end;
    font-size: 1.2em;
    /* font-size: var(--size-250); */
}

.header__title {
    font-size: 50vw;
}

.header__kicker {
    justify-self: center;
    align-self: stretch;
}

.header__kicker > p:nth-child(1) {
    font-size: 21.428571vw;
    line-height: .3;
}
.header__kicker > p:nth-child(2) {
    font-size: 16.666666vw;
    line-height: 1.3;
}
.header__kicker > p:nth-child(3) {
    font-size: 12.5vw;
}
.header__kicker > p:nth-child(4) {
    font-size: 37.5vw;
    line-height: .65;
}
.header__kicker > p:nth-child(5) {
    font-size: 50vw;
    line-height: .95;
}

.content__link {
    text-align: center;
    font-size: 3em;
    margin-bottom: 1em;
}

.content__link > a:visited {
    color: blue;
}

footer {
    height: 60px;
    line-height: 40px;
    overflow: hidden;
    color: black;
}
.footer-container {
    overflow: hidden;
    height: 40px;
    padding: 0 40px;
}
.footer-container__text {
    display: inline;
    float: left;
    margin: 0;
    font-size: 1.1em;
}
.footer-container__list {
    margin-top: 0;
    padding-left: 120px;
    text-align: left;
    list-style: none;
    -webkit-animation-name: change;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: change;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.footer-container__list-item {
    line-height: 40px;
    margin: 0;
    background-color: black;
    color: white;
    text-decoration: none;
    text-align: center;
}
.footer-container__list-item > a {
    color: white;
    padding: 10px 10px;
}
.footer-container__list-item > a:visited {
    color: white;
}
@keyframes change {
    0%, 12.66%, 100% {
        transform: translate3d(0, 0, 0);
   }
    16.66%, 29.32% {
        transform: translate3d(0, -25%, 0);
   }
    33.32%, 45.98% {
        transform: translate3d(0, -50%, 0);
   }
    49.98%, 62.64% {
        transform: translate3d(0, -75%, 0);
   }
    66.64%, 79.3% {
        transform: translate3d(0, -50%, 0);
   }
    83.3%, 95.96% {
        transform: translate3d(0, -25%, 0);
   }
}

/* Media queries */

@media only screen and (min-width: 480px) {
    .header__title {
        font-size: calc(.6*50vw);
    }
    .header__kicker > p:nth-child(1) {
        font-size: calc(.6*21.428571vw);
    }
    .header__kicker > p:nth-child(2) {
        font-size: calc(.6*16.666666vw);
    }
    .header__kicker > p:nth-child(3) {
        font-size: calc(.6*12.5vw);
    }
    .header__kicker > p:nth-child(4) {
        font-size: calc(.6*37.5vw);
    }
    .header__kicker > p:nth-child(5) {
        font-size: calc(.6*50vw);
    }
}

@media only screen and (min-width: 768px) {
    .header__title {
        font-size: calc(.4*50vw);
    }
    .header__kicker > p:nth-child(1) {
        font-size: calc(.4*21.428571vw);
    }
    .header__kicker > p:nth-child(2) {
        font-size: calc(.4*16.666666vw);
    }
    .header__kicker > p:nth-child(3) {
        font-size: calc(.4*12.5vw);
    }
    .header__kicker > p:nth-child(4) {
        font-size: calc(.4*37.5vw);
    }
    .header__kicker > p:nth-child(5) {
        font-size: calc(.4*50vw);
    }
}

@media only screen and (min-width: 1024px) {
    .header__title {
        font-size: calc(.2*50vw);
    }
    .header__kicker > p:nth-child(1) {
        font-size: calc(.2*21.428571vw);
    }
    .header__kicker > p:nth-child(2) {
        font-size: calc(.2*16.666666vw);
    }
    .header__kicker > p:nth-child(3) {
        font-size: calc(.2*12.5vw);
    }
    .header__kicker > p:nth-child(4) {
        font-size: calc(.2*37.5vw);
    }
    .header__kicker > p:nth-child(5) {
        font-size: calc(.2*50vw);
    }
}