html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    background-attachment: fixed;
    background-color: #f169b4;
    background-image: linear-gradient(180deg,
        /*RED*/#cf0f0f 16.66%,
        /*ORANGE*/#ffa000 16.66% 33.33%,
        /*YELLOW*/#ffd200 33.33% 50%,
        /*GREEN*/#36a030 50% 66.66%,
        /*BLUE*/#1b77cd 66.66% 83.33%,
        /*PURPLE*/#4d148c 83.33%);
}

.spacer {
    height: 2rem;
    flex-shrink: 0;
    align-self: normal;
}

h1, h2 {
    font-family: "Calligraffitti", cursive;
    line-height: 1.2;
}

h1 {
    margin: auto .5rem 1rem .5rem;
    font-size: 13vw;
}

h2 {
    margin: 2rem .5rem auto .5rem;
    font-size: 6.5vw;
}

@media (max-width: 750px) {
    h1 {
        font-size: 5.9rem;
    }

    h2 {
        font-size: 3rem;
    }
}

p {
    margin: 2rem .5rem 0 .5rem;
    border-radius: .5em;
    padding: .5em;
    background: rgba(255, 255, 255, .3);
    font-family: sans-serif;
}