@charset "UTF-8";

@font-face {
    font-family: 'Garamond';
    src: url('fonts/adobe_garamond_pro_regular.ttf'),
		 url('fonts/adobe_garamond_pro_bold.ttf'),
	     url('fonts/adobe_garamond_pro_italic.ttf');
    font-weight: normal;
}



a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
    color: #A9A9A9;
}
img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}.indent {
	text-indent: 30px;
}
.chinesesmalltext {
	font-size: 13px;
}
.two_person_yellow {
	color: #FFCC33;
}
.solo_orange {
	color: #F96;
}

#index img.normal {
  display: block;
  position: static; /* or whatever default positioning you want */
  z-index: auto;
}

 /* Below is for the rollover image function */
element.style {}

.special a {
  display: block;
}

#index img {
  display: none;
  
  /* These things position the image */
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: calc(100vh - 2em);
  width: auto;
  
  /* z-index places it behind the text */
  z-index: -1;
}

#index a.special:hover + img {
  display: block;
}

#Chinese img {
  display: none;
  
  /* These things position the image */
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: calc(100vh - 2em);
  width: auto;
  
  /* z-index places it behind the text */
  z-index: -1;
}

#Chinese a.special:hover + img {
  display: block;
}

#music img {
  display: none;
  
  /* These things position the image */
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: calc(100vh - 2em);
  width: auto;
  
  /* z-index places it behind the text */
  z-index: -1;
}

#music a.special:hover + img {
  display: block;
}

#music_chinese img {
  display: none;
  
  /* These things position the image */
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: calc(100vh - 2em);
  width: auto;
  
  /* z-index places it behind the text */
  z-index: -1;
}

#music_chinese a.special:hover + img {
  display: block;
}

/* Below is for images not affected by the rollover image function */
#index img.normal {
  display: block;
  position: static; /* or whatever default positioning you want */
  z-index: auto;
}

 /* Below is for images adaptive to devices */
.responsive-image-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;  /* Check if padding is limiting width */
  margin: 0;   /* Ensure no extra space around */
}

.responsive-image-column img {
  width: 100%;
  height: auto;
  max-width: none;  /* Remove max-width to allow the image to grow */
  margin-bottom: 1em;
  object-fit: contain; /* If you need to maintain aspect ratio without cropping */
}