@media only screen and (min-width: 40rem) {
  header,
  nav,
  main,
  footer,
  table {
    max-width: 1200px;
  }
  header {
    border-radius: 0.5rem;
    padding: 1.5rem;
  }
  .logo {
    width: 130px;
  }
  .motto {
    letter-spacing: 1.5pt;
    font-size: 1.1rem;
    margin-left: 17px;
  }
  header h1 {
    font-size: 3rem;
  }
  main h1 {
    font-size: 3rem;
  }
  main h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  .navagation {
    display: flex;
  }
  .navagation li {
    display: block;
    flex: 1 1 100%;
  }
  .navagation a {
    font-size: 1.1rem;
    text-align: center;
  }
  .navagation li:first-child {
    display: none;
  }
  .colors {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .color1 {
    grid-column: 1 / 2;
  }
  .color2 {
    grid-column: 2 / 3;
  }
  .color3 {
    grid-column: 3 / 4;
  }
  .color4 {
    grid-column: 4 / 5;
  }
  .color5 {
    grid-column: 5 / 6;
  }
  .color6 {
    grid-column: 6 / 7;
  }
  .color7 {
    grid-column: 7 / 8;
  }
  footer {
    border-radius: 0.5rem;
    font-size: 1.2rem;
  }
}