body > div.title {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--lgray);


    h1 {
        font-family: "Playfair Display", serif;
        font-style: normal;
        color: var(--dgray);
        font-size: 48px;
        line-height: 48px;
        font-weight: 400;
        margin: 0 0 10px 0;
    }

    a {
        color: var(--dgray);
        text-decoration: none;

        transition: color .5s ease, background-size .5s ease, background-position .5s ease;
        background-image: linear-gradient(to bottom, var(--beige) 100%, var(--beige) 100%);
        background-repeat: no-repeat;
        background-size: 0px 1px;
        background-position: 0% 100%;
    }

    a:hover {
        color: var(--beige);
        background-size: 100% 1px;
    }
}