:root{
	--color-button3d:#803;
	--background-button3d: radial-gradient(#cd3f64, #9d3656);

	--color-button3d-active:var(--color-fern);
	--background-button3d-active: radial-gradient(#5dcd4c, #40862e);

			/* inside svgs */
	--color-button-radial0:var(--color-tomato);
	--color-button-radial0:#031d44;
	--color-button-radial1:#3a4454;
	--color-btn-shadow:var(--color-off-black);



}

.nav{
	--bs-nav-link-color:red;
	margin-bottom:.5rem;
}
.nav-pills{
	--bs-nav-pills-link-active-bg:white;
	position:relative;
	z-index:1;

}
.nav-link{
	svg{
		height:2rem;
	}
	path{
		filter:contrast(.6) brightness(.7);
	}
	&.active{
		border-bottom:5px solid var(--color-off-black);
		box-shadow:var(--handy-box-shadow);
		path[class^="st"]{
			filter:contrast(7.5) brightness(2);
		}
	}
}
svg.led-matrix{
  animation-name: matrixHue;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes matrixHue{
	0%{
		filter:hue-rotate(0deg) sepia(0);
	}
	100%{

		filter:hue-rotate(360deg) sepia(1);
	}
}
.btn-control, #aboutModalButton{
	cursor: pointer;
}
#aboutModalButton{
	position: fixed;
    bottom: 6px;
    right: 5px;
    width: 2rem;
    color: #275dac;
}
.close{
	background-color: transparent;
    border: 0;
    color: var(--color-tomato);
    transform: scale(1.5) translateY(-4px);
}
.arrow{
	/*
	fill:var(--color-fern);
	filter:drop-shadow(-5px 4px 8px var(--color-btn-shadow));
	&:active{
		filter:drop-shadow(-3px 2px 5px var(--color-btn-shadow)) contrast(1.5);
	}
	path{
		fill:url(#RadialGradient1);
	}*/
}

.btn-gamepad{
	width:100% !important;
	height:21vw !important;
	padding:.5rem;
}
.arrow-cut{
	height:90%;
	fill:url(#RadialGradient2);
}
.arrow-cut.left{
	transform:rotate(-90deg);
}
.arrow-cut.right{
	transform:rotate(90deg);
}
.arrow-cut.down{
	transform:rotate(180deg);
}

.arrow.up{
	transform: rotate(90deg);
}
.arrow.right{
	transform: rotate(180deg);
}
.arrow.down, .arrow.rotate{
	transform: rotate(-90deg);
}

.arrow.rotate{
	margin:1.5rem;
}

.btn-fx{
	svg{
		filter:drop-shadow(-5px 4px 8px var(--color-btn-shadow));
		&:active{
			filter:drop-shadow(-3px 2px 5px var(--color-btn-shadow)) contrast(1.5);
		}
		path{
			fill:url(#RadialGradient1);
		}
	}
}

  /**
   * 3D button
   * */
/* From Uiverse.io by njesenberger */ 
.button3d {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-width: 0;
  padding: 0 8px 12px;
  min-width: 13rem;
  box-sizing: border-box;
  background: transparent;
  font: inherit;
  cursor: pointer;
  font-size: 1.9rem;
  letter-spacing: 3px;
  line-height:.9;
  font-family: "alphabet-soup-pro";
}

.button3d-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 7px 15px;
  transform: translateY(0);
  text-align: center;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, .25);
  transition-property: transform;
  transition-duration: .2s;
  -webkit-user-select: none;
  user-select: none;
}

.button3d:active .button3d-top {
  
}

.button3d-top::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  background-image: var(--background-button3d);
  text-align: center;
  color: #fff;
  box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
  transition-property: border-radius, padding, width, transform;
  transition-duration: .2s;

}
  .button3d-top.green::after{
  	background-image: var(--background-button3d-active);
  }


.button3d-bottom {
  position: absolute;
  z-index: 1;
  bottom: 4px;
  left: 4px;
  border-radius: 8px / 16px 16px 8px 8px;
  padding-top: 6px;
  width: calc(100% - 8px);
  height: calc(100% - 10px);
  box-sizing: content-box;
  background-color: var(--color-button3d);
  background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
  transition-property: border-radius, padding-top;
  transition-duration: .2s;
  &.green{
  	background-color: var(--color-button3d-active);
  }
}

.button3d:active, .button3d.active{
	.button3d-bottom {
	  border-radius: 10px 10px 8px 8px / 8px;
	  padding-top: 0;
	  background-color:var(--color-button3d-active);
	}
	.button3d-top{
		transform: translateY(6px);
		&:after {
		  border-radius: 6px;
		  padding: 0 2px;
		  background-image: var(--background-button3d-active);
		}
	}
}
.button3d-base {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 0;
  border-radius: 12px;
  width: 100%;
  height: calc(100% - 4px);
  background-color: rgba(0, 0, 0, .15);
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
}
   /**
    * End 3D btn
    * */

 /**
 * light switch
 * */

.lightswitch{
	--switch-right:50px;
	position:fixed;
	top:30px;
	right:var(--switch-right);
	width:44%;
	z-index:1;
}

#picker-pal{
	width:120px;
}


#fx-output{
	margin-top:2rem;
	padding:1rem;
	align-self:center;
	transform: translateX(45px);
	background-color:white;
	box-shadow:var(--handy-box-shadow);
	border-radius:2px;
	&.random{
		--fx-shadow-color:var(--color-fern);
	}
}

.ptype{
	max-height:400px;
	overflow:auto;
}

 .switch.clicked .inner-switch{ /* Button */
    background: #d2cbc3;
    box-shadow:
        inset 0 1px 0 white,
        0 0 0 1px #999,
        0 0 5px 1px rgba(0,0,0,0.2),
        inset 0 -10px 0 #aaa,
        0 2px 0 rgba(255,255,255,0.1),
        inset 0 45px 3px #e0e0E0,
        0 8px 6px rgba(0,0,0,0.18);
}

.switch .inner-switch:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: -13px;
    left: 20px;
    background: #666;
    border-radius: 50%;
    box-shadow:
        0 1px 0 white, /* Subtle reflection on the bottom of the hole */
        0 120px 0 #666, /* Faking a second screw hole... */
        0 121px 0 white; /* And its reflection */
}

.switch .inner-switch:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20px;
    left: -25px;
    bottom: -20px;
    right: -25px;
    background: #ccc; /* Fallback */
    background: linear-gradient(#ddd, #bbb);
    border-radius: inherit;
    border: 1px solid #bbb;
    box-shadow:
        0 0 5px 1px rgba(0,0,0,0.15),
        0 3px 3px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.switch .inner-switch {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #cbc7bc;
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 white,
        0 0 0 1px #999,
        0 0 5px 1px rgba(0,0,0,0.2),
        0 2px 0 rgba(255,255,255,0.6),
        inset 0 10px 1px #e5e5e5,
        inset 0 11px 0 rgba(255,255,255,0.5),
        inset 0 -45px 3px #ddd;
}

.switch {
    width: 50px;
    height: 100px;
    position: relative;
    transform:translateX(calc(var(--switch-right)*2));
    align-self:center;
}

.palette-label{
	text-transform: uppercase;
    background: #dbdbdb;
    padding: .25rem;
    box-shadow: 2px 3px 7px -2px black;
    &.active{

    	box-shadow: 2px 3px 7px -2px var(--color-amber-gold);
    }
}



/**
 * end switch
 * */
/**
 * GAMEPAD buttons
 * */
.btn-gamepad {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
  border-radius: 30px;
  border: 1px solid #8F9092;
  transition: all 0.2s ease;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #606060;
  text-shadow: 0 1px #fff;
}

.btn-gamepad:hover {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
}

.btn-gamepad:active {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

.btn-gamepad:focus {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}
 /**
  * end gamepad
  * */