:root {
    --scale-factor: 1.2;
    font-size: calc(16px * var(--scale-factor));
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
    flex-direction: column;
    font-family: 'Lato', sans-serif;
    background-color: #1f1f1f;
    color: white;
    padding: calc(1rem * var(--scale-factor));
}
h1 {
    font-size: calc(3rem * var(--scale-factor));
    margin: 0;
}
h2 {
    font-size: calc(2rem * var(--scale-factor));
    margin: calc(0.5rem * var(--scale-factor)) 0;
}
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #b1b1b1;
    height: calc(0.2rem * var(--scale-factor));
    font-size: calc(0.3em * var(--scale-factor));
    font-style: italic;
}

footer p {
    align-self: flex-end;
    position: fixed;
    bottom: 0;
}
.nonheader{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sub-subtitle {
    font-size: calc(.75rem * var(--scale-factor));
    margin: 0;
    font-style: italic;
    align-self: flex-end;
}
.icons {
    margin-top: calc(1rem * var(--scale-factor));
}
.icons a {
    color: white;
    margin: 0 calc(1rem * var(--scale-factor));
    font-size: calc(1.5rem * var(--scale-factor));
    text-decoration: none;
}
.icons img {
    width: calc(1.5rem * var(--scale-factor));
    height: calc(1.5rem * var(--scale-factor));
    filter: invert(100%);
}
.bounce {
    animation: bounce 1s infinite;
}
@keyframes bounce {
    0% {
        transform: scale(1) translateY(0);
    }
    10% {
        transform: scale(1.1, 0.9) translateY(0);
    }
    30% {
        transform: scale(0.9, 1.1) translateY(-0.5em);
    }
    50% {
        transform: scale(1.05, 0.95) translateY(0);
    }
    57% {
        transform: scale(1) translateY(-0.125em);
    }
    64% {
        transform: scale(1) translateY(0);
    }
    to {
        transform: scale(1) translateY(0);
    }
}
@media (max-width: 600px) {
    :root {
        font-size: calc(14px * var(--scale-factor));
    }
    h1 {
        font-size: calc(2.5rem * var(--scale-factor));
    }
    h2 {
        font-size: calc(1.5rem * var(--scale-factor));
    }
    .icons a {
        margin: 0 calc(0.5rem * var(--scale-factor));
        font-size: calc(1.2rem * var(--scale-factor));
    }
    .icons img {
        width: calc(1.2rem * var(--scale-factor));
        height: calc(1.2rem * var(--scale-factor));
    }
}