:root {
    --font-base: 'Nunito Sans', Arial, sans-serif;
    --font-title: 'Merriweather', Georgia, serif;
    --font-special: 'Cormorant Garamond', Georgia, serif;

    --mcc-azul: #2457a6;
    --mcc-azul-escuro: #173a70;
    --mcc-amarelo: #f2b84b;
    --mcc-vermelho: #d94b5f;
    --mcc-verde: #3fa66b;
    --mcc-roxo: #7b5dbb;

    --mcc-texto: #1f2933;
    --mcc-texto-suave: #6b7280;
    --mcc-fundo: #fffaf2;
    --mcc-branco: #ffffff;
    --mcc-linha: rgba(31, 41, 51, 0.12);

    --mcc-raio: 20px;
    --mcc-sombra: 0 14px 35px rgba(20, 34, 60, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-base);
    color: var(--mcc-texto);
    background: var(--mcc-fundo);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--mcc-azul);
    text-decoration: none;
}

a:hover {
    color: var(--mcc-azul-escuro);
}

h1,
h2,
h3,
h4,
h5,
h6,
.titulo,
.section-title,
.mcc-brand {
    font-family: var(--font-title);
}

.de-colores,
.frase-de-colores,
.mcc-decolores {
    font-family: var(--font-special);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.no-select {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}