@font-face{font-family:Helvetica;font-weight:400;font-style:normal;src:url("fonts/helvetica.woff2") format("woff2"),url('fonts/helvetica.woff2')}
@font-face{font-family:Helvetica;font-weight:700;font-style:normal;src:url("fonts/helvetica_bold.woff2") format("woff2"),url('fonts/helvetica_bold.woff2')}
@font-face {
  font-family: "VCROSDMono";
  src: url("fonts/VCR.eot"); /* IE9 Compat Modes */
  src: url("fonts/VCR-.eot#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/VCR.otf") format("opentype"), /* Open Type Font */
    url("fonts/VCR.svg") format("svg"), /* Legacy iOS */
    url("fonts/VCR.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/VCR.woff") format("woff"), /* Modern Browsers */
    url("fonts/VCR.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

body, html {
  font-size: 1.5vh;
  color: #fff;
  font-family: "VCROSDMono";
  text-shadow: black 2px 2px 1px, black -2px 2px 1px, black -2px -2px 1px, black 2px -2px 1px, black 0px 2px 1px, black 0px -2px 1px, black 2px 0px 1px, black -2px 0px 1px;
  height: 100%;
  margin: 0;
  padding: 0;
  /* cursor:  */
}

.vhs-bg {
  background-image: url("LBlS.gif");
  background-size: cover;
}

.referral-link {
  text-decoration: none;
  color: inherit; /* Ensure the link inherits the text color */
  transition: opacity 0.3s, background-color 0.3s; /* Smooth transition */
}

.referral-link:hover {
  color: #c6d6de; /* Adds a white transparent box */
  opacity: 0.5;
}


.font-hel-white-shadow {
  margin: 0;
  color: #fff;
  font-family:Helvetica,"Helvetica Neue",Arial,"Lucida Grande",sans-serif;
  text-shadow: black 2px 2px 1px, black -2px 2px 1px, black -2px -2px 1px, black 2px -2px 1px, black 0px 2px 1px, black 0px -2px 1px, black 2px 0px 1px, black -2px 0px 1px;
} .hel-bond {font-weight: 700;} .hel-light {font-weight: 400;}

.font-vhs-white-shadow {
  margin: 0;
  color: #fff;
  font-family: "VCROSDMono";
  text-shadow: black 2px 2px 1px, black -2px 2px 1px, black -2px -2px 1px, black 2px -2px 1px, black 0px 2px 1px, black 0px -2px 1px, black 2px 0px 1px, black -2px 0px 1px;
}

.font-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	text-align: center;
}

.font-footer {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 97.5%;
  bottom: auto;
  transform: translate(-50%, -97.5%);
  -webkit-transform: translate(-50%, -97.5%);
  -moz-transform: translate(-50%, -97.5%);
  -ms-transform: translate(-50%, -97.5%);
  -o-transform: translate(-50%, -97.5%);
}

.font-header {
  position: absolute;
	text-align: center;
	left: 50%;
	top: 2.5%;
	bottom: auto;
	transform: translate(-50%, -2.5%);
	-webkit-transform: translate(-50%, -2.5%);
	-moz-transform: translate(-50%, -2.5%);
	-ms-transform: translate(-50%, -2.5%);
	-o-transform: translate(-50%, -2.5%);
}

/* Style for the volume slider */
#volume-slider {
  /* Remove default appearance in WebKit browsers */
  -webkit-appearance: none;
  background: transparent; 
  /* You may want to give it a fixed width, etc. */
  width: 120px;
  height: 10px;
  outline: none; /* Optional: remove outline on focus */
  margin-left: 1vw;
  vertical-align: middle; /* Align with the "test" text if you like */
}

/* TRACK - Chrome, Safari, Opera, and Edge (WebKit/Blink-based) */
#volume-slider::-webkit-slider-runnable-track {
  background: white;           /* White track */
  border: 1px solid black;     /* Black outline */
  height: 10px;
  cursor: pointer;
}

/* THUMB - Chrome, Safari, Opera, and Edge (WebKit/Blink-based) */
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: black;           /* Black thumb */
  border: 1px solid black;
  border-radius: 50%;          /* Round thumb (optional) */
  cursor: pointer;
  margin-top: -5px;            /* Center thumb vertically on the track */
}

/* TRACK - Firefox */
#volume-slider::-moz-range-track {
  background: white;
  border: 1px solid black;
  height: 10px;
  cursor: pointer;
}

/* THUMB - Firefox */
#volume-slider::-moz-range-thumb {
  background: black;
  border: 1px solid black;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

/* TRACK - IE/Edge (non-Chromium version) */
#volume-slider::-ms-track {
  background: transparent; /* IE/Edge uses separate track pieces */
  border-color: transparent;
  color: transparent;
  width: 100%;
  height: 10px;
  cursor: pointer;
}

/* THUMB - IE/Edge */
#volume-slider::-ms-thumb {
  background: black;
  border: 1px solid black;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

/* Optional: the active portion of track before the thumb (Chrome) */
#volume-slider::-webkit-slider-thumb:active {
  background: #666;
}

/* For older IE: the area "before" the current value */
#volume-slider::-ms-fill-lower {
  background: white;
  border: 1px solid black;
}

/* For older IE: the area "after" the current value */
#volume-slider::-ms-fill-upper {
  background: white;
  border: 1px solid black;
}
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {  
  -webkit-appearance: none;
}