body {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.background {
    width: 4096px;
    height: 4096px;
    position: fixed;
    justify-self: center;
    align-self: center;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04), transparent);
    border-radius: 50%;
    animation: beat 4s infinite;
}

@keyframes beat {
    0%, 100% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

img {
    width: 256px;
    height: 256px;
    justify-self: center;
}

h1 {
    font-size: 8em;
    animation: zoom 1s ease-in-out infinite alternate;
}

@keyframes zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

h2 {
    font-size: 2em;
    color: var(--text-color-variant);
    animation: color 1s ease-in-out infinite alternate;
}

@keyframes color {
    0% { color: var(--text-color-variant); }
    100% { color: var(--anim-color); }
}

a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-color);
    width: 256px;
    height: 64px;
    border: solid 2px var(--text-color-variant);
    border-radius: 16px;
    padding: 2vh;
    justify-self: center;
}

a:hover, a.touched {
    background-color: var(--btn-hover-color);
    border-color: var(--text-color);
    transform: scale(.95);
}

a:hover svg, a svg:hover, a.touched svg, a svg.touched {
    fill: var(--text-color);
}

@media screen and (max-width: 420px) {
    h1 {
        font-size: 5em;
    }

    h2 {
       font-size: 1.5em;
    } 
}