:root {
  --brand-primary: #607d8b;
  --brand-secondary: #008000;
  --semi-opaque-white: #ffffffaa;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

body.black main {
  background-color: black;
  color: white;
}

body.magenta {
  background-color: magenta;
  color: brown;
}


body.inner main {
  background-color: var(--brand-primary);
}

body.inner main h1,
body.inner main h2 {
  width: 100%;
  color: white;
  text-align: center;
  background-color: var(--brand-secondary);
  padding: 1em;
  margin: 0;
}

iframe {
  margin: 0 auto;
  border: 2px dotted rebeccapurple;
  display: block;
}

body.inner main img {
  width: 100%;
  height: auto;
}

body.black main h1,
body.black main h2 {
  width: 100%;
  color: white;
  text-align: center;
}

.card-horizontal {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--semi-opaque-white);
  margin: 1em 20%;
}

.card-horizontal img {
  max-width: 300px;
  height: auto;
}

.topbar {
  background-color: black;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

.branding {
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.branding img {
  max-width: 280px;
  height: auto;
}

.topbar svg {
  fill: white;
}

.branding ul {
  display: flex;
  gap: 1em;
}

.branding li {
  display: inline;
  font-size: larger;
}

.branding li span {
  color: white;
  background: green;
  border-radius: 4px;
  padding: 2px;
}

footer {
  background: black;
  color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

footer a {
  color: white;
}