@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=New+Rocker&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: rgb(6, 6, 6);
}

/* main */

#main-page {
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 60px 5fr 1fr 1fr;
  width: 100vw;
  height: 100vh;
}

.test-header {
  display: contents;
}

.nav-box {display: none;}

#main-page-header {
  grid-area: 1/2/2/3;
}

.header { /*make header sticky for mobile view*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.header > div {
  color: whitesmoke;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 900;
}

.header-highlight {
  font-family: "New Rocker", system-ui;
  font-size: 1.5rem; 
  text-align: center;
  background: linear-gradient(
    135deg,
    #ddd 0%,
    #ff000057 25%,
    #de6400 50%,
    #ffef0ea2 75%,
    #ddd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
	text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    2px 2px 4px rgba(0,0,0,0.6);
}

.burger-button-container {
  grid-area: 1/3/2/4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.burger-button {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

#slideshow-container {
  grid-area: 2/1/end/4;
  background: black;
  overflow: hidden;
}

#next-button-container {grid-area: 3/3/4/4;}
#prev-button-container {grid-area: 3/1/4/2;}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#prev,
#next {
  color: white;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  font-weight: 700;
  font-size: 1.75rem;
  transition: 0.4s ease;
  border: none;
  z-index: 2;
  transition: transform 0.3s ease;
  text-shadow: 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black;
}
 
#next:hover {
  transform: translateX(4px);
  /* font-size: 2rem; */
}

#prev:hover {
  transform: translateX(-4px);
  /* font-size: 2rem; */
}

#dots-container {
  grid-area: 4/2/5/3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 50%;
  transition: background-color 0.4s ease;
  text-shadow: 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black;
  z-index: 1;
}

.active,
.dot:hover {
  background-color: white;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* /main */

/* slideshow */

.mySlides {
  display: none;
  height: 100%;
  width: 100%;
}

.slide-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.233);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  box-shadow: inset 0 0 10rem 5rem #000;
  /* padding: 1rem; */
}

.slide-container > a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: white;
  font-family: 'Metal Mania';
  font-size: 3rem;
  text-shadow: 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black;
  transition: transform 0.3s ease-out;
}

/* hover animations */
.highlight-text {
  display: inline-block;
  position: relative;
  transition: all 0.3s ease;
}

.highlight-text:hover {transform: scale(1.05);}

.highlight-text::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: whitesmoke;
  transition: transform 0.25s ease-out;
  transform-origin: bottom right;
}

.highlight-text:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
/* /hover animations */

.page-link:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
  /* transform: scale(1.01); */ /* When hovering over the page-links, around the prev and next buttons a subtle quadratic area appears */ 
}

#evolution-page-link {background-image: url(../Images/rock-collage-fullhd.jpg);}

#band-page-link {background-image: url(../Images/band-fullhd.jpg);}

#keyboard-page-link {background-image: url(../Images/crowd.jpg);}

#quiz-page-link {background-image: url(../Images/instruments-fullhd.jpg);}

/* /slideshow */

/* curtain menu */

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-content {
  text-align: center;
}

.overlay a {
  padding: 18px;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* /curtain menu */

@media screen and (min-width: 425px) {
  .slide-container a {font-size: 4rem;}
}

@media screen and (min-width: 1000px) {
  #main-page {
    grid-template-rows: 80px 1fr 1fr 80px;
  }

  .test-header {
    background: rgb(6, 6, 6);
    grid-area: 1/1/2/end;
    display: flex;
    justify-content: space-evenly ;
    align-items: center;
    z-index: 5;
    position: sticky;
    top: 0;
    box-shadow: 0 -10px 3rem 2rem;
  }

  .nav-box {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .nav-box a {
    color: whitesmoke;
    font-size: 1.3rem;
    font-family: 'New Rocker', system-ui;
    text-decoration: none;
  }

  .button-container {
    display: flex;
    align-items: flex-start;
  }

  .header > div {font-size: 1.3rem;}

  .header-highlight {font-size: 1.75rem;}

  .slide-container {box-shadow: inset 0 0 10rem 5rem #000000;}

  .slide-container a {font-size: 5rem;}

  #prev,
  #next {font-size: 2rem;}

  .dot {
    width: 14px;
    height: 14px;
  }

  /* curtain-menu */
  .burger-button-container,
  .burger-button,
  .overlay {display: none;}
  /* /curtain-menu */

}


/* HISTORY PAGE */


.text-metal {
	font-family: "New Rocker";
}

.grid-container {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: 60px 1fr;
	width: 100%;
	min-height: 100vh;
}

/* .header { 
	grid-area: 1/1/2/4;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	box-shadow: 0 -10px 2rem 2rem ;
}

.header,
.burger-button-container {
	position: sticky;
	top: 0;
	z-index: 3;
}

.header > div {
  color: whitesmoke;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 900;
}

.header-highlight {
  font-family: "New Rocker", system-ui;
  font-size: 1.5rem; 
  text-align: center;
  background: linear-gradient(
    135deg,
    #ddd 0%,
    #ff000057 25%,
    #de6400 50%,
    #ffef0ea2 75%,
    #ddd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
	text-shadow:
	0 0 2px rgba(255,255,255,0.8),
	2px 2px 4px rgba(0,0,0,0.6);
}

.burger-button-container {
  grid-area: 1/3/2/4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.burger-button {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
} */

.grid-item-main {
	grid-area: 2/1/3/4;
	padding: 0 0.5rem;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-blend-mode: color;
	box-shadow: inset 0em 0em 10em 7em #000;
	color: whitesmoke;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(109, 109, 109); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 20%; /* Rounded corners */
  font-size: 20px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* history-page-main */
#history-page-main {
	row-gap: 17rem;
	display: grid;
	grid-template-columns: 1fr 3fr 8fr;
  background-image: url(../Images/rock-collage-fullhd.jpg);
  background-color: rgba(0, 0, 0, 0.607);
}

#history-page-header {
  grid-area: 1/2/2/3;
}

#ruler {
	display: flex;
	justify-content: center;
	grid-area: 1/1/10/2;
}

#ruler > div {
	background-color: white;
	width: 3px;
}

.ruler-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.ruler-dots > div {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgb(255, 128, 0);
	border: 3px solid rgb(106, 66, 21);
}

.audio-player {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.song-title {
	font-size: 0.9rem;
	font-weight: normal;
  	opacity: 0;
  	transition: opacity 0.5s ease;
}

.song-title.show {opacity: 1;}

.dates {
	display: flex;
	align-items: center;
	justify-content: start;
}

.dates,
.song-title {
	font-family: sans-serif;
}

.dates,
.media-container {font-weight: 700;}

.media-container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	gap: 0.5rem;
	font-family: serif;
}

.text-background > div {
	background: rgba(0, 0, 0, 0.623);    
	box-shadow: 0 0 8px 2px black;
	border-radius: 8px;  
	width: 100%;
	height: 100%;
}

#text-background1 {grid-area: 1/2/2/4;}
#text-background2 {grid-area: 2/2/3/4;}
#text-background3 {grid-area: 3/2/4/4;}
#text-background4 {grid-area: 4/2/5/4;}
#text-background5 {grid-area: 5/2/6/4;}
#text-background6 {grid-area: 6/2/7/4;}
#text-background7 {grid-area: 7/2/8/4;}
#text-background8 {grid-area: 8/2/9/4;}

#dot1 {
  grid-area: 1/1/2/2; 
  margin-top: 2rem;
}
#date-1922 {
  grid-area: 1/2/2/3; 
  margin-top: 2rem;
}
#content-1922 {
  grid-area: 1/3/2/4;
  margin-top: 2rem;
}	

#dot2 {grid-area: 2/1/3/2;}
#date-1952 {grid-area: 2/2/3/3;}
#content-1952 {grid-area: 2/3/3/4;}

#dot3 {grid-area: 3/1/4/2;}
#date-1956 {grid-area: 3/2/4/3;}
#content-1956 {grid-area: 3/3/4/4;}

#dot4 {grid-area: 4/1/5/2;}
#date-1964 {grid-area: 4/2/5/3;}
#content-1964 {grid-area: 4/3/5/4;}

#dot5 {grid-area: 5/1/6/2;}
#date-1971 {grid-area: 5/2/6/3;}
#content-1971 {grid-area: 5/3/6/4;}

#dot6 {grid-area: 6/1/7/2;}
#date-1980 {grid-area: 6/2/7/3;}
#content-1980 {grid-area: 6/3/7/4;}

#dot7 {grid-area: 7/1/8/2;}
#date-1991 {grid-area: 7/2/8/3;}
#content-1991 {grid-area: 7/3/8/4;}

#dot8 {grid-area: 8/1/9/2;}
#date-1994 {grid-area: 8/2/9/3;}
#content-1994 {grid-area: 8/3/9/4;}

#content-end  {
	grid-area: 9/2/10/4;
	font-family: serif;
	text-shadow: 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black;
	padding-bottom: 0.5rem;
}


/* /history-page-main */

@media screen and (max-width: 600px) {
	#history-page-main {
		grid-template-columns: 1fr 11fr;
		row-gap: 0;
		grid-template-rows: repeat(8, 1fr 3fr 4fr);
	}

	#ruler {grid-area: 1/1/end/2;}

	.dates {justify-content: start;}

	#text-background1 {grid-area: 1/2/3/3;}
	#text-background2 {grid-area: 4/2/6/3;}
	#text-background3 {grid-area: 7/2/9/3;}
	#text-background4 {grid-area: 10/2/12/3;}
	#text-background5 {grid-area: 13/2/15/3;}
	#text-background6 {grid-area: 16/2/18/3;}
	#text-background7 {grid-area: 19/2/21/3;}
	#text-background8 {grid-area: 22/2/24/3;}

	#dot1 {grid-area: 1/1/2/2;}
	#date-1922 {grid-area: 1/2/2/3;}
	#content-1922 {grid-area: 2/2/3/3; margin: 0;}

	#dot2 {grid-area: 4/1/5/2;}
	#date-1952 {grid-area: 4/2/5/3;}
	#content-1952 {grid-area: 5/2/6/3;}

	#dot3 {grid-area: 7/1/8/2;}
	#date-1956 {grid-area: 7/2/8/3;}
	#content-1956 {grid-area: 8/2/9/3;}

	#dot4 {grid-area: 10/1/11/2;}
	#date-1964 {grid-area: 10/2/11/3;}
	#content-1964 {grid-area: 11/2/12/2;}

	#dot5 {grid-area: 13/1/14/2;}
	#date-1971 {grid-area: 13/2/14/3;}
	#content-1971 {grid-area: 14/2/15/3;}

	#dot6 {grid-area: 16/1/17/2;}
	#date-1980 {grid-area: 16/2/17/3;}
	#content-1980 {grid-area: 17/2/18/3;}

	#dot7 {grid-area: 19/1/20/2;}
	#date-1991 {grid-area: 19/2/20/3;}
	#content-1991 {grid-area: 20/2/21/3;}

	#dot8 {grid-area: 22/1/23/2;}
	#date-1994 {grid-area: 22/2/23/3;}
	#content-1994 {grid-area: 23/2/24/3;}

	#content-end {grid-area: 25/2/26/3;}

	.dates,
	.media-container {font-size: 1rem;}

	.song-title {
		font-size: 0.75rem;
		padding-top: 0.5rem;
	}
}

@media screen and (min-width: 1000px) {
	.grid-container {
    grid-template-rows: 80px 1fr;
  }

  #history-page-main {
		grid-template-columns: 20fr 1fr 20fr;
		padding: 0 2rem;
	}

	#date-wrapper > *:nth-child(odd) {margin-left: auto;} 
	#date-wrapper > *:nth-child(even) {margin-right: auto;}

	#ruler {grid-area: 1/2/10/3;}

	.text-background {display: none;}

	.media-container {
		font-size: 1.5rem;
		background: rgba(0, 0, 0, 0.623);    
		box-shadow: 0 0 1rem 0.25rem black;
		border-radius: 8px; 
	}

	.dates {
		font-size: 1.5rem;
		text-shadow: 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black, 0 0 1.25rem black;
	}

	.song-title {font-size: 1rem;}

	#date-1922,
	#date-1956,
	#date-1971,
	#date-1991 {text-align: right;}

	#content-1952,
	#content-1964,
	#content-1980,
	#content-1994 {text-align: right;}

	#date-1922 {grid-area: 1/1/2/2;}
	#dot1 {grid-area: 1/2/2/3;}
	#content-1922 {grid-area: 1/3/2/4;}

	#date-1952 {grid-area: 2/3/3/4;}
	#dot2 {grid-area: 2/2/3/3;}
	#content-1952 {grid-area: 2/1/3/2;}

	#date-1956 {grid-area: 3/1/4/2;}
	#dot3 {grid-area: 3/2/4/3;}
	#content-1956 {grid-area: 3/3/4/4;}

	#date-1964 {grid-area: 4/3/5/4;}
	#dot4 {grid-area: 4/2/5/3;}
	#content-1964 {grid-area: 4/1/5/2;}

	#date-1971 {grid-area: 5/1/6/2;}
	#dot5 {grid-area: 5/2/6/3;}
	#content-1971 {grid-area: 5/3/6/4;}

	#date-1980 {grid-area: 6/3/7/4;}
	#dot6 {grid-area: 6/2/7/3;}
	#content-1980 {grid-area: 6/1/7/2;}

	#date-1991 {grid-area: 7/1/8/2;}
	#dot7 {grid-area: 7/2/8/3;}
	#content-1991 {grid-area: 7/3/8/4;}
	
	#date-1994 {grid-area: 8/3/9/4;}
	#dot8 {grid-area: 8/2/9/3;}
	#content-1994 {grid-area: 8/1/9/2;}

	#content-end  {grid-area: 9/3/10/4;}
}

#date-wrapper {
	display: contents;
}


/* /HISTORY PAGE */