.theme-keel {
  --primary-color: #413332;
  --secondary-color: #495392ff;
  --tertiary-color: #b39d86;
  --accent-1: #38272d;
  --accent-2: #47509b;
  --text-color-primary: whitesmoke;
  --text-color-secondary: black;
}

.theme-persona {
  --primary-color: #594582ff;
  --secondary-color: #856fc0ff;
  --tertiary-color: #df8cd4ff;
  --accent-1: #583d8e;
  --accent-2: #c2bed2;
  --text-color-primary: whitesmoke;
  --text-color-secondary: black;
}

.theme-caveat {
  --primary-color: #332166ff;
  --secondary-color: #613c6aff;
  --tertiary-color: #efb44aff;
  --accent-1: #2a184cff;
  --accent-2: #87293aff;
  --text-color-primary: whitesmoke;
  --text-color-secondary: black;
}

.theme-soirée {
  --primary-color: #313632;
  --secondary-color: #822c4c;
  --tertiary-color: #52534dff;
  --accent-1: #0d0d0f;
  --accent-2: #7b7b7b;
  --text-color-primary: whitesmoke;
  --text-color-secondary: black;
}

* {
  transition:
    background-color 1s ease-in-out,
    color 1s ease-in-out,
    border-color 1s ease-in-out;
}

@property --accent-1 {
  syntax: "<color>";
  initial-value: #594582ff;
  inherits: true;
}

@property --secondary-color {
  syntax: "<color>";
  initial-value: #856fc0ff;
  inherits: true;
}

@property --accent-2 {
  syntax: "<color>";
  initial-value: #df8cd4ff;
  inherits: true;
}

@font-face {
  font-family: "TimeBurner";
  src: url("./assets/Timeburner-xJB8.ttf") format("truetype");
}

@font-face {
  font-family: "TimeBurner bold";
  src: url("./assets/TimeburnerBold-peGR.ttf") format("truetype");
}

html {
  font-family: "TimeBurner";
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}

header {
  z-index: 1;
  background-color: #0000002e;
  display: flex;
  justify-content: center;
  align-items: center;
}

header #the_header {
  display: none;
}

header img {
  margin: 0;
  max-height: 6em;
  width: min(100vw, 26em);
}

h2 {
  font-family: "TimeBurner bold";
}

h3 {
  font-family: "TimeBurner bold";
}

#background{
  position: absolute;
  background: radial-gradient(
    circle at 50% 60%,
    var(--accent-1) 0%,
    var(--secondary-color) 60%,
    var(--accent-2) 100%
  );
  height:100vh;
  width: 100vw;
  transition:
    --accent-1 1s ease-in-out,
    --secondary-color 1s ease-in-out,
    --accent-2 1s ease-in-out;
}

#content_container {
  z-index: 10;
}

#album {
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: calc(100vh - 6em);
}

#album h2 {
  text-align: center;
  font-size: min(3em, 6vw);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#album_container{
 display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

#album_links {
  display: flex;
  justify-content: center;
  align-items: center;
}

#album_links #spotify_logo {
  width: 5em;
  padding: 2em;
}

#album_links #youtube_logo {
  width: 5em;
  padding: 2em;
}

#album_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#album_cover {
  position: relative;
  width: min(60vh, 60vw);
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}

#album_cover_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity:1;
  transition: opacity 500ms ease-in-out;
}
 #album_cover_img.loading {
  opacity:0;
}

#album_info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#album_info_info_text {
  display: flex;
}
#album_cover:hover #album_info {
  opacity: 1;
}
#album_info #track_container  {
  margin-bottom: 1em;
}

#album_info #track_container h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: left;
}

#album_info ol {
  padding: 0;
  text-align: left;
}

#album_info ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
  margin-bottom: 0;
}

#album_info ol li {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  margin-left: 0.4rem;
}

#album_links {
  display: flex;
}

#album_links a {
  margin: 0 0.5rem;
}

#album_links img {
  max-height: 2rem;
}
.arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 30px;
  cursor: pointer;
  display: none;
  z-index: 20;
}

.arrow.left {
  left: 10vw;
}

.arrow.right {
  right: 10vw;
}

#album .arrow {
  display: block;
}
#about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em max(20vw, 4em);
  color: var(--text-color-primary);
  background-color: var(--primary-color);
  font-size: larger;
}

#about p {
  width: min(94vw, 28em);
}

#about .band_member {
  font-weight: bolder;
  white-space: nowrap;
}

#gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.5vw 0em;
  background-color: var(--primary-color);
}

#gallery .band_member_image {
  width: 30%;
  margin: 0em 1vw;
}

#gallery .band_member_image img {
  width: -moz-available;
  width: -webkit-fill-available;
}

#gigs {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 2em;
  padding-bottom: 7em;
  color: #f5f5f5;
  background-color: var(--primary-color);
}

.gig {
  display: flex;
  justify-content: space-between;
  width: min(94vw, 28em);
  font-size: large;
  font-weight: bolder;
}

#contact {
  display: flex;
  color: var(--text-color-primary);
  background-color: var(--tertiary-color);
  justify-content: center;
  align-items: center;
  min-height: 20vh;
  flex-direction: column;
  padding-bottom: 2em;
}

#contact a {
  text-decoration: none;
  color: var(--text-color-primary);
  font-size: x-large;
}

#contact #links {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 380px) {
  #contact .mail_link {
    margin-top: 1.5em;
    white-space: nowrap;
    font-size: 1em;
  }
}

@media (max-width: 250px) {
  #contact .social_media_links {
    margin: 20%;
  }
  #contact #links {
    flex-direction: column;
  }
}

#contact .mail_link {
  margin-top: 1.5em;
  white-space: nowrap;
}

#contact .social_media_links {
  display: flex;
  width: 1.5em;
  margin: 10%;
}

#contact .logo {
  width: inherit;
}

.font_bolder {
  font-weight: bolder;
}