body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background: #f7f9fa;
}

html {
        font-size: 10px;
}

h3.titulo {
        font-family: 'Playfair Display', serif;
        font-size: 3rem;
        padding: 1rem 0;
        text-align: center;
}

p {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.4rem;
}

h1.site-title {
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: white;
        font-size: 1.6rem;
        font-weight: 500;
}

h1.site-title a {
        color: white;
        text-decoration: none;
}

.site-logo img  {
        max-height: 4.8rem;
}

.ilustracao {
        height: 40vh;
        background-image: url("https://swarmdev.tic.ufrj.br/manut.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 1rem;
}

header.site-logo {
        padding: 0.8rem 2rem;
        margin: 0 auto;
        background: #003366;
        display: flex;
        grid-gap: 1.6rem;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 5px rgba(1, 28, 68, 0.35);
        -webkit-box-shadow: 0 3px 5px rgba(1, 28, 68, 0.35);
}

.coordcom img {
        margin: 2rem auto;
        width: calc(100% - 6rem);
}

main {
        max-width: 64rem;
        margin: auto;
        text-align: center;
        width: calc(100% - 4rem);
}

footer {
        background: #444648;
        color: white;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        grid-gap: 2rem;
        align-items: center;
        margin-top: 5rem;
        justify-content: center;
}

footer img {
        height: 90%;
}

@media (min-width: 721px) {

        header.site-logo {
                padding: 0.8rem 4rem;
                grid-gap: 3.2rem;
        }

        h1.site-title {
                font-size: 1.9rem;
        }

        h2.titulo {
                font-size: 4.2rem;
        }

        .coordcom img {
                max-height: 65px;
                width: auto;
        }

        footer {
                flex-direction: row;
                grid-gap: 3.2rem;
                padding: 1.8rem 4rem;
                justify-content: start;
        }

        footer img {
                height: auto;
        }

}