body {
    background-color: rgb(44, 46, 50);
    /* background-color: rgb(36, 36, 36); */
    /* margin-left: 20em;
    margin-right: 20em; */
    margin: auto;
    max-width: min(100ch, 90%);
    font-family: Courier, monospace;
    font-weight: normal;
}

header {
  /* background-color: rgb(57, 102, 78); */
  /* background-color: rgb(124, 166, 134); */
  background-color: rgb(238, 237, 233);
  padding: 2px;
}

h1 {
    /* color: rgb(238, 237, 233); */
    color: rgb(36, 36, 36);
    font-size: 2.5em;
    margin: 0.5em;
}

h2 {
  color: rgb(238, 237, 233);
  margin: 0;
}
  
h3 {
    color: rgb(238, 237, 233);
    margin-bottom: 0;
    margin: 0;
}

hr {
  background-color: rgb(238, 237, 233);
  padding: 0em;
  height: .1em;
  border: none;
}


p, em, strong, details {
    color: rgb(238, 237, 233);
    line-height: 1.3;
    /*background: rgb(209, 169, 169);*/
}

ul {
  list-style-type: none;
}

.with-circle {
  list-style-type: circle;
}

li {
  color: rgb(238, 237, 233);
  margin: 2;
}

a:link {
    color: rgb(117, 151, 201);
}

a:visited {
  color: rgb(198, 154, 252);
}

a:hover {
  /* color: rgb(145, 190, 18); */
  color: rgb(160, 189, 167)
}

a:active {
  color: rgb(240, 108, 189);
}

.content-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.artist-info {
  flex: 1;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.album-info {
  font-size: 0.8em;
  text-align: right;
  align-self: baseline;
  padding: 0;
}

.small {
  /* color: rgb(145, 190, 18); */
  /* color:rgb(143, 218, 252); */
  color:rgb(160, 189, 167);
  font-size: .8em;
  margin: 0em;
  margin-bottom: -0.6em;
}

.header-style {
  columns: 2;
}

nav {
  padding-top: .5em;
  text-align: left;

}

.menu-box {
  display: flex;
}

.menu {
  flex: 1;
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  padding: .5em;
}

.menu:link, .menu:visited, .menu:focus {
  /* background: rgb(57, 102, 78); */
  background: rgb(62, 82, 67);
  color:rgb(238, 237, 233)
}

.menu:hover {
  background: rgb(238, 237, 233);
  /* color: rgb(44, 46, 50); */
  color: rgb(36, 36, 36)
}

.menu:active {
  background: rgb(240, 108, 189);
}

.menu-current {
  flex: 1;
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  padding: .5em;
}

.menu-current:link, .menu-current:visited, .menu-current:focus .menu-current:hover {
  /* background: rgb(145, 190, 18); */
  background: rgb(124, 166, 134);
  color: rgb(238, 237, 233);
}

.menu-current:active {
  background: rgb(240, 108, 189);
}