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

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2em;
  min-height: 100vh;
  background-color: black;
}

.grid-container {
  display: grid;
  grid-template:
    "header" 100px
    "main" auto
    "footer" 100px;
  .header {
    grid-area: header;
    background-color: orange;
  }

  .main {
    grid-area: main;
  }

  .footer {
    grid-area: footer;
  }

  .header{
    position: relative;
    top: -100%;
    animation: slideInTop 1s forwards;
    opacity: 0;
  }

  @media (min-width: 768px) {
    grid-template:
      "header" 100px
      "main" auto
      "footer" 50px;
      
  }
  @media (min-width: 992px) {
    grid-template:
      "header main" auto
      "header footer" 50px/
      250px auto;
    .header {
      position: relative;
      left: -100%;
      top: 0%;
      animation: slideInLeft 1s forwards;
      opacity: 0;
    }
  }
}

@keyframes slideInLeft {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes slideInTop {
  from {
    top: -100%;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}