* { 
  box-sizing: border-box;

}
.page-wrapper { 
  max-width: 400px;
  width: 100%;
  padding: 0px;
  margin: 0 auto; 
  box-sizing: border-box;
}



#hover-area {
	text-align:left;
    margin: 0 auto;
    display: block;
	width: 400px;
	height: 225px;
}
#reveal {
	background: rgb(255, 0, 0);
	width: 100%;
	display: none;
    border-radius: 3px;
  box-shadow: 1px 1px 3px #555;
  padding: 25px;
}


h1 {
    display: block;
    color:rgb(0, 0, 0);
    z-index: 999;
    line-height: 1.0;
    text-align: left;
    font-size: 17px;
    font-family:'ElektronPixelFont';
    width: 100%;
    max-width: 400px;
    -webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
	margin: 0 auto;
	padding: 0;



}
h1:hover {
	transition-timing-function: ease;
	color: #000000;
	text-shadow: 0 1px 0 #f70505, 0 2px 0 #ff0101, 0 3px 0 #fc0303, 0 4px 0 #fc0101, 0 5px 0 #ef0303, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

h2 {
    color: black ;
    line-height: 1.6;
    font-size: 20px;
    font-family:'ElektronPixelFont';
    width:100%;
    max-width: 400px;
}

h3 {color:aliceblue;
    line-height: 1,3;
    letter-spacing: 0.9;
    z-index: 999;
    font-size: 15px;
    font-family:'ElektronPixelFont';
  text-align:left;
  width: 100%; 
  max-width: 400px;
  margin-bottom: 10px;
}



p  {
    color:aliceblue;
    z-index: 999;
    line-height: 1,3;
    letter-spacing: 0.9;
    font-size: 12px;
    font-family:'ElektronPixelFont';
  text-align:left;
  width: 100%;
  max-width: 400px; 
  margin-bottom: 10px;

}

a {  color:rgb(0, 0, 0);
  line-height: 1,3;
  letter-spacing: 0.9;
  font-size: 20px;
  font-family:'ElektronPixelFont';
text-align:left;
width: 100%;
max-width: 400px; 
margin-bottom: 10px;


}

iframe {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  padding: 0px; 
}


.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: red;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 999;
}

.play-button {
  background: none;
  border: none;
  color: black;
  font-size: 22px;
  cursor: pointer;
  background-color: transparent;
  margin-right: 15px;
}

.progress-container {
  position: relative;
  height: 4px;
  background: black;
  flex-grow: 1;
  border-radius: 2px;
  overflow: hidden;
}

.progress-dot {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  left: 0%;
  transform: translateX(-50%);
  transition: left 0.1s linear;
}

#player-bar.hidden {
  display: none;
}




.now-playing {
  position: fixed;
  bottom: 45px; /* just above the audio bar */
  left: 0;
  width: 100%;
  background: transparent;
  color: white;
  font-family: 'ElektronPixelFont';
  font-size: 12px;
  padding: 4px 10px;
  z-index: 998;
}

.now-playing.hidden {
  display: none;
}

.press-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* Let clicks pass through */
}

.press-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills the screen without distortion */
  object-position: center; /* Keeps it centered */
  display: block;
}

.hidden {
  display: none;
}

#back-to-music {
  position: fixed;
  bottom: 45px; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  color: white;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.fade-in {
  animation: fadeIn 0.6s ease-in-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@font-face {
    font-family:'ElektronPixelFont';
      src: url('/FONT/ElektronPixelFont.eot'); /* IE9 Compat Modes */
      src: url('/FONT/ElektronPixelFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('/FONT/ElektronPixelFont.woff2') format('woff2'), /* Super Modern Browsers */
          url('/FONT/ElektronPixelFont.woff') format('woff'), /* Pretty Modern Browsers */
          url('/FONT/ElektronPixelFont.ttf')  format('truetype'), /* Safari, Android, iOS */
          url('/FONT/ElektronPixelFont.svg#svgFontName') format('svg'); /* Legacy iOS */
      font-weight: 400px;
      font-style: normal;
  
}

@font-face {
  font-family:'Geist';
    src: url('Geist.otf'); /* IE9 Compat Modes */
    src: url('Geist-SemiBold.otf') format('embedded-opentype'), /* IE6-IE8 */
        url('Geist-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */
        url('Geist-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */
        url('Geist-SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('Geist-Semibold.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: 400px;
    font-style: normal;

}

@font-face {
  font-family:'Univers';
    src: url('univers/Univers\ 39\ Thin\ Ultra\ Condensed\ Regular.eot'); /* IE9 Compat Modes */
    src: url('univers/Univers\ 39\ Thin\ Ultra\ Condensed\ Regular.otf') format('embedded-opentype'), /* IE6-IE8 */
        url('univers/Univers\ 39\ Thin\ Ultra\ Condensed\ Regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('univers/Univers\ 39\ Thin\ Ultra\ Condensed\ Regular.woff') format('woff'), /* Pretty Modern Browsers */
        url('')  format('truetype'), /* Safari, Android, iOS */
        url('Univers 39 Thin Ultra Condensed.svg#FontName') format('svg'); /* Legacy iOS */
    font-weight: 400px;
    font-style: normal;

}