body {
  /* base colors */
  --hue-primary: 214;
  --sat-primary: 60%;
  --hue-secondary: 200;
  --sat-secondary: 100%;
  --hue-featured: 240;
  --sat-featured: 100%;
  --luma-flowText: 20%;
  --luma-headings: 5%;
  --luma-featured: 10%;
  --luma-nav: 25%;
  --luma-header-bg: 80%;
  --luma-main-bg: 20%;
  --luma-article-bg: 90%;
  --luma-fader: 70%;
  --color-main-bg: hsl( var(--hue-primary), var(--sat-primary), var(--luma-main-bg));
  --color-flowText: hsl( var(--hue-primary), var(--sat-primary), var(--luma-flowText));
  --color-featured: hsl( var(--hue-featured), var(--sat-featured), var(--luma-featured));
  --color-chrome-bg: hsl( var(--hue-primary), var(--sat-primary), var(--luma-header-bg));
  --color-heading-text: hsl( var(--hue-primary), var(--sat-primary), var(--luma-headings));
  --color-modal-fader: hsla( var(--hue-primary), var(--sat-primary), var(--luma-fader), 0.8);
  --color-modal-bg: hsl( var(--hue-primary), var(--sat-primary), var(--luma-main-bg));
  --color-nav-anchor: hsl( var(--hue-featured), var(--sat-primary), var(--luma-nav));
  --color-article-bg: hsl( var(--hue-primary), var(--sat-primary), var(--luma-article-bg));
  --color-shadow: #0003;
  --shadow-chrome: 0 0.25em 1em 0.25em var(--color-shadow);
  --shadow-button: 0 0.25em 0.25em 0.125em var(--color-shadow);
  --shadow-formElement-focus: 0 0 0.25em 0.125em #038;
  --border-hairline: 1px solid #0004;
  /* base measurements */
  --maxWidth-constrain: 90rem;
  --maxWidth-flow: 40rem;
  --maxWidth-modal: 80rem;
  --maxWidth-modalForm: 24rem;
  --pad: clamp(0.5em, min(2vw, 4vh), 4em);
  --borderRadius-outer: 0.5em;
  --borderRadius-inner: 0.25em;
}

html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
caption,
table,
tr,
td,
th,
address,
blockquote,
img {
  margin: 0;
  padding: 0;
}

img,
fieldset,
object {
  border: none;
}

iframe {
  border: none;
}
*,
*:after,
*:before {
  flex: 0 0 auto;
  /* safari bugfix */
  box-sizing: border-box;
}

button,
label {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

hr {
  display: none;
}

body,
button,
input,
table,
textarea,
select {
  font: normal 1em/1.5 "poppins", arial, helvetica, sans-serif;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--shadow-formElement-focus);
}

nav{
  background-color: #333333;
  width: 100%;
  height: 2.5em;
}

details {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li, summary {
  float: left;
}

li a, summary, .dropdown, .dropdown-content a {
  display: block;
  color: white;
  text-align: center;
  padding: .5em;
  text-decoration: none;
}

li a:hover, summary:hover {
  background-color: #111111;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  max-height: 50vh;
  overflow-y:scroll;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#songFrame {
  width: 100%;
  top: 2.5em;
  height: calc(100% - 2.5em);
}

@media only screen and (max-width: 720px) {
  body {
    font-size: 2em;
  }
}