html,
body {
  background-color: #4c1e6a;
  font-family: 'IBM Plex Sans', sans-serif;
  color: white;
  font-weight: 400;
  letter-spacing: 0.01em;
}

body {
  margin-bottom: 0px;
  background: url(../images/diag-box.svg);
  background-repeat: repeat;
  background-position: top;
}

a {
  color: #15ff00;
  text-decoration: none;
}

.divider {
  color: #9d00ff;
}

.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d6efd'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

@font-face {
  font-family: 'Karrik-Regular';
  src: url('../fonts/Karrik-Regular.woff2') format('woff2'),
    url('../fonts/Karrik-Regular.woff') format('woff'),
    url('../fonts/Karrik-Regular.ttf') format('truetype');
  /* Safari, Android, iOS */
  font-display: swap;
}

h1,
h2,
h3,
h4 {
  font-family: 'Karrik-Regular', monospace;
  text-transform: uppercase;
}

.desc {
  text-transform: uppercase;
}

.desc p,
.desc ul {
  font-size: 1.5rem;
}

.desc ul {
  list-style: none;
}

.story {
  font-size: 1.3rem;
}

.links a.one {
  color: #ffffff;
}

.links a.two {
  color: #9d00ff;
}

.links a {
  text-decoration: none;
}

strong {
  font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif;
}

blockquote {
  font-style: oblique;
}

.links,
.links p {
  /* font-size: 3rem; */
  font-weight: 700;
  padding: 10px 0px;
  /* word-break: break-all; */
  letter-spacing: 0.3rem;
  font-family: 'Karrik-Regular', monospace;
}

.links p {
  background-color: #000 !important;
}

.links a:hover {
  text-decoration: none;
  /* border-bottom: 0px solid; */
  background-color: #9d00ff;
  color: #000;
}

a:hover {
  background-color: #000;
  color: #9d00ff;
  text-decoration: none;
  /* padding: 5px 10px; */
  /* margin: 0px; */
}

.credit {
  text-align: right !important;
  display: block !important;
  padding-right: 5px;
  padding-bottom: 3px;
  font-size: 0.8rem;
}

.image-link img:hover {
  border: 5px solid black;
  cursor: pointer;
}

.albums {
  display: flex;
  gap: 10px;
  flex-direction: column;
  letter-spacing: 0.05em;
}

.albums li {
  padding: 10px;
  /* margin: 0px 10px; */
  background-color: rgba(0, 0, 0, 0.5);
  width: auto;
  border: 2px #9d00ff solid;
}

@media (max-width: 767px) {
  .moods .row,
  .moods .row div,
  .links .row {
    padding: 0px !important;
    margin-bottom: 0px !important;
  }

  .desc {
    margin-top: 10px !important;
  }
  .links .row {
    margin-bottom: 0px !important;
  }
}