body,h1,h2,h3,h4,h5,h6,code,strong,pre,.highlight {
  background-color: black;
  color: white;
}

code > span {
  background-color: black;
  color: white;
}

code > .nt { color: inherit; }
code > .s2 { color: inherit; }

header {
  margin-bottom: 10px;
  padding-right: 0;
}

/* The "minimal" stylesheet sets width: 100% but this doesn't do
   anything for us. */
table {
  width: auto;
}

th {
  color: white;
}

img[alt~="Illustration:"] {
  float: right;
  margin: 20px;
  max-width: 50%;
}

img[src*=medals] {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

img[src*=Tux-and-beastie] {
  float: right;
  width: 64px;
  margin: 20px;
}

img[src*="logos"] {
  width: 64px;
}

/* For Youtube videos */
.video-embed {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.video-embed > iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

a {
  font-weight:bold;
  color: #0ff;
}

a:visited {
  color: #f0f;
}

#edit-link {
  position: fixed;
  right: 20px;
  top: 5px;
  color: white;
  background-color: black;
  opacity: 25%;
  padding: 5px;
  border-radius: 10px;
}

#edit-link a {
  color: white;
}

#alert-banner {
  border: 3px solid white;
  padding: 30px 30px 10px 30px;
  margin-bottom: 10px;
  background-color: #144;
  max-width: 400px;
}

#alert-banner img {
  max-width: 100%;
}