/*
Theme Name: Showroom Sounds
Author: Alyx Spurrier
Author URI: Alyxtheartist.com
Version: 1.0   
*/
a{cursor: pointer;}

::selection {
  background: rgba(212, 190, 117, .2); /* Semi-transparent background */

}

.button{
  display:block;
  height: 60px;
  width:100%;
  margin:auto;
  position:relative;
  background-color: #232323;
  border: 2px solid #111111;
  text-transform: uppercase;
  border-radius: 6px;
  margin-top:15px;
  margin-bottom: 15px;
  cursor: pointer;
}

.button:hover{
  background-color: #2d2d2d;
  border: 2px solid #363636;
  transition: 100ms ease-out;
  cursor: pointer;
}
    
.button > span{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  text-align: center;
  color:#d4be75;
}

.button:hover > span{
  color:white;
  transition: 100ms ease-out;
}
    
    
.event-block{
  background-color:#151515;
  z-index: index 999;
  padding:10px 0;
  border:2px solid rgb(42, 42, 42);
  color:rgb(199, 199, 199);
  margin-bottom: 20px;
  border-radius: 6px;
}

.event-photo{
  overflow: none;
  background-size:cover;
  background-position: center;
  height: 250px;
  margin-bottom: 20px;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.video-wrapper{
  background-color:#151515;
  padding:10px;
  border:2px solid rgb(42, 42, 42);
  color:rgb(199, 199, 199);
  margin-bottom: 20px;
  border-radius: 6px;
}

.video-wrapper a{
  color:#d4be75;
  font-weight: 600;
}

.video-wrapper a:hover{
  color:white;
}

.video-wrapper p{
  padding:0;
  margin:0;
  margin-top:10px;
}

.divider{
  display:block;
}

.gold-text{
  color:#d4be75;
}

.gold-link{
  color:#d4be75;
  font-weight: 600;
}

.gold-link:hover{
  color:white;
  }

.large-text{
  font-size: 22px;
}

.details-img{
  width: 100%;
}

/* Overlay */

#overlay {
  position: fixed; /* Fixed position to cover the whole viewport */
  top: 0;
  left: 0;
  width: 100vw; /* Viewport width */
  height: 100vh; /* Viewport height */
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 9999; /* High z-index to ensure it's on top */
  transition: opacity 0.5s ease;
}

#overlayContent {
  background: #171717;
  padding: 20px;
  text-align: center;
  max-width: 600px;
  max-height: 100vh; 
  overflow-y: auto; 
  border-radius: 5px;
  z-index: 9999;
}

#overlayContent p{
  text-align: left;
  z-index: 9999;
}
#overlayContent p, span{
  color:grey;
  z-index: 9999;
}

#overlayContent > h1,h2,h3,h4,h5,h6{
  color:#d4be75;
  z-index: 9999;
}

#closeOverlay {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  font-size: 25px;
  cursor: pointer;
  z-index: 9999;
}

/* Styling the scrollbar for overlayContent */
#overlayContent::-webkit-scrollbar {
  width: 12px; /* Adjust the width of the scrollbar */
}

#overlayContent::-webkit-scrollbar-track {
  background: black; /* Background of the scrollbar track */
}

#overlayContent::-webkit-scrollbar-thumb {
  background-color: #d4be75; /* Color of the scroll handle */
  border-radius: 6px; /* Making the handle pill-shaped */
  border: 3px solid black; /* Optional: Adds a border around the handle */
}

/* Overlay 2 */

#overlay2 {
  position: fixed; /* Fixed position to cover the whole viewport */
  top: 0;
  left: 0;
  width: 100vw; /* Viewport width */
  height: 100vh; /* Viewport height */
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 9999; /* High z-index to ensure it's on top */
  transition: opacity 0.5s ease;
}

#overlayContent2 {
  background: #171717;
  padding: 20px;
  text-align: center;
  max-width: 600px;
  max-height: 100vh; 
  overflow-y: auto; 
  border-radius: 5px;
  z-index: 9999;
}

#overlayContent2 p{
  text-align: left;
  z-index: 9999;
}
#overlayContent2 p, span{
  color:grey;
  z-index: 9999;
}

#overlayContent2 > h1,h2,h3,h4,h5,h6{
  color:#d4be75;
  z-index: 9999;
}

#closeOverlay2 {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  font-size: 25px;
  cursor: pointer;
  z-index: 9999;
}

/* Overlay 3 */

#overlay3 {
  position: fixed; /* Fixed position to cover the whole viewport */
  top: 0;
  left: 0;
  width: 100vw; /* Viewport width */
  height: 100vh; /* Viewport height */
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 9999; /* High z-index to ensure it's on top */
  transition: opacity 0.5s ease;
}

#overlayContent3 {
  background: #171717;
  padding: 20px;
  text-align: center;
  max-width: 600px;
  max-height: 100vh; 
  overflow-y: auto; 
  border-radius: 5px;
  z-index: 9999;
}

#overlayContent3 p{
  text-align: left;
  z-index: 9999;
}
#overlayContent3 p, span{
  color:grey;
  z-index: 9999;
}

#overlayContent3 > h1,h2,h3,h4,h5,h6{
  color:#d4be75;
  z-index: 9999;
}

#closeOverlay3 {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  font-size: 25px;
  cursor: pointer;
  z-index: 9999;
}



/* Styling the scrollbar for overlayContent */
#overlayContent::-webkit-scrollbar {
  width: 12px; /* Adjust the width of the scrollbar */
}

#overlayContent::-webkit-scrollbar-track {
  background: black; /* Background of the scrollbar track */
}

#overlayContent::-webkit-scrollbar-thumb {
  background-color: #d4be75; /* Color of the scroll handle */
  border-radius: 6px; /* Making the handle pill-shaped */
  border: 3px solid black; /* Optional: Adds a border around the handle */
}


/* Styling the scrollbar for overlayContent */
html::-webkit-scrollbar {
  width: 12px; /* Adjust the width of the scrollbar */
}

html::-webkit-scrollbar-track {
  background: black; /* Background of the scrollbar track */
}

html::-webkit-scrollbar-thumb {
  background-color: #d4be75; /* Color of the scroll handle */
  border-radius: 6px; /* Making the handle pill-shaped */
  border: 3px solid black; /* Optional: Adds a border around the handle */
}