:root {
  --background: #282828;
  --foreground: #ebdbb2;
  --secondary: #458588;
  --header: #b8bb26;
  --link-regular: #fb4934;
  --link-visited: #b16286;
  --hr: #d5c4a1;
}

body {
  margin-left: 40px;
  margin-top: 30px;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  font-weight: normal;
  background-color: var(--background);
}

body *:not(select, hr) {
  width: 85%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  color: var(--foreground);
}

#head {
  font-weight: bold;
  margin-bottom: 0;
  color: var(--header);
}

#caption {
  margin-top: 10px;
}

hr {
  width: 30%;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 1%;
  border-radius: 5px;
  color: var(--hr);
}

ul {
  list-style-type: "→  ";
}

select {
  padding: 10px;
  border: 1px dashed;
  border-radius: 5px;
  appearance: none;
  width: 7rem;
  float: right;
  margin-right: 2rem;
  text-align: center;
  background-color: var(--background);
  color: var(--foreground);
  cursor: pointer;
}

a:link {
  color: var(--link-regular);
}

a:visited {
  color: var(--link-visited);
}

.secondary {
  color: var(--secondary);
}

#pronouns {
  font-weight: normal;
  font-size: large;
}

optgroup {
  text-align: left;
}

#music-status {
  color: var(--secondary);
}

/* Media queries */

@media only screen and (max-width: 500px) {
  body {
    margin-left: 15px;
    margin-top: 7px;
  }

  #head {
    font-size: 1.75rem;
  }

  select {
    margin-top: 0.25rem;
    margin-right: 1rem;
    width: 6rem;
  }
}