:root {
    --m-font-size: 1.25rem;
    --col-sec: rgb(109, 109, 109);
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: var(--m-font-size);
    height: 100vh;
    animation: wavy 60s infinite alternate linear;
}

main {
    width: max-content;
    max-width: 80vw;
    height: 100%;
    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    font-size: 3rem;
    margin-bottom: .5rem;
}
h2 {
    font-size: 2rem;
    color: var(--col-sec);
}
header {
    margin-bottom: 1rem;
}

a {
    color: black;
}
a:visited {
    color: #777;
}

#comms {
    margin: 1.5rem 0;
}
#comms li {
    margin-bottom: 1.5rem;
}
#comms a {
    display: flex;
    align-items: center;

    text-decoration: underline #555 dashed;
    text-underline-offset: 0.5rem;
}
#comms img {
    margin-right: 1rem;
    width: var(--m-font-size);
    height: var(--m-font-size);
}

@media (min-width: 960px) {
    :root {
        --m-font-size: 1.75rem;
    }
}

@keyframes wavy {
    0%, 100% {
        background-color: #fdf2e2;
    }
    25% {
        background-color: #ffc0c0;
    }
    50% {
        background-color: #cdede0;
    }
    75% {
        background-color: #f5c6ef;
    }
}