body {background: darkgray;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;}
.page {background: lightgray;
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-left: auto;
       margin-right: auto;
       border-radius: 10px}
h1 {font-size: 25px;}

nav.narrow {display: flex; flex-direction: column; align-items: start}
nav.wide {display: none; flex-direction: row;}
nav div {display: flex; flex-direction: column;
         align-items: center; justify-content: center}
nav a, nav span {font-size: 18px}

section {font-size: 20px; width: 95%; padding-top: 15px;}
section img {float: right; width: 150px; height: 150px}
section p, h2, footer p {margin-block-start: 0px}
h2 {margin-block-end: 15px; text-align: center}

table {margin-bottom: 15px}
table.schedule {width: 100%; border: 1px solid; border-collapse: collapse;}
table.schedule th, table.schedule td {border: 1px solid; font-size: 15px; padding: 3px}

footer {
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      margin-bottom: 20px;
      padding: 5px;
      max-width: 75%;
      background: white;
      border-radius: 5px;
      font-size: 18px;
}

@media all and (min-width: 768px) {
  h1 {font-size: 35px;}
  section {font-size: 25px; width: 75%; padding-top: 30px;}
  section img {width: 250px; height: 250px;}
  nav.narrow {display: none}
  nav.wide {display: flex}
  nav div {border-radius: 5px;
           padding: 5px;
           border: 1px solid black;
           margin: 10px;
           font-size: 20px;
           background: white;
           height: 40px}
  nav div.a {background: lime}
  nav a {text-decoration: none}
  nav a, nav span {text-align: center}
  nav div.a:hover {border: 4px solid black;
                   margin: 7px;}

  footer {
        padding: 10px;
        max-width: 50%;
        font-size: 18px;
  }

  table.schedule th, table.schedule td {border: 1px solid; font-size: 16px}
}