body {
  --color1: #054a91ff;
  --color2: #3e7cb1ff;
  --color3: #81a4cdff;
  --color4: #f17300ff;
  --color5: #dbe4eeff;

  --header-height: 60px;
  --shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.45);
  --gutter: 20px;
  --footer-height: 25px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: larger;
  background-image: url("https://images.alphacoders.com/233/233571.jpg");
  background-color: var(--color2);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(var(--footer-height));
}

section {
  background-color: var(--color5);
  opacity: 0.9;
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--gutter);
  margin-top: var(--gutter);
  margin-bottom: var(--gutter);
  border: solid 2px var(--color1);
}

.italic {
  font-style: italic;
  display: inline;
}

a {
  text-decoration: underline;
  color: darkblue;
}

header {
  display: flex;
  justify-content: flex-end;
  background-color: var(--color2);
  height: var(--header-height);
  box-shadow: var(--shadow);
}

footer {
  display: flex;
  justify-content: flex-end;
  background-color: var(--color3);
  box-shadow: var(--shadow);
}

h2 {
  margin-top: 20px;
  font-size: 2rem;
  font-weight: bold;
}

.gutter-right {
  margin-right: 20px;
}

.main-logo {
  border: 2px solid #054a91ff;
  max-width: 50%;
}

header img {
  height: var(--header-height);
}

content {
  width: 80%;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: var(--footer-height);
  display: flex;
  justify-content: flex-end;
  background-color: var(--color3);
  box-shadow: var(--shadow);
}