/* BACKGROUND */
#emojidia div div, nav h2, nav:nth-of-type(1), nav:nth-of-type(2) a{
background-color: #f9f9f9}
main, h3, nav:nth-of-type(1) a, nav:nth-of-type(2) a:hover{
background-color: white}

/* BORDER */
nav:nth-of-type(2) a{
border: 1px solid #e9e9e9}
article, h3, header, header div, nav a, nav h2{
border-bottom: 1px solid #e9e9e9}
nav:nth-of-type(2) a:hover, .feriado{
border-color: #ff8c00}
nav:nth-of-type(2) a{
border-radius: 100%}

/* COLOR */
a, h3, em, i, section h4{
color: gray}
#hoje h4, a:hover, .hoje{
color: #ff8c00}

/* DISPLAY */
h3 em, header div a, header div p span{
display: inline-block}
h3, nav h2, nav:nth-of-type(2){
position: sticky;
top: 0}
nav:nth-of-type(2){
bottom: 0}

/* TEXT */
a:hover, nav a{
text-decoration: none}
h1, header >div >p, nav{
text-align: center}
h3 em{
font-style: normal;
font-weight: normal}

/* SCROLL */
article{
scroll-margin-top: 7em}
nav div{
scroll-margin-top: 4em}

/* SPACES */
body{
margin: 0}
h4{
margin: 1em 0}
article, h1, header, header >div >p, header div div, h3, nav h2, nav div, nav:nth-of-type(2), nav:nth-of-type(2) a, footer{
padding: 1em}

/* EXCEPTION */
*:focus{outline: none}
nav:nth-of-type(1) div{
display: grid;
grid-template-columns: repeat(8, 1fr)}
nav div:nth-of-type(1) a:nth-of-type(1){
grid-column-start: 4}
nav div:nth-of-type(2) a:nth-of-type(1){
grid-column-start: 7}
nav div:nth-of-type(3) a:nth-of-type(1){
grid-column-start: 7}
nav div:nth-of-type(4) a:nth-of-type(1){
grid-column-start: 3}
nav div:nth-of-type(5) a:nth-of-type(1){
grid-column-start: 5}
nav div:nth-of-type(6) a:nth-of-type(1){
grid-column-start: 8}
nav div:nth-of-type(7) a:nth-of-type(1){
grid-column-start: 3}
nav div:nth-of-type(8) a:nth-of-type(1){
grid-column-start: 6}
nav div:nth-of-type(2) a:nth-of-type(1){
grid-column-start: 4}
nav div:nth-of-type(10) a:nth-of-type(1){
grid-column-start: 4}
nav div:nth-of-type(11) a:nth-of-type(1){
grid-column-start: 7}
nav div:nth-of-type(12) a:nth-of-type(1){
grid-column-start: 2}

h1, header >div >p{
padding: 0}

@media only screen and (min-width: 1200px){

header, main, footer, nav:nth-of-type(2){
margin: auto;
width: calc(50% - 2em)}

header >div, nav:nth-of-type(1){
top: 0;
bottom: 0;
width: 25%;
position: fixed;}

header >div{
display: flex;
flex-direction: column;
justify-content: space-around;
left: 0}

header >div{
margin-left: 1em;
width: calc(25% - 1em)}

nav:nth-of-type(1){
right: 0;
overflow: auto}

nav:nth-of-type(2){
margin-top: 1em}

nav h2{
position: sticky;
top: 0}}