@font-face {
    font-family: 'JMH Cthulhumbus Arcade UG';
    src: url('/fonts/JMHCthulhumbusArcadeUG-Regular.woff2') format('woff2'),
         url('/fonts/JMHCthulhumbusArcadeUG-Regular.woff') format('woff'),
         url('/fonts/JmhcthulhumbusarcadeugRegular-JleB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Averia";
    src: 
      url("font/Averia.ttf") format("truetype"),
      url("font/Averia.woff2") format('woff2'),
      url("font/Averia.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

.arcade-font {
  font-family: "JMH Cthulhumbus Arcade UG", sans-serif;
}

.section,
.coverTitle,
.favTrack,
.gradient {
  font-family: "JMH Cthulhumbus Arcade UG";   /* or any font you want */
}

.albumText {
  font-family: "Averia";   /* or any other font */
}

.lightlink {
  color: #FFFFFF;
  cursor: var(--cursorlink), auto;
  font-family: "Averia";
}

.bg-hadestown {
  background-image: url(../images/bg-hadestown.jpeg);
}

.bg-adamandi {
  background-image: url(../images/bg-adamandi.jpg);
}

.bg-the-addams-family {
  background-image: url(../images/bg-the-addams-family.jpg);
}

.bg-american-idiot {
  background-image: url(../images/bg-american-idiot.jpg);
}


:root {
    --bg-color: transparent;
    --text-color: #000000;

    --links: #BE281E;
    --linksmenu: #fdf4ae;
    --golden-opaco: beige;
    --dark-yellow: #4d481f;
    --green: #BE281E;
    --white:#fffdf0;
    --transparent-white:rgb(255, 253, 240, 0.5);
    --text-color: #000000;
    --light-shade: #D34F33;
    --golden: beige;
    --dark-shade: #BE281E;

}

/*backgrounds*/
html {
  background-repeat: repeat;
  animation: collage-anim 45s linear infinite;
  color: black;
  font-family: "footlight";
  letter-spacing: 2px;
}

.bg-bridges {
  background-image: url(../images/bridges1.jpeg);
}

.bg-next-to-normal {
  background-image: url(../images/n2n.jpg);
}

.large-gif {
    width: 300px; /* Adjust to your desired size */
    height: auto; /* Keeps the aspect ratio proportional */
    image-rendering: pixelated; /* Optional: Best for keeping pixel art sharp */
}

  /* top nav */
.top-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 15px;
  margin-bottom: 25px;
}

.top-nav a {
  color: black;
  text-decoration: none;
  font-size: 18px;
  font-family: "JMH Cthulhumbus Arcade UG";
  letter-spacing: 2px;
}

.top-nav a:hover {
  text-decoration: underline;
}

.top-nav {
  width: 100%;
  background-color: #BE281E;
  padding: 10px 0;
  position: fixed;
  top: 50px; 
  left: 0;
  z-index: 999;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}


.top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.top-nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-family: "JMH Cthulhumbus Arcade UG";
  letter-spacing: 2px;
}

.top-nav a:hover {
  text-decoration: underline;
}

body {
  padding-top: 60px;
}

/*footer*/
footer {
    width: 100%;
    padding: 12px 0;
    margin-top: 40px;
    text-align: center;
    font-family: "JMH Cthulhumbus Arcade UG", sans-serif;
    font-size: 18px;
}

/*cursor*/
a:hover,
button:hover,
summary:hover {
    cursor: url('../Cute-Light-Pink.png'), auto;
}

body,
iframe {
    cursor: url('../Cute-Pink-Normal-Select.png'), auto;
}

a:active,
button:active {
    cursor: url('../Cute-Pink-Normal-Select.png'), auto;
}

/* text + containers*/
body {
  text-align: center;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 14px;
  font-family: "Averia";
  cursor: url('../Cute-Pink-Normal-Select.png'), auto;
  scrollbar-color: var(--dark-shade) var(--light-shade);

  background-image: url('./bg.jpg'); 
  background-position: calc(50% + 62px) 0; 
  overflow-x:hidden; 
  background-repeat: no-repeat
}

.flex-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.container-border {
    width: 950px;
    height: 600px;
    background-color: transparent;
    background-image: var(--bgMainContainer);
    background-position: center;
    border-style: solid;
    border-image-slice: 27% 25% 27% 25%;
    border-image-width: 1.5em 1.5em 1.5em 1.5em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round; 
    border-image-source: var(--borderMainContainer);
    
    margin-top: 40px;
    position: relative;
    align-content: center;
}

.custom-cursor:link {
    cursor: var(--cursorlink), auto;
}

.custom-cursor:hover {
    cursor: var(--cursorlink), auto;
}

.custom-cursor:active {
    cursor: var(--cursorlink), auto;
}

h1{
  font-family: "JMH Cthulhumbus Arcade UG";
}

a{
  color: var(--links);
  cursor: var(--cursorlink), auto;
}
  
button{
  cursor: var(--cursorlink), auto;
  font-family: "JMH Cthulhumbus Arcade UG";
}

h2{
  margin: 0px;
}

.section{
  background-color: var(--white);
  box-shadow: 0px 0px 5px var(--dark-shade);
  margin: auto;

  align-content: center;
}

.subtitle{
  color: var(--dark-shade);
  font-style: italic;
  margin-top: -11px;
}

.golden{
  border-image-slice: 22% 33% 34% 33% fill;
  border-image-width: 1.5em 1.5em 1.5em 1.5em;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: round round; 
  border-image-source: var(--borderSource);
  border-style: solid; 

  display: flex; 
  align-items: center; 
  height: 38px; 
  width: 311px; 
  border-radius: 20px; 
  background-clip: padding-box; 
  position: absolute; 
  top: -22px; 
  left: -9px;
}

/*album*/
.album-2{
  width: 220px;
  height: 220px;
  border-radius: 0px;
  background-size: cover;
  margin: auto;
}

.grid {
  display: grid;
  width: 95%;
  grid-template-columns: 302px 600px;
  grid-template-rows: auto auto;
  gap: 15px;
  padding: 10px;
  margin: auto;
  align-content: center;
  justify-content: space-evenly;
}

.item1 {
  grid-row: 1 / 3;
  align-content:end;
}

.align-center {
  display: flex; align-items: center; flex-flow:column;
}

.albumInfo{
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.content{
  width: 1000px;
  display: flex;
  flex-direction: row;
  margin: auto;
}

.albumofthemonth{
  text-align: center;
  align-content: center;
  width: 98%; 
  height: 30%;
}

.favTrack{
  width: 90%; 
  background: linear-gradient(to bottom,rgba(255, 255, 255, 0.801) 0%,var(--light-shade) 100%);
  height: 42px; 
  align-content: center; 
  border-top: 1px solid var(--light-shade); 
  margin-top: 10px;
  opacity: 90%;  
}

.coverTitle{
  width: 90%; 
  height: 80%; 
  margin-top: 8px; 
  border-radius: 5px; 
  background-image: url(./imagenes/background-pattern3.gif); 
  border: 1px solid var(--light-shade);
  overflow: hidden;
}

.albumText{
  background-color: var(--dark-shade); 
  height: 359px; 
  background-image: var(--bgStars); 
  background-blend-mode: var(--blend);
  width: 650px; 
  margin: auto;

  display: flex; 
  align-items: center; 
  flex-flow:column;
}

.displayNone{
  display: none;
}

#album-covers{
  align-content: center;  
  display: flex; 
  flex-direction: row;
  overflow-y: auto;
  scrollbar-color: var(--light-shade) transparent;

  margin: auto;
  width: 67%;
  height: 100%;
}

.portada{
  width: 150px;
  min-width: 150px;
  
  height: 150px;

  background-color: var(--dark-shade);
  background-blend-mode: soft-light;
  border-radius: 0px;
  border: 1px solid var(--transparent-dark-shade);

  background-size: 150px 150px ;
  text-align: center;
  font-size: x-large;
  align-content: center;

  color: var(--golden-opaco);
  text-shadow: 0px 0px 4px var(--dark-yellow);
  box-shadow: 2px 2px 0px var(--dark-shade);
  margin-right: 10px;
}

.portada:hover{
  background-blend-mode: normal;
  text-shadow: none;
  border: 2px solid var(--golden);
  color: transparent;
  box-shadow: 2px 2px 0px beige;
}

#albumsContainer{
  width: 100%; 
  height: 100%; 
  display: flex; 
  flex-direction: row; 
  margin: auto; 
  align-content: center;
}

/* structure */
body {
  border: 5px;
  text-align: center;
}

@keyframes collage-anim {
  0% {background-position: 0px 0px;}
  100% {background-position: -1926px 0px;}
}

.textBlurb {
  text-align: justify;
  text-justify: inter-word;
  width: 900px;
  padding-left: 55px;
}

.chartBlurb {
  text-align: justify;
  text-justify: inter-word;
  width: 440px;
}

.bullets {
  padding-left: 75px;
  padding-right: 75px
}

.chartPanel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.chart {
  width:440px;
  padding-left: 55px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: var(--dark-shade);
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.container-musicals {
  background-color: beige;
  width: 1020px;
  border-radius: 25px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  padding: 25px;
  filter: drop-shadow(10px 5px 4px #333333);
}

/* album */
.grid {
  display: grid;
  grid-template-columns: repeat(8, 110px);
  gap: 15px;
  justify-content: center;   /* ← equal spacing on both sides */
}

/* album card */
.album {
  position: relative;
  width: 110px;
  height: 110px;
}

/* album image */
.thumbnail {
  width: 110px;
  height: 110px;
  display: block;
  position: relative;
  z-index: 1;
}

/* hover */
.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  background: radial-gradient(var(--dark-shade), var(--dark-shade) 0%);
  color: white;
  opacity: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.album:hover .overlay-text {
  opacity: 0.9;
}

.album:hover {
  transform: scale(0.95);
}

.overlay-text h2 {
  font-size: 15px;
  margin: 0 0 3px 0;
}

.overlay-text p {
  font-size: 8px;
  margin: 0;
}