* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

header {
  height: 15vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border-bottom: solid 2px #000;
  background-color: #0005;
  color: #ccc;
}

header h1 {
  align-items: center;
  /* transform: translateY(0.75rem); */
}

#myLink {
background-color: #c005;
padding: 2px 5px;
border-radius: 8px;
border: solid 1px #fff;
}

main {
  min-height: 76vh;
  width: 80vw;
  padding: 1vh 1vw;
  margin: 2vh 2vw;
  background-color: #fff3;
  border: solid 1px #000;
  border-radius: 0.5rem;
}

section#dataInput,
section#dataOutput {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* margin-bottom: 10px; */
  width: 100%;
}

section#dataOutput {
  padding-top: 10px;
  text-align: center;
}

section#dataOutput p {
  text-align: center;
}

#readLevelExplanation {
  font-size: 0.85rem;
  text-align: center;
  margin: 5px 0;
}

output {
  color: #ff0;
  font-weight: bold;
  font-family: monospace, sans-serif;
  margin-top: 10px;
  font-size: 1.5rem;
  text-shadow: 2px 1px 1px #009;
  transform: translateX(-1rem);
}

label {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

/*********** 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: calc(100% - 2rem);
  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;
}
/*********** input range end ***********/

input,
textarea,
select,
button {
  width: 100%;
  border-radius: 0.5rem;
  background-color: #fff6;
}

textarea {
  font-size: 1.25rem;
  font-weight: bold;
  background-color: #fff6;
  height: 25vh;
  width: 100%;
  padding: 5px;
}

input,
select,
button {
  min-height: 25px;
  font-size: 1.25rem;
}

select,
option {
  background: transparent;
  background-color: #fff6;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}

option {
  appearance: none;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  background-color: #000;
}

select:hover {
  appearance: none;
  background-color: #fff3;
}

select.decorated option {
  appearance: none;
  background: #f803;
}

/* select.decorated option:disabled,
select.decorated:hover option:disabled:hover {
  appearance: none;
  color: transparent;
  text-shadow: 0 0 5px #000b;
}  */

/* 
select.decorated:hover option:hover {
  appearance: none;
  background: #f809;
  color: #fff;
} 
*/

button {
  background-color: #fff6;
}

button:hover {
  background-color: #9993;
}

hr {
  width: 100%;
  height: 2px;
  margin-top: 10px;
  background-color: #000;
}

section#dataOutput {
  display: none;
}

#dataOutput span {
  color: #c00;
  font-weight: bold;
}

footer {
  min-height: 5vh;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  border-top: solid 2px #000;
  font-size: 0.75rem;
  background-color: #0005;
  color: #ccc;
}

#timeInput {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#timeInput label{
  width: 25%;
}

#alert {
  display: none;
  text-align: center;
  color: #c00;
  font-weight: bold;
  font-size: 2rem;
  padding-top: 10vh;
}

a,
a:active,
a:visited,
a:hover {
  color: #fff;
  text-decoration: none;
}