@font-face {font-family: "Courier New woff2"; src: url("../fonts/CourierNewLatinBasic.woff2") format("woff2"); font-weight: 400; font-style: normal;}

:root.light {
  --foregroundColor: 0,0,0;
  --backgroundColor: 255,255,255;
  --divisorColor: 220,220,220,1;
  --elementFilter: none;
}
:root.dark {
  --foregroundColor: 255,255,255;
  --backgroundColor: 68,75,68;
  --divisorColor: 220,220,220,0.5;
  --elementFilter: invert(100%);
}

html, body {font-family: "Courier New woff2", "Courier New", Courier, "Liberation Mono", "DejaVu Sans Mono", "Nimbus Mono L", Menlo, Monaco, Consolas, "Lucida Console", monospace;
            font-size: 32px; line-height: 1.5; color: rgb(var(--foregroundColor)); font-weight: 400;
            margin: 0; padding: 0; box-sizing: border-box; background-color: rgb(var(--backgroundColor));}

.fontShadow {filter: drop-shadow(0px 0px 2px rgba(var(--foregroundColor),0.15));}
.waveShadow {filter: drop-shadow(0px 0px 2px rgba(var(--foregroundColor),0.2));}

.page {display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: calc(var(--vh) * 100); width: 1000px; margin: 0 auto;}

.header {display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;
         font-size: 50px; line-height: 1; word-spacing: -0.2rem; letter-spacing: 0rem;}

.musicCode {display: flex; flex-direction: row; align-items: center; width: 100%;
            font-size: 38px; line-height: 1; word-spacing: -0.2em; letter-spacing: -0.1em;}
.musicCode > div:not(.vDivider) {flex: 1 1 0; min-width: 0; text-align: center;}

.footer {display: flex; flex-direction: row; align-items: center; width: 100%;
         font-size: 42px; line-height: 1; word-spacing: -0.2em; letter-spacing: -0.1em;}

.content {min-width: 700px; min-height: 700px; flex: 1; display: flex; justify-content: center; align-items: center;  overflow: hidden;}

.hDivider {min-height: 1px; background: rgba(var(--divisorColor)); width: 100%; margin: 0 auto;}
.vDivider {width: 1px; background: rgba(var(--divisorColor)); height: calc(var(--divider-height, 100%) - 12px); margin: auto 0;}

.mouseOverOpacity {opacity: 0.75; filter: drop-shadow(0px 0px 2px rgba(var(--foregroundColor),0.2));}
.mouseOverOpacity:hover {opacity: 1.0; filter: drop-shadow(0px 0px 3px rgba(var(--foregroundColor),0.4)); cursor: pointer;}

.tempoPulse {animation: pulseFade var(--beat-sec) steps(var(--steps-30fps), end) infinite;}
@keyframes pulseFade {
  0%   { opacity: 1.0; }
  100% { opacity: 0.5; }
}

#playButton1 {animation: pulseButton 2s steps(30, end) infinite; filter: drop-shadow(0px 0px 2px rgba(var(--foregroundColor),0.2)); transition: animation-duration 1s linear;}
#playButton1:hover {animation: pulseButtonHover 1s steps(30, end) infinite; filter: drop-shadow(0px 0px 3px rgba(var(--foregroundColor),0.5)); cursor: pointer;}
@keyframes pulseButton {
  0%   { opacity: 0.75; }
  90%  { opacity: 0.40; }
  100% { opacity: 0.75; }
}
@keyframes pulseButtonHover {
  0%   { opacity: 1.00; }
  100% { opacity: 0.50; }
}