body,p,h1,ul,li, blockquote{
    padding: 0px;
    margin: 0px;
}

body {
    font-family: 'Vollkorn', serif , Georgia;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    display: block;
    border-radius: 5px;
}



/* GRID GERAL */

.estrutura {
    display: grid;
    /* dividindo  site em colunas com o grid */
    /* fr representa uma fração do espaço disponível no container do grid. */
    /* estou pedindo que na primeira coluna do site o limite max de px seja de 160 mantendo 1 fração da página na 1º coluna */
    /* para deixar a 2º coluna com o conteúdo maior solicitamos 3fr */
    /* para a 3º coluna de anuncios menos flexivel foi colocado em 300px pois quando dimunuir irá sumir to contener principal */
    grid-template-columns: minmax(160px, 1fr) 3fr 300px;
    /* agora iremos definir a area (espaço) que cada conteudo vai se conforme a seguencia das colunas*/
    grid-template-areas: 
    /* cl-01  cl-02  cl-03 - cabeçalho*/ 
     "header header header"
    /* cl-01   cl-02   cl-03 - corpo*/ 
     "sidenav content anuncios"
    /* cl-01  cl-02  cl-03 - rodapé*/ 
     "footer footer footer";
}

/* RESPONSIVIDADE */

@media (max-width:1200px)
{
    .estrutura{
        grid-template-areas:
        "header header header"
        "sidenav content content"
        "sidenav anuncios anuncios"
        "footer footer footer";
    }
}

@media (max-width: 760px){
    .estrutura {
        grid-template-columns: 100%;
        grid-template-areas: 
        "header"
        "sidenav"
        "content"
        "anuncios"
        "footer";
    }
}

/* HEADER */

.header{
    grid-area: header;
    background: linear-gradient(135deg, rgb(158, 158, 2), rgb(236, 236, 85));
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.logo {
    max-width: 200px;
}

.header nav ul {
    display: flex;
    flex-wrap: wrap;
}

.header nav a {
    display: block;
    padding: 15px;
    color: white;
    font-size: 1.125em;
    background: rgba(0,0,0,.1);
    border-radius: 5px;
    transition: 0.1s;
}

.header nav a:hover {
    background: rgba(0,0,0,.5);
}

.header li+li {
    margin-left: 30px;
}

/* RESPONSIVIDADE HEADER */

@media (max-width: 760px){
    .header {
        grid-template-columns: auto;
    }
    .logo {
        margin-bottom: 20px;
    }
    .header nav a {
        font-size: 1em;
    }
    .header li + li {
        margin-left: 10px;
    }
}


/* SIDENAV */


.sidenav {
    grid-area: sidenav;
    background: #fafbfc;
    padding: 30px;
}

.sidenav li a {
    display: block;
    min-width: 60px;
    max-width: 100px;
    margin: 0 auto 30px auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 15px 0px rgba(44,44,44,0.15);
    transition: .1s ease-out;
}

.sidenav li a:hover {
    background: rgb(222, 222, 92);
}

/* ANIMAÇÃO NA SETA */

@keyframes seta {
    from {
        right: 30px;
    }
    to{
        right: 20px;
    }
}

/* RESPONSIVIDADE SIDENAV */

@media (max-width: 760px){
    .sidenav{
        position: relative;
        /* overflow-x está selecionando o que sai da tela na barra horizontal 
        deixando ela em rolagem para direita e esquerda.
        ele está dizendo que se quebrar o tamanho total a sua coluna 
        eu quero que você crie essa barra de rolagem na horizontal 
        para não estourar o container */
        overflow-x: auto;
        /* webkit está falando com o navegador safari e versão mais 
        antiga do chrome */
        -webkit-overflow-scrolling: touch;
        /* ms está falando da microsoft... 
        esse ms-autohiding-scrolling é para esconder a barra 
        quando o arquivor for aberto no sistema da microsoft */
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    .sidenav::after{
        content: '→ ';
        position: absolute;
        top: 5px;
        right: 30px;
        /*  */
        animation: seta .5s ease-in 0s infinite alternate;
    }
    .sidenav ul {
        display: flex;
    }
    .sidenav ul li {
        flex:  1 0 60px;
    }
    .sidenav {
        padding: 0 30px;
    }
    .sidenav li a {
        margin: 30px 30px 30px 0;
    }
}

/* CONTENT */

.content{
    grid-area: content;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;

}

/* REPONSIVIDADE CONTENT */
@media (max-width: 600px){
    .content {
        grid-template-columns: auto;
    }
}

.col-wide {
   grid-column: 1/ -1; 
}

.imagem-1{
    grid-row: span 2;
    align-self: end;

}

.item-2{
    align-self: end;
}

/* ESTILOS CONTENT*/

P {
    font-size: 1.2em;
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: rgba(0,0,0,.7);
}

.informacoes p + p {
    margin-top: 30px;
}

/* TITULO */

.titulo{
    color:  rgb(222, 222, 92);
}

.titulo h1 {
    font-size: 3.75em;
    line-height: 1;
    font-weight: 700;
}

.titulo span {
    font-size: 0.875em;
    font-style: italic;
}

/* CARACTERISTICAS */

.caracteristicas {
    display: flex;
    align-items: flex-start;
}

.caracteristicas > div {
    width: 80px;
    text-align: center;
    border-radius: 5px;
    background: linear-gradient(135deg, rgb(158, 158, 2), rgb(236, 236, 85)) ;
    box-shadow: 5px 5px 15px 0px rgba(44,44,44,0.15);
    position: relative;
}

.caracteristicas > div:first-child {
    margin-right: 30px;
}

.caracteristicas span {
    display: block;
    color: rgb(222, 222, 92);
}

.numero {
    color: rgb(222, 222, 92);
    font-size: 3em;
    line-height: 1;
    margin: 10px auto;
}

.rotulo {
 background: white;
 border-radius: 0 0 5px 5px;
 padding: 5px 0;
 position: relative;
 top: 2px;
}

.destaque{
    font-size: 0.875em;
    color: rgb(222, 222, 92);
    max-width: 16em;
}

.citacao, .atributos {
    align-self: start;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 5px 5px 15px 0px rgba(44,44,44,0.15);
    background: linear-gradient(135deg, rgb(158, 158, 2), rgb(236, 236, 85));
}

.citacao p{
    font-size: 1.5em;
    font-style: italic;
    text-align: center;
    color: white;
    max-width: 500px;
    margin: 0 auto;
}

.atributos li {
    color: white;
    font-family: Courier, monospace;
    font-size: 1.125em;
    padding: 15px;
    border-bottom: 2px solid  rgb(222, 222, 92);;
}



/* ANUNCIOS */

.anuncios {
    grid-area: anuncios;
    background: #fafbfc;
    display: grid;
    align-content: start;
    padding: 30px;
    grid-gap: 30px;
    /* tentar o maximo de colunas no minimo de area */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) ;
}


/* FOOTER */

.footer {
    grid-area: footer;
    background: linear-gradient(135deg, rgb(158, 158, 2), rgb(236, 236, 85)) ;
}

.footer p {
    color: white;
    text-align: center;
    padding: 30px;
}