html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
}

body::after {
  content: "";
  background: url("../img/about-me/backgrounds/633535d02918e2fb1bb2aa50_cta-blur_3.png");
  background-size: cover;
  background-attachment: fixed !important;
  opacity: 0.3;
  bottom: 0%;
  /* Die Mitte des Bildes ist am unteren Bildschirmrand */
  left: 0;
  height: 200%;
  /* Die Höhe des Ausschnitts wird erhöht */
  width: 100%;
  position: absolute;
  z-index: -1;
  background-position: center top;
  /* Das Bild in der Mitte am unteren Rand positionieren */
  transform: translateY(30%);
}

.scroll-img {
  display: block;
  width: 12px;
  height: auto;
}

@media only screen and (max-width: 767px) {
  body::after {
    opacity: 0.3;
  }

  .scroll-img {
    display: none;
  }
}

@media only screen and (max-width: 576px) {
  #exploremusiccard {
    display: none !important;
  }
}

#exploremusiccard {
  display: block;
}

.center {
  font-family: var(--font);
  text-align: justify;
  margin-left: 10%;
  margin-right: 10%;
}

hr {
  border-color: #727272 !important;
}

.card,
.list-group-flush,
.list-group,
.list-group-item {
  background-color: #2c2c2c;
}

.card-body {
  padding: 12px !important;
}

.transition-glow {
  transition: 0.3s;
}

.hover-glow:hover {
  box-shadow: 0 0 6px 3px #FFFFFF33, 0 0 10px 6px var(--accent-shadow-15), 0 0 14px 9px var(--accent-shadow-5);
}

.list-group-item-link {
  color: var(--accent-color);
  transition: 0.3s;
}

.list-group-item-link:hover {
  color: var(--accent-color-hover);
  text-shadow: 0 0 10px var(--accent-shadow-65),
    0 0 20px var(--accent-shadow-15),
    0 0 40px var(--accent-shadow-5);
  cursor: default;
}

.list-group-item-link-underline:hover {
  cursor: pointer !important;
  text-decoration: underline;
}

.card-img {
  height: 248px;
  width: auto;
}



/* JUMPING HEADING ON HOVER */
.heading {
  display: inline-block;
  position: relative;
  cursor: default;
}

.heading span {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.heading span:nth-child(1) {
  transition-delay: 0.1s;
}

.heading span:nth-child(2) {
  transition-delay: 0.2s;
}

.heading span:nth-child(3) {
  transition-delay: 0.3s;
}

.heading span:nth-child(4) {
  transition-delay: 0.4s;
}

.heading span:nth-child(5) {
  transition-delay: 0.5s;
}


.invisibleFor1199AndUnder {
  display: block;
}

@media only screen and (max-width: 1199px) {
  .invisibleFor1199AndUnder {
    display: none !important;
  }
}

.btn-modal-glow {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.925);
  background: var(--accent-color);
  /*rgb(145, 92, 182);*/
  border-radius: 4px;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}

.btn-modal-glow:hover {
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 15px var(--accent-shadow-65);
  /*rgba(145, 92, 182, 0.644);*/
}

/* Ändert die Farbe des Schließen-Symbols */
.modal-header .close {
  color: var(--accent-color);
  transition: 0.2s;
}

/* Ändert die Farbe des Schließen-Symbols, wenn es angeklickt wird */
.modal-header .close:hover {
  border-color: var(--accent-color-hover);
  box-shadow: 0 5px 15px var(--accent-shadow-65);
}

.modal-header .close:focus,
.modal-header .close:active {
  outline: none;
  box-shadow: none;
}

.modal-content {
  color: var(--bg) !important;
}

.explore-music-link {
  color: white;
  transition: 0.1s;
}

.explore-music-link:hover {
  color: white;
  text-shadow: 0 0 20px white, 0 0 40px white;
  text-decoration: underline;
}