@charset "UTF-8";

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root{
    --tamanho_header: 4rem;
    --tamanho_h1: 1.5rem;

    --height-main: calc(100vh - var(--tamanho_header) - var(--height_footer));

    --height_botoes: 4rem;
    --width_botoes: 7rem;
    --botoes_por_fileira_e_coluna: 2;
    --margin_botoes: 1.5rem;

    --height_footer: 4rem
}

/*Header*/ 

header{
    display: grid;
    place-items: center;
    min-height: var(--tamanho_header);
    width: 100%;
    text-align: center;
}

header > h1{
    font-size: var(--tamanho_h1);
    font-weight: bolder;
    letter-spacing: 1px
}

/*Main*/

main{
    display: flex;
    min-height: var(--height-main);
    width: 100%;

    justify-content: center;
    align-items: center;
}

section{
    display: flex;
    min-height: calc( (var(--height_botoes) * var(--botoes_por_fileira_e_coluna)) + (var(--margin_botoes) * 4) );
    max-width: calc( (var(--width_botoes) * var(--botoes_por_fileira_e_coluna)) + (var(--margin_botoes) * 4) );

    justify-content: space-evenly;
    align-content: space-evenly;
    flex-wrap: wrap;
}

section > div{
    height: var(--height_botoes);
    width: var(--width_botoes);
    background-color: rgb(0, 115, 255);
    margin: var(--margin_botoes);

    text-align: center;;
    line-height: var(--height_botoes);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

section div:nth-child(1){
    outline: 3px solid rgb(0, 35, 60);
    outline-offset: -1rem;
}

section div:nth-child(2){
    outline: 3px solid rgb(0, 35, 60);
    outline-offset: 1rem;
}

section div:nth-child(3){
    outline: 3px solid transparent;
    outline-offset: calc((var(--height_botoes) / 2) * -1);

    transition: all linear 300ms;
}

section div:nth-child(3):hover{
    outline: 3px solid rgb(0, 35, 60);
    outline-offset: .5rem;
}

section div:nth-child(4){
    outline: 3px solid rgb(156, 107, 0);
    outline-offset: .5rem;
    box-shadow: 0 0 0 .5rem rgb(68, 46, 0),
                inset 0 0 .3rem rgb(61, 49, 26);
    background-color: wheat;
}

/*Footer*/

footer{
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--height_footer);
}

footer > p{
    padding: 5px;
    display: flex;
    font-size: 1rem;
    transition: all 200ms linear;

    background-color: transparent;
    box-shadow: 0 0 0 0rem transparent,
                inset 0 0 0rem transparent;
    outline: 0px solid transparent;
    outline-offset: 0rem;
}

footer:hover p{
    background-color: wheat;
    box-shadow: 0 0 0 .5rem rgb(68, 46, 0),
                inset 0 0 .3rem rgb(61, 49, 26);
    outline: 3px solid rgb(156, 107, 0);
    outline-offset: .5rem;
}