:root {
  --base0: #fdf6e3;
  --base1: #eee8d5;
  --base2: #073642;
  --base3: #586e75;
  --duration: 0.5s;
  --spacerWidth: 25px;
}

* {
  transition: all var(--duration) linear;
  color: var(--base2);
  -webkit-transition: all var(--duration) linear;
  -moz-transition: all var(--duration) linear;
  -ms-transition: all var(--duration) linear;
  -o-transition: all var(--duration) linear;
}

html {
  font-family: "Source Sans Pro", apple-system, sans-serif;
  font-size: 16px;
  background-color: #fdf6e3;
  display: inline-block;
  vertical-align: top;
  /* margin-left: 2px; */
}

div {
  display: inline-block;
  max-width: 290px;
  margin-right: 30px;
}

.justified {
  text-align: justify;
}

.spacer {
  display: inline-block;
  min-width: var(--spacerWidth);
  max-width: var(--spacerWidth);
}

.footer {
  position: relative;
  bottom: 0;
  display: block;
  left: 10%;
}

.alignAtTop {
  vertical-align: top;
}

audio::-webkit-media-controls-panel {
  background-color: var(--base0);
  transition: all var(--duration) linear;
}

audio::-webkit-media-controls-panel:hover {
  background-color: var(--base1);
  transition: all var(--duration) linear;
}

audio::-webkit-media-controls-timeline {
  padding: 0;
}

audio {
  vertical-align: middle;
  height: 2em;
  margin-top: 2px;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-mute-button {
  display: none;
}

a {
  text-decoration: none;
  border-bottom: 1px dotted;
}

img#contact {
  display: inline-block;
  max-width: auto;
  max-height: 1.2em;
  width: auto;
  height: 1em;
  vertical-align: middle;
}

.ibm {
  font-family: "IBM Plex Mono", "Source Sans Pro", sans-serif;
}

.copyright {
  position: relative;
  bottom: 0;
  left: 5%;
  font-size: 80%;
}

.audioLabel {
  min-width: 80px;
  display: inline-block;
  text-align: right;
}

.iframe {
  filter: opacity(10%);
  -webkit-filter: opacity(10%);
}
.iframe:hover {
  filter: opacity(100%);
  -webkit-filter: opacity(100%);
}

.opaque {
  filter: opacity(100%);
  -webkit-filter: opacity(100%);
}

/* .iframe {
  filter:opacity(10%);
  display: inline-block;
  padding: 20px;
  background-color: black;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  -webkit-filter:opacity(10%);
} */

/* .iframe:hover {
  filter:opacity(100%);
  -webkit-filter:opacity(100%);
} */