@font-face {
  font-family: "aqua";
  src: url("../fonts/aqua.ttf") format("truetype"), url("../fonts/aqua.woff") format("woff"), url("../fonts/aqua.woff2") format("woff2");
}

body {
  font-size: calc(11px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  overflow-x: hidden;
  font-family: "aqua", Verdana, Geneva, Tahoma, sans-serif;
  background-color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.125em;
  letter-spacing: -0.09em;
  line-height: 0.85em;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1;
}

h1 {
  font-size: 5em;
}

h2 {
  font-size: 1.25em;
  font-family: "Didact Gothic", sans-serif;
  letter-spacing: 1px;
}

h3 {
  font-size: 1.1em;
  font-family: "Didact Gothic", sans-serif;
  letter-spacing: 1px;
}

a {
  text-decoration: none;
}

@media only screen and (min-width: 500px) {
  body {
    font-size: calc(11px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  }
}

:focus-visible {
  outline: unset;
}

.cvox_indicator_container {
  display: none;
}

/************************************************************************ Header */
header {
  width: 100%;
  padding: 2vh 0 0 1vw;
  position: fixed;
  top: 0;
  z-index: 199;
  display: flex;
  height: auto;
  background-color: rgba(102, 102, 102, 0.96);
}

#heading {
  flex-basis: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

#heading .title {
  flex-basis: 80%;
  height: auto;
}

#heading .title h1 {
  position: relative;
  margin: 0.165em 0 0 0.08em;
  z-index: 101;
  line-height: 1;
}

#heading .title h1 a {
  color: rgba(0, 0, 0, 0.7);
}

#heading .menu {
  flex-basis: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hamburger .line {
  width: 42px;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger:hover {
  cursor: pointer;
}

/************************************************************************ Main */
main {
  margin: 100px 0 4vh 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

main section {
  flex-basis: 96%;
  margin: 0 auto 24px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

main section a:hover {
  opacity: 0.85;
}

main section a div {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
}

main section a div:last-child {
  margin: 8px 4px;
}

main section a div h2,
main section a div h3 {
  flex-basis: 50%;
  align-self: center;
}

main section a div h3 {
  text-align: right;
}

main section a div img {
  width: 100%;
}

main section a {
  flex-basis: 80%;
}

@media only screen and (min-width: 568px) {
  /* main {
    margin: 100px 0 0 0;
  } */

  main section {
    flex-basis: 46%;
  }

  main section a {
    flex-basis: 56%;
  }
}

@media only screen and (min-width: 865px) {
  main {
    margin: 200px 0 0 0;
  }
}

@media only screen and (min-width: 1800px) {
  main {
    margin: 250px 0 0 0;
  }
}

/************************************************************************ Album */

#album {
  justify-content: flex-start;
}

#album h1,
#album h2 {
  font-size: 2em;
  font-family: "Didact Gothic", sans-serif;
}

#album h1 {
  margin: 8px 0 0 0;
}

#album h2 {
  margin: 8px 0 8px 0;
}

main .album {
  position: relative;
  z-index: 100;
  flex-basis: 86%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

main .album .artist {
  flex-basis: 100%;
}

main .album .title {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-start;
}

main .album .image {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-start;
}

main .album div img {
  width: 100%;
}

main .album .info {
  flex-basis: 100%;
}

main .album .info h1,
main .album .info h2,
main .album .info span {
  flex-basis: 100%;
  font-family: "Didact Gothic", sans-serif;
  letter-spacing: 1px;
}

main .album .info span {
  margin: 12px 0 0 0;
  line-height: 2;
}

main .album .info span a {
  color: #000;
}

main .album .info span a:hover {
  color: #f012be;
}

@media only screen and (min-width: 568px) {
  main .album {
    justify-content: space-around;
  }

  main .album .artist,
  main .album .image {
    flex-basis: 36%;
  }

  main .album .title,
  main .album .info {
    flex-basis: 48%;
  }
}