body {
  font-family: monospace;
  height: 100vh;
  margin: 0;
  background-color: #e4e4e4;
}

.left-pannel {
  background-color: #181818;
  color: white;
  font-size: 1.2em;
  border-right: solid #ffffff9f;
  min-width: 170px;
  min-height: 100%;
}

.left-pannel ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  margin-left: 20px;
  margin-right: 20px;
}

li {
  margin-top: 4px;
}

a {
  padding: 2px;
}

.wrapper {
  display: flex;
  width: 100%;
  min-height: 100%;
}

.left-pannel a:link {
  color: #04a5e5;
}

a:link {
  color: #1e66f5;
}

a:link:hover {
  color: #222;
}

.left-pannel a:link:hover {
  color: white;
}

.pfp {
  border: 2px outset #d0d0d0;
  margin-right: 10px;
  float: left;
}

.here {
  list-style: none;
}

.here-inner {
  margin-left: -13.33px;
}

.here-inner a {
  margin-left: -4px;
}
.here-inner p {
  margin: 0;
}

.body-wrapper {
  margin: 10px;
  width: 50%;
}

.left-pannel hr {
  color: #ffffff9f;
}

hr {
  color: #1818187f;
}

.highlight {
  color: #d20f39;
}

.lesser {
  color: #dc8a78;
}

.buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.buttons img {
  width: 88px;
  height: 31px;
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
}

h1 {
  margin: 0;
}

.contact-info {
  display: flex;
  align-items: center;
}

.contact-list {
  padding-left: 20px;
}

a.external {
  background-image: url("/static/media/external_link_blue.svg");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 0.857em;
  padding-right: 1em;
}

a.external:hover {
  background-image: url("/static/media/external_link_black.svg");
}

.left-pannel a.external:hover {
  background-image: url("/static/media/external_link_white.svg");
}