/* Wave */

#wave {
  color: peachpuff;
  padding-top: calc((100% - 1127px) / 2);
  height: 7em;
  box-sizing: content-box;
  background: currentColor;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#wave svg {
  display: block;
  position: relative;
  top: calc(7em - 1px);
}

/* Credits */

.credits {
  text-align: right;
  padding: 0.5em 0.75em;
  line-height: 1em;
  position: absolute;
  top: 1em;
  right: 1em;
  color: white;
  background: bisque;
  border-radius: 15px;
  transition: all 0.2s linear;
}

.credits:not(:hover) a {
  color: indianred;
}

.credits:hover {
  color: black;
  background: white;
}

/* Tags */

[data-tag] > *:first-child::after {
  font-size: 0.6em;
  line-height: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  padding: 0 0.75em;
  border-radius: 15px;
  height: 1rem;
  margin-left: 0.5em;
  margin-top: -1px;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px;
  opacity: 0.5;
  transition: opacity 0.2s linear;
}

[data-tag="work"] > *:first-child::after {
  content: "work";
}

[data-tag="hackathon"] > *:first-child::after {
  content: "hackathon";
}

[data-tag="life"] > *:first-child::after {
  content: "life";
}

[data-tag="talk"] > *:first-child::after {
  content: "talk";
}

[data-tag="education"] > *:first-child::after {
  content: "education";
}

[data-tag="remote"] > *:first-child::after {
  content: "remote";
}

[data-tag="work"]:hover > *:first-child::after {
  background: blue;
}

[data-tag]:hover > *:first-child::after {
  color: #fff;
  opacity: 1;
  box-shadow: none;
}

[data-tag="hackathon"]:hover > *:first-child::after {
  background: midnightblue;
}

[data-tag="life"]:hover > *:first-child::after {
  background: deepskyblue;
}

[data-tag="talk"]:hover > *:first-child::after {
  background: fuchsia;
}

[data-tag="education"]:hover > *:first-child::after {
  background: rgb(255, 133, 154);
}

[data-tag="remote"]:hover > *:first-child::after {
  background: rgb(255, 222, 73);
}

/* Highlighted list item */

li.highlighted {
  padding: 0.5em;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

ul:not(.timeline) > li.highlighted,
ul:not(.timeline) > li.bordered {
  margin: 0.25em 0 0.25em -1.75em;
  padding: 0.25em 0.5em 0.25em 1.75em;
}

ul:not(.timeline) > li.highlighted > div {
  margin-bottom: 0.25em;
}

.skills li,
.interests li {
  display: flex;
  margin-bottom: 5px;
  font-variant: normal;
  list-style: none;
  margin-left: -20px;
}

.interests i {
  margin-right: 10px;
}

.skills ul > li::before,
.interests ul > li::before {
  content: "";
}

.skills ul li span {
  margin-right: 10px;
  font-style: normal;
}

.hello {
  font-size: 0;
}