@media only screen and (width > 720px) {
  nav a{
    background: var(--accent-bg);
  }
}

@media only screen and (width <= 720px) {
  header>nav a{
    color: white;
    text-decoration: none;
  }
  
  header>nav a:visited{
    color: white;
  }
}

pre {
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid var(--preformatted);
  text-align:right;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}

header {
  color: white;
  background: rgb(0, 0, 0) !important;
  z-index: 1;
  position: relative;
}

header::before {
  content: "";
  background-image: url(/assets/images/header.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding-top: 100%; /* 1:1 aspect ratio for a square */
}
.youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}