:root {
    --base-color: #000;
    --bg-color: #fff;
    --hl-color: red;
}

*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  body {
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg-color);
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  input, button, textarea, select {
    font: inherit;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

body {
    background-color: var(--bg-color);
    font-family: Arial, Helvetica, sans-serif;;
}

.layout {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
    grid-template-areas: 
    'header'
    'main'
    'footer';
}

header, #content, footer {
    margin: auto 15px;
}

header {
    grid-area: header;
    grid-column: 1/7;
    grid-row: 1;
}

#content {
    grid-area: main;
    grid-column: 1/7;
}
.description { text-align: center;}

footer {
    grid-area: footer;
    grid-column: 1/7;
}

header h1 {
    color: #333;
    margin: 15px auto;
    font-size: 1.5rem;
    text-align: center;
}

#content p {
    font-size: 1.1rem;
    margin: 15px auto;
}

footer {
    font-size: .8rem;
}

@media only screen and (min-width: 992px) {
    header h1 { font-size: 2rem;}
    header, #content, footer {
        grid-column: 2/6;
    }
    footer { font-size: 1rem; grid-column: 2/6; }
}