@import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&family=Righteous&display=swap');

:root {
  --eggplant: rgb(42,27,60);
  --white: rgb(255, 255, 255);
  --offwhite: rgb(245, 245, 245);
  --ivory: rgb(255, 255, 230);
  --lightgray: rgb(200, 200, 200);
  --black:  rgb(0, 0, 0);
  --fuschia: rgba(217,63,135, 1);
  --transfuschia: rgba(217,63,135, 0);
  --fuschiaglow: rgba(217,63,135, .3);
  --purpleheart: rgb(10,0,5);
  --salmon: rgb(217, 0, 80);
  --purple: rgb(68,49,141);
  --charcoal: rgb(17, 17, 17);
  --carbon: rgb(34, 34, 34);
  --darkgray: rgb(51, 51, 51);
  --gray: rgb(151, 151, 151);
  --green: rgb(0, 255, 100);
  --red: rgb(255, 30, 0);
  --orange: rgb(255, 100, 0);
  --cyan: rgb(0, 210, 255);
  --cyanglow: rgba(0, 210, 255, .3);
  --mist: rgba(255, 255, 255, .4);
}

html {
  background-image: radial-gradient(at top, var(--carbon) 0%, var(--charcoal) 20%, var(--black) 100%);
  background-repeat:no-repeat, repeat, repeat;
}

html, body {
  font-family: 'Baloo Tammudu 2', cursive;
  color: var(--white);
  margin:0;
  padding:0;
  height: 100%;
}

.centered {
  max-width: 2900px;
  margin: auto;
}

.hidden {
  display: none;
}

.navbar ol, .navbar li{
  list-style: none;
  padding:0;
}

.navbar ol {
  float: right;
  height: 100%;
}

.navbar li {
  float: left;
  padding: 0 2em 0 2em;
  max-width: 20em;
  width: 12em;
  line-height: 1em;
  border-left: .1em solid var(--carbon);
  height: 6em;
}

.navbar select {
  border-radius: 1em;
  padding: .15em .5em .15em .5em;
  line-height: .7em;
  font-size: .9em;
  margin: .0 0 0 0;
  display: block;
  width: 13em;
  background-color: var(--offwhite);
  box-shadow: inset 0 0 .5em var(--black);
  border: .15em solid var(--gray);
  border-bottom: .15em solid var(--lightgray);
  border-right: .15em solid var(--lightgray);
}

.navbar button {
  background-color: var(--darkgray);
  border-radius: 1em;
  border: .1em solid var(--gray);
  border-bottom: .15em solid var(--black);
  border-right: .15em solid var(--black);
  font-size: .2em;
  width: 8em;
  margin: -1em 0 0 1em;
  float: right;
  cursor: pointer;
  padding: 1em;
}

div.navbar {
  height: 8em;
  background-image: linear-gradient(var(--carbon), var(--black));
  width: 100%;
  padding: .05em 0 0 0;
  overflow: hidden;
  box-shadow: 0 0 1em var(--fuschia);
  animation: box-shadow-fade;
  animation-duration: 2s;

}

.navbar label, .navbar span {
  font-size: .8em;
  vertical-align: middle;
}

.navbar h5 {
  color: var(--cyan);
  margin: .4em 0 .3em 0;
  padding: 0;
  line-height: 1em;
  font-weight: bold;
  text-shadow: 0 0 .01em var(--mist);
  display: block;
  font-size: 1.4em;
  text-align: center;
  text-decoration: underline;
  text-shadow: 0 0 .5em var(--cyanglow);

}

.navbar-sub {
  padding: 0 0 0 1em;
  height: 100%;
  animation-name: slide-down;
  animation-duration: 1s;
}

.navbar input[type="checkbox"], input[type="radio"] {
  margin: 0;
}

.navbar input[type="checkbox"] {
  margin-left: 1.5em;
}


#app-name, #app-slogan  {
  position: fixed;  
}

#app-slogan  {
  margin: 5.5em 0 0 3.6em;
  text-align: right;
  width: 19.8em;
  text-shadow: 0 0 .5em var(--fuschia);
}

#app-name {
  font-size: 3.9em;
  padding: 0;
  margin: .2em 0 0 0;
  font-family: 'Indie Flower', cursive;
  font-weight: bold;
  text-decoration: underline;
  text-shadow: 0 0 .5em var(--fuschiaglow);
}

#app-name i{
  color: var(--fuschia);
  padding: .3em .3em 0 0;
}

.main {
  padding: 9em 0 0 0;
}

#fretboard {
  position: relative;
  height: 19.5em;
  max-height: 19.4em;
  padding:0;
  margin: auto;
  animation-name: opacity-fade;
  animation-duration: 4s;
}

#neck-position-div {
  height:20em;
  max-height: 20em;
  width: 42em;
  position: absolute;
  border: 1px solid var(--cyanglow);
  border-radius: 1em;
  min-height: 2.7em;
  min-width: 1em;
  max-width: 99.3em;
  padding:0;
  margin:-.9em 0 0 24px;
  box-shadow: 0 0 10px var(--cyan);
  transition: border 1s, box-shadow 1s;
  cursor: grab;
}

#neck-position-div:hover {
  border: 1px solid var(--fuschiaglow);
  box-shadow: 0 0 10px var(--fuschia);
}

.fuschia {
  color: var(--fuschia);
}

.green {
  color: var(--green);
}

.red {
  color: var(--red);
}

#formula-radio {
  float: left;
}

div.ui-slider {
  height: .3em;
  margin-top: .6em;
  text-align: center;
  background-image: none;
  background-color: var(--gray) !important;
  border: .15em solid var(--black);
  border-top: .15em solid var(--offwhite);
  border-left: .15em solid var(--offwhite);
  box-shadow: 0 0 .5em var(--cyan);
}

.ui-slider-handle.ui-state-default.ui-corner-all {
  margin-top: -.3em;
  background: none;
  border-radius: 1em;
  outline: none;
  border: .15em solid var(--gray);
  border-top: .15em solid var(--offwhite);
  border-left: .15em solid var(--offwhite);
  box-shadow: 0 0 .5em var(--black);
  background-color: var(--gray);
  background-image: linear-gradient(to bottom right, var(--gray), var(--carbon));
  cursor: grab;
}

g.notes {
  animation-name: opacity-fade;
  animation-duration: 1s;
}

@keyframes opacity-fade {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slide-down {
  from {margin-top: -100em;}
  to {margin-top: inherit;}
}

@keyframes slide-right {
  from {margin-left: -10em;}
  to {margin-left: 300em;}
}

@keyframes box-shadow-fade {
  from {box-shadow: 0 0 1em var(--transfuschia);}
  to {box-shadow: 0 0 1em var(--fuschia);}
}

div.flash {
  width: 5em;
  height: .1em;
  box-shadow: 0 0 1em var(--white);
  margin-left: 300em;
  animation: slide-right;
  animation-duration: 3s;
}

#tuning-note-value, #tempo-value {
  padding: 0 0 0 .3em;
  color: var(--cyan);
  font-weight: bold;
}