@import url("base.css");

body {
    /* Background*/
    background-image: linear-gradient(rgba(235, 75, 98, 0.8),rgba(235, 75, 98, 0.8)),
		      url("img/webtreats-seamless-cloud-4.jpg");
    background-size: 250px;
    
    background-color: rgba(235, 75, 98, 0.5);
    color: black;
    


  /* grid */
  display: grid;
  grid-template-columns: 800px 220px;
  grid-template-areas:
      "header    header"
      "main      aside "
      "footer    footer";
  row-gap: 10px;
  column-gap: 25px;
  
  
  justify-content: center;
}

@media screen and (max-width: 1059px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "aside "
        "footer";
      
    margin-left: 5px;
    margin-right: 5px;
  }
}

header {
    grid-area: header;
    justify-self: center;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
    align-self: start;
}

footer {
    grid-area: footer;
    justify-self: center;
}


/* Bordas e fundos */
main, aside {
    /* bg */
    background-color: ##EBDA8F;    
    background-image: linear-gradient(#EBDA8Fcc, #EBDA8Fcc),
		      url("img/pai.jpg");
    background-size: 300px;
    

    /* border */
    border-radius: 20px;
    border: 7px dashed #FFFFFF;

    padding-left: 23px;
    padding-right: 23px;
    padding-top: 5px;
    padding-bottom: 5px;

    box-shadow: 0px 0px 10px 5px rgba(1,1,1, 0.3);

    text-shadow: 1px 1px #ffffffaa;
}

header, footer {
    color: white;
    text-shadow: 2px 2px black;
}


/* Imagens responsivas */
img {
    max-width: 100%;
    height: auto;
}


header img {
    box-shadow: 0px 0px 5px 5px rgba(255,255,255, 0.5);    
}

h1, h2, h3, h4, h5, h6 {
    background-image: url("img/cheese-seamless-vector-background.jpg");
    background-size: 100px;
}