.App{max-width:600px;margin:auto}@media (max-width:992px){.App{max-width:725px}}@media (max-width:768px){.App{max-width:545px}}.App h1{margin:2rem 0}.App .width{max-width:300px;margin:1rem auto 0}.App .box-style{padding:.375rem 1rem;background-color:#fff;border:1px solid #fff;border-radius:.25rem}.App .box-style.orange{background-color:#ffc107!important;color:#000}.App .guitar-neck{position:relative;height:490px}.App .guitar-neck .background{position:absolute;background:url(/react-guitarTuner/static/media/fender-strat-neck.22df8431.png);background-repeat:no-repeat!important;background-position:50%!important;height:490px;width:80%;z-index:1;right:4%;overflow:hidden}.App .guitar-neck .overlay{position:absolute;height:100%;width:100%;z-index:100;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all .3s ease}.App .guitar-neck .overlay.tuning{opacity:1;visibility:visible}.App .guitar-neck .overlay div{max-width:200px}.App .guitar-keys{transform:rotate(15deg);position:absolute;height:100%;width:100%}.App .guitar-keys img{position:absolute;width:30px}.App .guitar-keys img.rotate{-webkit-animation-name:spinner;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:2s;animation-name:spinner;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:2s;transform-style:preserve-3d}.App .guitar-keys img.key-0{bottom:32.5%;left:6.5%;-webkit-animation-delay:1.2s;animation-delay:1.2s}.App .guitar-keys img.key-1{bottom:43%;left:7%;-webkit-animation-delay:1s;animation-delay:1s}.App .guitar-keys img.key-2{bottom:53.5%;left:8%;-webkit-animation-delay:.8s;animation-delay:.8s}.App .guitar-keys img.key-3{bottom:64%;left:9%;-webkit-animation-delay:.6s;animation-delay:.6s}.App .guitar-keys img.key-4{bottom:74.5%;left:10.5%;-webkit-animation-delay:.4s;animation-delay:.4s}.App .guitar-keys img.key-5{bottom:85.5%;left:11%;-webkit-animation-delay:.2s;animation-delay:.2s}.App .strings .string{position:absolute;bottom:0;height:17%;width:2px}.App .strings .string.string-1{right:75%;background:#d3cdca}.App .strings .string.string-2{right:68.5%;background:#b3b1ae}.App .strings .string.string-3{right:62%;background:#b3b1ae}.App .strings .string.string-4{right:55%;background:#978a85}.App .strings .string.string-5{right:48.5%;background:#cab199}.App .strings .string.string-6{right:42%;background:#a49080}.App .string-list{list-style:none;padding:0;margin:0;display:inline-block;position:absolute;top:0;left:0}.App .string-list li{width:35px;height:35px;font-size:.9rem;display:flex;justify-content:center;align-items:center;margin:1rem 0 0;border-radius:50px;border:1px solid rgba(0,0,0,.125);font-weight:700;cursor:pointer;position:relative}.App .string-list li.bounceIn{opacity:0;-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.45s;animation-duration:.45s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;transition:all .3s ease}.App .string-list li.bounceIn:first-child{-webkit-animation-delay:.2s;animation-delay:.2s}.App .string-list li.bounceIn:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s}.App .string-list li.bounceIn:nth-child(3){-webkit-animation-delay:.6s;animation-delay:.6s}.App .string-list li.bounceIn:nth-child(4){-webkit-animation-delay:.8s;animation-delay:.8s}.App .string-list li.bounceIn:nth-child(5){-webkit-animation-delay:1s;animation-delay:1s}.App .string-list li.bounceIn:nth-child(6){-webkit-animation-delay:1.2s;animation-delay:1.2s}.App .string-list li.active,.App .string-list li.active:after,.App .string-list li:focus,.App .string-list li:focus:after,.App .string-list li:hover,.App .string-list li:hover:after{background:#ffc107!important}.App .string-list li:after{content:"";position:absolute;width:300%;height:2px;left:100%;top:19px;pointer-events:none;transition:all .3s ease}/*! * * * * * * * * * * * * * * * * * * * *\  
	CSShake :: shake-horizontal
	v1.5.0
	CSS classes to move your DOM
	(c) 2015 @elrumordelaluz
	http://elrumordelaluz.github.io/csshake/
	Licensed under MIT
	\* * * * * * * * * * * * * * * * * * * * */.shake-horizontal{display:inherit;transform-origin:center center;background:#ffc107!important}.shake-constant.shake-constant--hover:hover,.shake-freeze,.shake-trigger:hover .shake-constant.shake-constant--hover{-webkit-animation-play-state:paused;animation-play-state:paused}.shake-freeze:hover,.shake-horizontal:hover,.shake-trigger:hover .shake-freeze,.shake-trigger:hover .shake-horizontal{-webkit-animation-play-state:running;animation-play-state:running}.shake-horizontal.shake-constant,.shake-horizontal.shake-freeze,.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal{-webkit-animation-name:shake-horizontal;animation-name:shake-horizontal;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes spinner{0%{-webkit-transform:rotateX(0deg)}to{-webkit-transform:rotateX(1turn)}}@keyframes spinner{0%{-webkit-transform:rotateX(0deg)}to{-webkit-transform:rotateX(1turn)}}@-webkit-keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateZ(0)}50%{opacity:.9;transform:scale(1.1)}80%{opacity:1;transform:scale(.89)}to{opacity:1;transform:scale(1) translateZ(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateZ(0)}50%{opacity:.9;transform:scale(1.1)}80%{opacity:1;transform:scale(.89)}to{opacity:1;transform:scale(1) translateZ(0)}}@-webkit-keyframes shake-horizontal{0%{transform:translate(-2px) rotate(0)}1%{transform:translate(2px) rotate(0)}2%{transform:translate(-2px) rotate(0)}3%{transform:translate(2px) rotate(0)}4%{transform:translate(-2px) rotate(0)}5%{transform:translate(2px) rotate(0)}6%{transform:translate(-2px) rotate(0)}7%{transform:translate(2px) rotate(0)}8%{transform:translate(-2px) rotate(0)}9%{transform:translate(2px) rotate(0)}10%{transform:translate(-2px) rotate(0)}11%{transform:translate(2px) rotate(0)}12%{transform:translate(-2px) rotate(0)}13%{transform:translate(2px) rotate(0)}14%{transform:translate(-2px) rotate(0)}15%{transform:translate(2px) rotate(0)}16%{transform:translate(-2px) rotate(0)}17%{transform:translate(2px) rotate(0)}18%{transform:translate(-2px) rotate(0)}19%{transform:translate(2px) rotate(0)}20%{transform:translate(-2px) rotate(0)}21%{transform:translate(2px) rotate(0)}22%{transform:translate(-2px) rotate(0)}23%{transform:translate(2px) rotate(0)}24%{transform:translate(-2px) rotate(0)}25%{transform:translate(2px) rotate(0)}26%{transform:translate(-2px) rotate(0)}27%{transform:translate(2px) rotate(0)}28%{transform:translate(-2px) rotate(0)}29%{transform:translate(2px) rotate(0)}30%{transform:translate(-2px) rotate(0)}31%{transform:translate(2px) rotate(0)}32%{transform:translate(-2px) rotate(0)}33%{transform:translate(2px) rotate(0)}34%{transform:translate(-2px) rotate(0)}35%{transform:translate(2px) rotate(0)}36%{transform:translate(-2px) rotate(0)}37%{transform:translate(2px) rotate(0)}38%{transform:translate(-2px) rotate(0)}39%{transform:translate(2px) rotate(0)}40%{transform:translate(-2px) rotate(0)}41%{transform:translate(2px) rotate(0)}42%{transform:translate(-2px) rotate(0)}43%{transform:translate(2px) rotate(0)}44%{transform:translate(-2px) rotate(0)}45%{transform:translate(2px) rotate(0)}46%{transform:translate(-2px) rotate(0)}47%{transform:translate(2px) rotate(0)}48%{transform:translate(-2px) rotate(0)}49%{transform:translate(2px) rotate(0)}50%{transform:translate(-2px) rotate(0)}51%{transform:translate(2px) rotate(0)}52%{transform:translate(-2px) rotate(0)}53%{transform:translate(2px) rotate(0)}54%{transform:translate(-2px) rotate(0)}55%{transform:translate(2px) rotate(0)}56%{transform:translate(-2px) rotate(0)}57%{transform:translate(2px) rotate(0)}58%{transform:translate(-2px) rotate(0)}59%{transform:translate(2px) rotate(0)}60%{transform:translate(-2px) rotate(0)}61%{transform:translate(2px) rotate(0)}62%{transform:translate(-2px) rotate(0)}63%{transform:translate(2px) rotate(0)}64%{transform:translate(-2px) rotate(0)}65%{transform:translate(2px) rotate(0)}66%{transform:translate(-2px) rotate(0)}67%{transform:translate(2px) rotate(0)}68%{transform:translate(-2px) rotate(0)}69%{transform:translate(2px) rotate(0)}70%{transform:translate(-2px) rotate(0)}71%{transform:translate(2px) rotate(0)}72%{transform:translate(-2px) rotate(0)}73%{transform:translate(2px) rotate(0)}74%{transform:translate(-2px) rotate(0)}75%{transform:translate(2px) rotate(0)}76%{transform:translate(-2px) rotate(0)}77%{transform:translate(2px) rotate(0)}78%{transform:translate(-2px) rotate(0)}79%{transform:translate(2px) rotate(0)}80%{transform:translate(-2px) rotate(0)}81%{transform:translate(2px) rotate(0)}82%{transform:translate(-2px) rotate(0)}83%{transform:translate(2px) rotate(0)}84%{transform:translate(-2px) rotate(0)}85%{transform:translate(2px) rotate(0)}86%{transform:translate(-2px) rotate(0)}87%{transform:translate(2px) rotate(0)}88%{transform:translate(-2px) rotate(0)}89%{transform:translate(2px) rotate(0)}90%{transform:translate(-2px) rotate(0)}91%{transform:translate(2px) rotate(0)}92%{transform:translate(-2px) rotate(0)}93%{transform:translate(2px) rotate(0)}94%{transform:translate(-2px) rotate(0)}95%{transform:translate(2px) rotate(0)}96%{transform:translate(-2px) rotate(0)}97%{transform:translate(2px) rotate(0)}98%{transform:translate(-2px) rotate(0)}99%{transform:translate(2px) rotate(0)}to{transform:translate(-2px) rotate(0)}}@keyframes shake-horizontal{0%{transform:translate(-2px) rotate(0)}1%{transform:translate(2px) rotate(0)}2%{transform:translate(-2px) rotate(0)}3%{transform:translate(2px) rotate(0)}4%{transform:translate(-2px) rotate(0)}5%{transform:translate(2px) rotate(0)}6%{transform:translate(-2px) rotate(0)}7%{transform:translate(2px) rotate(0)}8%{transform:translate(-2px) rotate(0)}9%{transform:translate(2px) rotate(0)}10%{transform:translate(-2px) rotate(0)}11%{transform:translate(2px) rotate(0)}12%{transform:translate(-2px) rotate(0)}13%{transform:translate(2px) rotate(0)}14%{transform:translate(-2px) rotate(0)}15%{transform:translate(2px) rotate(0)}16%{transform:translate(-2px) rotate(0)}17%{transform:translate(2px) rotate(0)}18%{transform:translate(-2px) rotate(0)}19%{transform:translate(2px) rotate(0)}20%{transform:translate(-2px) rotate(0)}21%{transform:translate(2px) rotate(0)}22%{transform:translate(-2px) rotate(0)}23%{transform:translate(2px) rotate(0)}24%{transform:translate(-2px) rotate(0)}25%{transform:translate(2px) rotate(0)}26%{transform:translate(-2px) rotate(0)}27%{transform:translate(2px) rotate(0)}28%{transform:translate(-2px) rotate(0)}29%{transform:translate(2px) rotate(0)}30%{transform:translate(-2px) rotate(0)}31%{transform:translate(2px) rotate(0)}32%{transform:translate(-2px) rotate(0)}33%{transform:translate(2px) rotate(0)}34%{transform:translate(-2px) rotate(0)}35%{transform:translate(2px) rotate(0)}36%{transform:translate(-2px) rotate(0)}37%{transform:translate(2px) rotate(0)}38%{transform:translate(-2px) rotate(0)}39%{transform:translate(2px) rotate(0)}40%{transform:translate(-2px) rotate(0)}41%{transform:translate(2px) rotate(0)}42%{transform:translate(-2px) rotate(0)}43%{transform:translate(2px) rotate(0)}44%{transform:translate(-2px) rotate(0)}45%{transform:translate(2px) rotate(0)}46%{transform:translate(-2px) rotate(0)}47%{transform:translate(2px) rotate(0)}48%{transform:translate(-2px) rotate(0)}49%{transform:translate(2px) rotate(0)}50%{transform:translate(-2px) rotate(0)}51%{transform:translate(2px) rotate(0)}52%{transform:translate(-2px) rotate(0)}53%{transform:translate(2px) rotate(0)}54%{transform:translate(-2px) rotate(0)}55%{transform:translate(2px) rotate(0)}56%{transform:translate(-2px) rotate(0)}57%{transform:translate(2px) rotate(0)}58%{transform:translate(-2px) rotate(0)}59%{transform:translate(2px) rotate(0)}60%{transform:translate(-2px) rotate(0)}61%{transform:translate(2px) rotate(0)}62%{transform:translate(-2px) rotate(0)}63%{transform:translate(2px) rotate(0)}64%{transform:translate(-2px) rotate(0)}65%{transform:translate(2px) rotate(0)}66%{transform:translate(-2px) rotate(0)}67%{transform:translate(2px) rotate(0)}68%{transform:translate(-2px) rotate(0)}69%{transform:translate(2px) rotate(0)}70%{transform:translate(-2px) rotate(0)}71%{transform:translate(2px) rotate(0)}72%{transform:translate(-2px) rotate(0)}73%{transform:translate(2px) rotate(0)}74%{transform:translate(-2px) rotate(0)}75%{transform:translate(2px) rotate(0)}76%{transform:translate(-2px) rotate(0)}77%{transform:translate(2px) rotate(0)}78%{transform:translate(-2px) rotate(0)}79%{transform:translate(2px) rotate(0)}80%{transform:translate(-2px) rotate(0)}81%{transform:translate(2px) rotate(0)}82%{transform:translate(-2px) rotate(0)}83%{transform:translate(2px) rotate(0)}84%{transform:translate(-2px) rotate(0)}85%{transform:translate(2px) rotate(0)}86%{transform:translate(-2px) rotate(0)}87%{transform:translate(2px) rotate(0)}88%{transform:translate(-2px) rotate(0)}89%{transform:translate(2px) rotate(0)}90%{transform:translate(-2px) rotate(0)}91%{transform:translate(2px) rotate(0)}92%{transform:translate(-2px) rotate(0)}93%{transform:translate(2px) rotate(0)}94%{transform:translate(-2px) rotate(0)}95%{transform:translate(2px) rotate(0)}96%{transform:translate(-2px) rotate(0)}97%{transform:translate(2px) rotate(0)}98%{transform:translate(-2px) rotate(0)}99%{transform:translate(2px) rotate(0)}to{transform:translate(-2px) rotate(0)}}
/*# sourceMappingURL=main.36ba38f0.chunk.css.map */