body , p, h1, ul, li, blockquote {
   padding: 0px;
   margin: 0px;
}
body {
    font-family: "volkorn" ,Georgia , serif;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    display: block;
    width: 100%;
    border-radius: 5px;
   

}


/*GRID GERAL */
.estrutura {
 display: grid;
 grid-template-columns: minmax(160px, 1fr) 3fr 300px;
 grid-template-areas: 
   "header header header"
   "sidenav content anuncios"
   "footer footer footer"
 ;
}
@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, #8844ee, #b07dfb);
    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: 10px;
    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;
} 
@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: #b07dfb;
}
@keyframes seta {
    from{
        right: 30px;
    }
    to {
        right: 20px;
    }
}
@media (max-width: 760px) {
    .sidenav {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    .sidenav ::after {
        content: '→';
        position: absolute;
        top: 5px;
        right: 30px;
        color:rgba(0,0,0,.3);
        animation: seta .5s ease-in 0s infinite
        alternate;
       }
    .sidenav ul{
        display: flex;
       }
       .sidenav  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;
}
@media  (max-width:600px) {
    .content {
        grid-template-columns: auto;
    }
}

.col-wide {
    grid-column: 1 / -1;
}
.imagem-1 {
    grid-row: span 2;
    align-self: end;
}
.item2 {
    align-self: end;
}
/*ESTILOS CONTENT */
  p {
      font-size: 1.2em;
      line-height: 1.6;
      letter-spacing: -0,0,0,.7;
  }
  .informacoes p + p{
      margin-top: 30px;
  }
  /*TITULO*/
  .titulo {
      color: #b07dfb;
  }
  .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;
       background: linear-gradient(135deg, #8844ee, #b07dfb);
       border-radius: 5px;
       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: #B07dfb;
     }
     .numero {
         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: #B07dfb;
         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, #8844ee,#B07DFB);
      }
      .citacao p {
          font-size: 1.5em;
          font-style: italic;
          text-align: center;
          max-width: 500px;
          margin: 0 auto;
      }
      .atributos li {
          color: white;
          font-family: Courier, monospace;
          font-size: 1.125em;
          padding: 15px;
      }
      .atributos li + li {
          border-top: 2px solid #B07dfb;
      }
  /*ANUNCIOS*/
.anuncios {
    grid-area: anuncios;
    background: #fafbfc;
    display: grid;
    align-content: start;
     padding: 30px;
     grid-gap :30px;
     grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
     
}

/*FOOTER*/
.footer {
    grid-area: footer;
    background: linear-gradient(135deg, #8844ee, #b07dfb);
}
.footer p {
    padding: 30px;
    color: white;
    text-align: center;
}