* {
  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: 0 0 10px 10px;
}

@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
  }
}