@media screen and (min-width: 300px) {
  :root {
    --font-size: var(--font-size--sm);
  }
}
@media screen and (min-width: 560px) {
  :root {
    --font-size: var(--font-size--md);
  }
}
@media screen and (min-width: 768px) {
  :root {
    --font-size: 20px;
  }
}
@media screen and (min-width: 960px) {
  :root {
    --font-size: var(--font-size--lg);
  }
}
@media screen and (min-width: 1140px) {
  :root {
    --font-size: var(--font-size--xl);
  }
}


button, .button, [type=button] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: white;
  cursor: pointer;
  display: block;
  margin: 1rem 0 2rem;
  padding: 0.5rem 1rem;
  line-height: 1.25;
  transition: all 120ms;
  transform: scale(1, 1);
outline: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
border: none;
}
button:hover, .button:hover, [type=button]:hover {
  background: shade(#651fff, 10%);
  border-color: shade(#651fff, 10%);
outline-color: transparent; 
    outline-style: none;
	outline: none !important;
}
button:focus, .button:focus, [type=button]:focus {
  background: shade(#651fff, 20%);
  border-color: shade(#651fff, 20%);
  outline: none;
  box-shadow: 0 0 0 4px rgba(101, 31, 255, 0.3);
	outline-color: transparent; 
    outline-style: none;
}
button:active, .button:active, [type=button]:active {
  background: shade(#651fff, 30%);
  border-color: shade(#651fff, 30%);
  transform: scale(0.95, 0.95);
	outline-color: transparent; 
    outline-style: none;
	outline: none !important;
}

#menu-button {
  margin: 0;
  padding: 0 !important;
  line-height: 1 !important;
  height: 48px;
  width: 48px;
	outline: none !important;
	margin-top: -5px;
	outline: none;
}
#menu-button svg {
  vertical-align: middle;
  margin: auto !important;
  display: inline-block;
  line-height: 1 !important;
	outline: none !important;
}


#animated-menu-icon-svg, #menu-icon-svg, #animated-menu-svg, #animated-menu-icon, #menu-icon, #menu-svg .animated-menu-icon-svg, .menu-icon-svg, .animated-menu-svg, .animated-menu-icon, .menu-icon, .menu-svg {
  position: relative;
  transition: all 80ms;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
  transform-origin: 50% 50% !important;
}
#animated-menu-icon-svg *, #menu-icon-svg *, #animated-menu-svg *, #animated-menu-icon *, #menu-icon *, #menu-svg .animated-menu-icon-svg *, .menu-icon-svg *, .animated-menu-svg *, .animated-menu-icon *, .menu-icon *, .menu-svg * {
  transition: all 80ms;
  transform-origin: 50% 50% !important;
}
#animated-menu-icon-svg:active rect:first-of-type, #menu-icon-svg:active rect:first-of-type, #animated-menu-svg:active rect:first-of-type, #animated-menu-icon:active rect:first-of-type, #menu-icon:active rect:first-of-type, #menu-svg .animated-menu-icon-svg:active rect:first-of-type, .menu-icon-svg:active rect:first-of-type, .animated-menu-svg:active rect:first-of-type, .animated-menu-icon:active rect:first-of-type, .menu-icon:active rect:first-of-type, .menu-svg:active rect:first-of-type {
  transform: translatey(12px);
}
#animated-menu-icon-svg:active rect:last-of-type, #menu-icon-svg:active rect:last-of-type, #animated-menu-svg:active rect:last-of-type, #animated-menu-icon:active rect:last-of-type, #menu-icon:active rect:last-of-type, #menu-svg .animated-menu-icon-svg:active rect:last-of-type, .menu-icon-svg:active rect:last-of-type, .animated-menu-svg:active rect:last-of-type, .animated-menu-icon:active rect:last-of-type, .menu-icon:active rect:last-of-type, .menu-svg:active rect:last-of-type {
  transform: translatey(-12px);
}
.active#animated-menu-icon-svg, .active#menu-icon-svg, .active#animated-menu-svg, .active#animated-menu-icon, .active#menu-icon, #menu-svg .active.animated-menu-icon-svg, .active.menu-icon-svg, .active.animated-menu-svg, .active.animated-menu-icon, .active.menu-icon, .active.menu-svg {
  transform-origin: 50% 50% !important;
}
.active#animated-menu-icon-svg rect:first-of-type, .active#menu-icon-svg rect:first-of-type, .active#animated-menu-svg rect:first-of-type, .active#animated-menu-icon rect:first-of-type, .active#menu-icon rect:first-of-type, #menu-svg .active.animated-menu-icon-svg rect:first-of-type, .active.menu-icon-svg rect:first-of-type, .active.animated-menu-svg rect:first-of-type, .active.animated-menu-icon rect:first-of-type, .active.menu-icon rect:first-of-type, .active.menu-svg rect:first-of-type {
  transform: rotate(45deg) translate(0, 12px);
}
.active#animated-menu-icon-svg rect:nth-of-type(2), .active#menu-icon-svg rect:nth-of-type(2), .active#animated-menu-svg rect:nth-of-type(2), .active#animated-menu-icon rect:nth-of-type(2), .active#menu-icon rect:nth-of-type(2), #menu-svg .active.animated-menu-icon-svg rect:nth-of-type(2), .active.menu-icon-svg rect:nth-of-type(2), .active.animated-menu-svg rect:nth-of-type(2), .active.animated-menu-icon rect:nth-of-type(2), .active.menu-icon rect:nth-of-type(2), .active.menu-svg rect:nth-of-type(2) {
  display: none;
}
.active#animated-menu-icon-svg rect:last-of-type, .active#menu-icon-svg rect:last-of-type, .active#animated-menu-svg rect:last-of-type, .active#animated-menu-icon rect:last-of-type, .active#menu-icon rect:last-of-type, #menu-svg .active.animated-menu-icon-svg rect:last-of-type, .active.menu-icon-svg rect:last-of-type, .active.animated-menu-svg rect:last-of-type, .active.animated-menu-icon rect:last-of-type, .active.menu-icon rect:last-of-type, .active.menu-svg rect:last-of-type {
  transform: rotate(-45deg) translate(0, -12px);
}
.active#animated-menu-icon-svg:active rect:first-of-type, .active#menu-icon-svg:active rect:first-of-type, .active#animated-menu-svg:active rect:first-of-type, .active#animated-menu-icon:active rect:first-of-type, .active#menu-icon:active rect:first-of-type, #menu-svg .active.animated-menu-icon-svg:active rect:first-of-type, .active.menu-icon-svg:active rect:first-of-type, .active.animated-menu-svg:active rect:first-of-type, .active.animated-menu-icon:active rect:first-of-type, .active.menu-icon:active rect:first-of-type, .active.menu-svg:active rect:first-of-type {
  transform: translatey(12px) rotate(0);
}
.active#animated-menu-icon-svg:active rect:last-of-type, .active#menu-icon-svg:active rect:last-of-type, .active#animated-menu-svg:active rect:last-of-type, .active#animated-menu-icon:active rect:last-of-type, .active#menu-icon:active rect:last-of-type, #menu-svg .active.animated-menu-icon-svg:active rect:last-of-type, .active.menu-icon-svg:active rect:last-of-type, .active.animated-menu-svg:active rect:last-of-type, .active.animated-menu-icon:active rect:last-of-type, .active.menu-icon:active rect:last-of-type, .active.menu-svg:active rect:last-of-type {
  transform: translatey(-12px) rotate(0);
}

#menu-button {
  all: unset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  height: 46px;
  color: white;
  line-height: 1;
  padding: 0;
  position: relative;
  text-align: center;
  transform: scale3d(1, 1, 1);
  transition: all 80ms;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
  vertical-align: top;
  width: 46px;
	transform: scale(0.7, 0.6);
}
#menu-button * {
  transition: all 120ms;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
	outline: none;
}
#menu-button svg {
  color: currentcolor;
  fill: currentcolor;
}
#menu-button svg rect {
  color: currentcolor;
  fill: currentcolor;
}
#menu-button:active svg:active rect, #menu-button:active #animated-menu-icon-svg:active rect, #menu-button:active #menu-icon:active rect {
  transform: none;
}
#menu-button:active svg rect:first-of-type, #menu-button:active #animated-menu-icon-svg rect:first-of-type, #menu-button:active #menu-icon rect:first-of-type {
  transform: translatey(12px);
}
#menu-button:active svg rect:last-of-type, #menu-button:active #animated-menu-icon-svg rect:last-of-type, #menu-button:active #menu-icon rect:last-of-type {
  transform: translatey(-12px);
}
#menu-button.active svg, #menu-button.active #animated-menu-icon-svg, #menu-button.active #menu-icon {
  transform: translatey(2px);
}
#menu-button.active svg rect:first-of-type,
#menu-button.active svg rect:last-of-type, #menu-button.active #animated-menu-icon-svg rect:first-of-type,
#menu-button.active #animated-menu-icon-svg rect:last-of-type, #menu-button.active #menu-icon rect:first-of-type,
#menu-button.active #menu-icon rect:last-of-type {
  transform-origin: center;
}
#menu-button.active svg rect:first-of-type, #menu-button.active #animated-menu-icon-svg rect:first-of-type, #menu-button.active #menu-icon rect:first-of-type {
  transform: translatey(10px) translatex(-5px) rotate(45deg);
}
#menu-button.active svg rect:nth-of-type(2), #menu-button.active #animated-menu-icon-svg rect:nth-of-type(2), #menu-button.active #menu-icon rect:nth-of-type(2) {
  display: none;
}
#menu-button.active svg rect:last-of-type, #menu-button.active #animated-menu-icon-svg rect:last-of-type, #menu-button.active #menu-icon rect:last-of-type {
  transform: translatey(-11px) translatex(-7px) rotate(-45deg);
}
#menu-button.active:active svg rect:first-of-type,
#menu-button.active:active #animated-menu-icon-svg rect:first-of-type,
#menu-button.active:active #menu-icon rect:first-of-type {
  transform: translatey(12px) rotate(0);
}
#menu-button.active:active svg rect:last-of-type,
#menu-button.active:active #animated-menu-icon-svg rect:last-of-type,
#menu-button.active:active #menu-icon rect:last-of-type {
  transform: translatey(-12px) rotate(0);
}
#menu-button:focus {
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.35);
  outline: none;
}
#menu-button:active {
  transform: scale3d(0.95, 0.95, 1);
}
svg:focus {
  background: mediumslateblue;
}