body {
  margin: auto;
  width: 70vw;
}

header {
  text-align: center;
}
header h1 {
  margin: 0;
}
header > a,
header h1 a {
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 1rem;
  display: block;
}
header nav {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}
header nav a {
  text-decoration: underline;
  text-transform: uppercase;
}
header nav a:hover,
header a.current {
  text-decoration: none;
  font-weight: bold;
}

section.hero h1 {
  font-size: 3rem;
  width: 45rem;
}
section.hero p {
  font-size: 1.5rem;
}
section.hero a {
  text-decoration: underline;
  text-transform: uppercase;
  font-weight: bold;
}

section.courses,
section.exams {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
section.courses h2,
section.exams h2 {
  font-size: 3rem;
  text-align: center;
  margin-top: 0;
}
section.courses header p,
section.exams header p {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0;
}
section.courses > div,
section.exams > div {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
}
section.courses.tier > div {
  flex-wrap: wrap;
}
section.courses div div,
section.exams div div {
  border: 1px solid black;
  padding: 4rem 3rem;
}
section.courses.tier div div {
  flex: 0 0 25%;
}
section.courses div p,
section.exams div p {
  font-size: 1.7rem;
  font-weight: bold;
}

footer {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 2rem;
}