* {
box-sizing: border-box;
}
/* Base reset and body styling */
body {
  font-family:"Josefin Sans", sans-serif; 
  background-color: #222;
  color: beige;
}

header.site-title {
 text-align: center;
}
section.periodic-table {
  margin: 0 10vw 0 9vw;
  padding: 0;
  justify-content: center;
  align-items: center;
  width: 81vw;
  height: 80vh;
  position: relative;
  background-color: none;
  overflow: hidden;
}

/* Grid container */
.grid-wrapper {
  position: relative;
  background-color: rgba(0, 0, 0, 0.1);
}

.grid {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transform-origin: center;
  display: grid;
  grid-template-columns: repeat(21, 340px);
  grid-template-rows: repeat(10, 340px);
  gap: 1.5em;
  width: calc(30 * 340px + 17 * 1.5em + 170px);
  height: calc(20 * 340px + 7 * 1.5em);
  background-color: rgba(0, 0, 0, 0.2);
  transform-origin: center center;
  
}

/* Empty background cells */
.empty-cell {
  background-color: rgba(30, 144, 255, 0.8);
  color: white;
  opacity: 0; /* view here */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  z-index: 1;
  box-sizing: border-box;

}

/* Base layout */
.description {
  border-radius: 8px;
  position: relative;
  z-index: 2;
  perspective: 1000px;
  display: none;
  opacity: 0;
}

/* Text block */
.description-text {
  text-transform: uppercase;
  font-size: 1.8em;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Horizontal variant */
.description.hor {
  margin-top: 100px;
  width: 340px;
  height: 140px;
  padding-bottom: 2em;
}

/* Vertical variant */
.description.vert {
  margin-left: 100px;
  width: 140px;
  height: 340px;
  padding-right: 3em;
}

/* Vertical text using writing-mode */
.description.vert .description-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
/* Double variants */
.hor.desc-double {width: calc(680px + 20px);} .vert.desc-double {height: calc(680px + 20px);}

/* Card container */
.card {
  width: 340px;
  height: 340px;
  border-radius: 8px;
  position: relative;
  z-index: 2;
  perspective: 1000px;
}

/* Card inner container for flip effect */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* When flipped, rotate the inner container */
.card-inner.flipped {
  transform: rotateY(180deg);
}

/* Both faces of the card */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  padding: 1em;
}

/* Front face styling: shows symbol, title, decade, and artists */
.card-front {
  transform: rotateY(0deg);
  background: transparent;

  /* Your original overlay content (header, h3, artists, etc.) will appear here */
}

/* Back face styling: shows genre description and a header with the genre name */
.card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

/* Shared content styling for header and text */
.card header {

}
.decade {
  margin: 0;
  font-size: 1em;
  text-align: right;
}
.symbol {
  font-size: 7em;
  margin: .1em 0 .09em;
  padding: 0;
  font-weight: 800;
  display: block;
  text-align: center;
  line-height: 0.8em;
}
.genre-name {
  font-size: 20px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
.archetype {
  margin: .5em 0 1em;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
}
.artist-name {
  margin-bottom: -.2em;
}
.artist-name::after {
  content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1em'%20height='1em'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='32'%20r='20'%20fill='none'%20stroke='beige'%20stroke-width='24'%2F%3E%3C/svg%3E");
  vertical-align: middle;
  color: inherit;
  display: block;
  margin: .2em 0 0;
  padding: 0;
  line-height: 1em;
}
.album-title {
  margin: 0;
  padding-top: 0;
}
.artists {
  line-height: 1.1em;
  font-size: .9em;
  font-weight: 100;
  margin-top: -.5em;
}

/* Styling for the genre description on the back */
.about-genre {
  font-weight: 200;
}
.about-genre p {
  margin: 0;
}

.sources, .controls {
  min-width: 30vh;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5em;
}
footer {
  width: 100%;
  background-color: #111;
  margin: 2em auto 0;
  line-height: 1.5em;
  padding: .5em 0;
}
footer p {
  text-align: center;
  
}
footer a {
  color: teal;
}


/* Set the card's base color via a custom property for each genre */
.description {background-color: #333;}
.card.pre-metal { --card-color: rgba(60,60,50,1); }
.card.black     { --card-color: rgba(20,25,30,1); }
.card.x         { --card-color: rgba(150,55,100,1); }
.card.core      { --card-color: rgba(100,100,150,1); }
.card.post      { --card-color: rgba(40,110,140,1); }
.card.x        { --card-color: rgba(80,110,60,1); }
.card.goth{ --card-color: rgba(65,30,50,1); }
.card.main      { --card-color: rgba(40,100,85,1); }
.card.doom      { --card-color: rgba(200,130,20,1); }
.card.electronic      { --card-color: rgba(25,55,105,1); }
.card.death     { --card-color: rgba(170,40,40,1); }
.card.screamo   { --card-color: rgba(110,110,70,1); }
.card.hiphop    { --card-color: rgba(80,60,50,1); }
.card.shock      { --card-color: rgba(80,50,120,1); }

.card .card-front {
  background: linear-gradient(315deg, 
              rgba(255,255,255,0) 0%, 
              rgba(255,255,255,0) 50%, 
              rgba(255,255,255,0.1) 50%, 
              rgba(255,255,255,0.1) 100%),
              var(--card-color);
}
.card .card-back {
  background: linear-gradient(45deg, 
              rgba(255,255,255,0) 0%, 
              rgba(255,255,255,0) 50%, 
              rgba(255,255,255,0.1) 50%, 
              rgba(255,255,255,0.1) 100%),
              var(--card-color);
}