@font-face {
  font-family: 'attiqueantique_demibold';
  src: url('/path-to-your-font-folder/atticantique_demibold-demo.woff2') format('woff2'),
       url('/path-to-your-font-folder/atticantique_demibold-demo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body, h1, h2, h3, h4, h5, h6, p, a, div, span, td, th {
  font-family: 'attiqueantique_demibold', serif; /* 'serif' as a fallback */
}

.lightr, .lightl {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

:root {
  --playerbg: #A4BE7B;
  --playerborder: #5F8D4E;
  --playertext: #285430;
  --playertitlebg: #5F8D4E;
  --playerbar: #285430;
  --playericons: #5F8D4E;
}

.playercontainer {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  background-color: var(--playerbg);
  border: 3px outset var(--playerborder);
  padding: 5px;
  align-content: center;
  align-items: center;
  font-family: 'attiqueantique_demibold', serif;
}

.playercontainer .now-playing,
.playercontainer marquee,
.playercontainer .trackdurationcontrols,
.playercontainer .trackcontrols button,
.playercontainer .creditstooltip .playercredits {
  color: var(--playertext);
  font-family: inherit;
}

.playercontainer .now-playing {
  width: 100%;
  height: 15%;
  text-align: center;
  font-size: 0.8vw;
}

.playercontainer marquee {
  width: 70%;
  height: 35%;
  border: 3px inset var(--playerborder);
  background-color: var(--playertitlebg);
  color: var(--playertext);
  text-align: center;
  font-size: 1.15vw;
}

.playercontainer .trackdurationcontrols {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4vw;
  font-size: 0.85vw;
  color: var(--playertext);
}

.playercontainer .trackdurationcontrols input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
}

/* Chrome, Safari, Opera, and Edge Chromium Track */
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-runnable-track {
  background: var(--playerbar);
  height: 0.1rem;
}

/* Firefox Track */
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-track {
  background: var(--playerbar);
  height: 0.1rem;
}

/* Chrome, Safari, Opera, and Edge Chromium Thumb */
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-thumb,
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-thumb {
  border: 0.1rem solid var(--playerbar);
  background-color: var(--playericons);
  height: 0.5rem;
  width: 0.5rem;
}

.playercontainer .trackcontrols {
  width: inherit;
  height: 20%;
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: -5%;
}

.playercontainer .creditstooltip:hover .playercredits {
  visibility: visible;
}

@media only screen and (max-width: 750px) {
  .playercontainer .now-playing {
    font-size: 1.7vw;
  }
  .playercontainer marquee {
    font-size: 2.3vw;
  }
  .playercontainer .trackdurationcontrols {
    font-size: 1.7vw;
  }
  .playercontainer .trackcontrols button {
    font-size: 4vw;
  }
}

#retro-counter {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 10px;
  background: #000; /* Black background */
  border: 2px solid #fff; /* White border */
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8); /* Glow effect */
  width: fit-content;
  margin: 20px auto;
}

.counter-digit {
  width: 30px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 28px;
  font-weight: bold;
  color: #fff; /* White text */
  background: linear-gradient(180deg, #444 0%, #111 100%);
  border: 2px solid #777;
  box-shadow: inset 0 0 5px #000, 0 0 5px #888;
  border-radius: 4px; /* Rounded edges for a softer retro feel */
}