:root {
  --transwhite: #fff8;
  --transdarkgrey: #000b;
  --transmiddlegrey: #0008;
  --transdarkblue: #006b;
  --transmiddleblue: #0068;
  --transwhiteBorder: #ffffff88;
  --transwhiteArea: #ffffff20;
  --fontColor: #ffffffaa;
  --darkred: #260210;
} 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  min-height: 100vh;
  background-color: var(--darkred);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

header, 
main, 
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

header {
  height: 25vh;
  height: 25dvh;
  background-color: var(--transwhiteArea);
  border-bottom: solid 1px var(--transwhiteBorder);
  color: var(--fontColor);
}

main {
  width: 100%;
  height: 70vh;
  height: 70dvh;
  color: var(--fontColor);
  flex-direction: column;
  justify-content: space-around;
}

footer {
  height: 5vh;
  height: 5dvh;
  background-color: var(--transwhiteArea);
  border-top: solid 1px var(--transwhiteBorder);
  color: var(--fontColor);
  font-size: 0.9rem;
}

a, a:visited, a:active, a:focus, a:hover {
  color: var(--transwhite);
  text-decoration: none;
}

#timerOutput {
  width: 100vw;
  /* height: 20rem; */
  display: flex;
  justify-content: center;
  align-items: center;
}

#timerLeft {
  font-size: 8vh;
  font-size: 8dvh;
  color: #fffb;
}

label {
  min-width: 50vw;
  min-width: 50dvw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2vh;
  margin: 2dvh;
  font-size: 1.35rem;
}

button {
  width: 100%;
  font-size: 1.35rem;
  height: 10vh;
}

#startLabel {
  display: flex;
}

#startButtom {
  display: block;
}

#newPeriodLabel {
  display: none;
}

#newPeriodButton {
  display: none;
}

#extensionLabel {
  display: none;
}

#extensionButton {
  display: none;
}

#pauseLabel {
  display: none;
}

#pauseButton {
  display: none;
}

#stopResetLabel {
  display: none;
}

#stopResetButton {
  display: none;
}




/*********** ticks for input range ***********/
.range {
  --ticksThickness: 2px;
  --ticksHeight: 100%;
  --ticksColor: silver;
  
  display: inline-block;
  background: silver;
  background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
  background-size: calc(100% / ((var(--max) - var(--min)) / var(--step)) ) var(--ticksHeight);
  position: relative;
  width: 100%;
  height: 10px;
  border-right: solid var(--ticksThickness) var(--ticksColor);
}

.range::before, .range::after {
  font: 1rem monospace, sans-serif;
  content: counter(x);
  position: absolute;
  bottom: -1rem;
}

.range::before {
  counter-reset: x var(--min);
  /* transform: translateX(calc(-50%)); */
}

.range::after {
  counter-reset: x var(--max);
  right: 0;
  /* transform: translateX(calc(50%)); */
}

/*********** reset styles for all browsers ***********/
input[type="range"] {
  margin: 0.75rem 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

input[type="range"]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #99f;
  background: linear-gradient( 90deg, #0000ff, #00ffff, #ffff00, #ff0000);
  border-radius: 1rem;
  height: 1rem;
  border: solid 1px #000;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -0.5rem; /* Centers thumb on the track */
  background-color: #c11;
  border: solid 1px #000;
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  
}
input[type="range"]:hover::-webkit-slider-thumb {
  background-color: #11c;
  border: solid 1px #fff;
}

input[type="range"]:active::-webkit-slider-thumb {
  background-color: #1c1;
  border: solid 1px #fff;
  outline: 2px solid #000;
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #99f;
  background: linear-gradient( 90deg, #0000ff, #00ffff, #ffff00, #ff0000);
  border-radius: 1rem;
  height: 1rem;
  border: solid 1px #000;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  background-color: #c11;
  border: solid 1px #000;
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
}

input[type="range"]:hover::-moz-range-thumb{
  background-color: #11c;
  border: solid 1px #fff;
}
input[type="range"]:active::-moz-range-thumb{
  background-color: #1c1;
  border: solid 1px #fff;
  outline: 2px solid #000;
  outline-offset: 0.125rem;
}

div.range {
  display: none;
}

input#outputNoise {
  margin-bottom: 0;
}

output {
  display: block;
  width: 100%;
  text-align: center;
}

#readersLabel {
  margin-bottom: 0;
}
/*********** input range end ***********/