body {
    background-color: var(--gray-1);
}

/* ---------------------------------- title --------------------------------- */

#title {
    background-image: url("/img/stripe-pattern.png");
}

#title .content.columns {
    margin: 75px 0;
}

#title h1 {
    color: var(--primary-color);
    text-align: center;
    padding: 0 15px;
}

@media (max-width: 700px) {
    #title h1 {
        font-size: 3.157rem;
    }
}

@media (max-width: 540px) {
    #title h1 {
        font-size: 4.209rem;
    }

    #title .content.columns {
        flex-direction: column;
    }
}

@media (max-width: 370px) {
    #title h1 {
        font-size: 3.157rem;
    }
}

/* ---------------------------------- links --------------------------------- */

#links {
    background-color: var(--gray-1);
    text-align: center;
    padding: 50px 0;
}

#links .content.columns {
    align-items: flex-start;
}

#links li {
    font-size: 1.333rem;
    line-height: calc(1.333rem * 2);
}

#links a {
    display: inline-block;
    transition: transform ease 0.4s;
    text-decoration: none;
}

#links a:hover {
    transform: translateX(20px);
}

@media (max-width: 700px) {
    #links li {
        font-size: 1rem;
    }
}

@media (max-width: 540px) {
    #links .content.columns {
        flex-direction: column;
        align-items: center;
    }

    #links li {
        font-size: 1.333rem;
    }
}

@media (max-width: 370px) {
    #links li {
        font-size: 1rem;
    }
}

/* --------------------------------- footer --------------------------------- */

footer {
    background-color: var(--black);
}