/*
  https://iconos8.es/icons
*/

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

html{
  height: 100%;
}

body{
  min-height: 100%;
}

.grid-container > * {
  box-shadow: 1px 1px 7px 0px rgb(57, 55, 55);
  text-align: center;
}

.header{
  grid-area: header;
  border-radius: 10px;
}

.main{
  grid-area: main;
  background: linear-gradient(to right, #13747d, #fcf7c5);
  padding: 30px;
}

.footer{
  grid-area: footer;
  background-color: #333;
  color: #FFF;
  text-align: center;
  clear: both;
  border-radius: 0 0 10px 10px;
}

@media(max-width: 1440px){
  .grid-container{
    display: grid;
    gap: 5px;
    grid-template:
      "header   header"   auto
      "main     main"     auto
      "footer   footer"   auto /
      200px     auto;
  }
}

@media(max-width: 1000px){
  .grid-container{
    display: grid;
    gap: 5px;
    grid-template:
      "header   header"   auto
      "main     main"     auto
      "footer   footer"   auto /
      200px     auto;
  }
}

@media(max-width: 600px){
  .grid-container{
    display: grid;
    gap: 5px;
    grid-template:
      "header   header"   auto
      "main     main"     auto
      "footer   footer"   auto /
      200px     auto;
  }
}