@layer local{

/* Grid Container */
*{
  --amp:orange;
  --fre:blue;
  --wav:dodgerblue;
  --pha:green;
}

div#grid-container{
  margin:2vh 1vw;
  display:grid;
  min-height:80vh;
  grid-template-columns:20% 20% 20% 20% 20%;
  grid-template-rows:60% 40%;
}

div#grid-container div#Plot{
  margin:auto;
  padding:1%;
  padding-left:3%;
  grid-column: 3 / span 3;
  grid-row: 1 / span 2;
  width:100%;
}

/* Slider */
div#grid-container div#Controls{
  grid-column: 1 / span 2;
  grid-row: 1;
  padding:0;
  display:grid;
  width:100%;
  height:100%;
  grid-template-rows:10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  background: #d3d3d3;
  border-radius:15px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin:auto;
 }
.slider:hover {
  opacity: 0.9;
  border-radius:10px;
 }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: ew-resize;
  border-radius:50%;
  opacity: 1;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: ew-resize;
  opacity: 1;
}
.slider::-webkit-slider-thumb:hover {
  border-radius:40%;
}
.slider::-moz-range-thumb:hover {
  border-radius:40%;
}
.slider#amp::-webkit-slider-thumb {
  background: var(--amp);
  cursor: ns-resize;
} .slider#amp::-moz-range-thumb {
  background: var(--amp);
  cursor: ns-resize;
}
.slider#freq::-webkit-slider-thumb {
  background: var(--fre);
} .slider#freq::-moz-range-thumb {
  background: var(--fre);
}
.slider#wavl::-webkit-slider-thumb {
  background: var(--wav);
} .slider#wavl::-moz-range-thumb {
  background: var(--wav);
}
.slider#phase::-webkit-slider-thumb {
  background: var(--pha);
} .slider#phase::-moz-range-thumb {
  background: var(pha);
}
.slider#amp{
  grid-column:1;
  grid-row:6;
  transform-origin:10px 10px;
  transform:translateY(110px) rotate(-90deg);
  width:240px;
}
.slider#freq{
  grid-column:4 / span 7;
  grid-row:1;
  width:100%;
}
.slider#wavl{
  grid-column:4 / span 7;
  grid-row:2;
  width:100%;
}
.slider#phase{
  grid-column:2 / span 8;
  grid-row:10;
  width:100%;
}

/* Sample */
div#samp{
  grid-column:2 / span 9;
  grid-row:3 / span 7;
  width:100%;
  height:100%;
  border:2px solid red;
  margin:auto;
}

/* Equations */
div#grid-container div#Equations{
  grid-column: 1 / span 2;
  grid-row: 2;
  text-align:center;
  font-size:1.5em;
  white-space:nowrap;
  z-index:var(--z-content);
}
div#grid-container div#Equations p{
  margin-left:-2em;
}
span.amp{
  color:var(--amp);
  font-weight:bold;
}
span.fre{
  color:var(--fre);
  font-weight:bold;
}
span.wav{
  color:var(--wav);
  font-weight:bold;
}
span.pha{
  color:var(--pha);
  font-weight:bold;
}

@media screen and (max-width:500px){
  div#grid-container{
    margin-top:5vh;
    display:grid;
    grid-template-columns:100%;
    grid-template-rows:30% 20% 30%;
    min-height:default;
  }
  div#grid-container div#Plot{
    grid-column: 1;
    grid-row: 3;
  }
  div#grid-container div#Controls{
    grid-column: 1;
    grid-row: 1;
  }
  div#grid-container div#Equations{
    grid-column: 1;
    grid-row: 2;
    font-size:1.4em;
    text-align:left;
  }
  div#grid-container div#Equations p{
    margin:1em 0 0 -1.5em;
  }
}

} /* End Local Layer */