/*
DOCUMENTAÇÃO DO ARQUIVO: css/base/global.css
Estilos compartilhados de corpo, imagens, links, listas, botões e .container. O contêiner ocupa 92% da largura, limitado a 1200px.
*/
/**
 * ==========================================================
 * Projeto.....: Cor & Papel
 * Arquivo.....: global.css
 * Versão......: 0.1.0
 * ----------------------------------------------------------
 * Descrição:
 * Estilos globais utilizados em todas as páginas do site.
 * ==========================================================
 */

/* ===========================
   BODY
=========================== */

/* Aplica as declarações abaixo a body. */
body{

    /* Família tipográfica; as fontes seguintes servem de alternativa se a primeira não estiver disponível. */
    font-family: var(--font-family);

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background: var(--color-background);

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color: var(--color-text);

}

/* ===========================
   IMAGENS
=========================== */

/* Aplica as declarações abaixo a img. */
img{

    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width:100%;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

}

/* ===========================
   LINKS
=========================== */

/* Aplica as declarações abaixo a a. */
a{

    /* Controla enfeites do texto, como o sublinhado dos links. */
    text-decoration:none;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:inherit;

}

/* ===========================
   LISTAS
=========================== */

/* Aplica as declarações abaixo a ul. */
ul{

    /* Controla os marcadores da lista; none remove os marcadores nativos. */
    list-style:none;

}

/* ===========================
   BOTÕES
=========================== */

/* Aplica as declarações abaixo a button. */
button{

    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:none;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:none;

    /* Formato do ponteiro; pointer indica ação e zoom-in indica possibilidade de ampliar. */
    cursor:pointer;

}

/* ===========================
   CONTAINER PADRÃO
=========================== */

/* Aplica as declarações abaixo a .container. */
.container{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:min(1200px, 92%);

    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin:auto;

}