@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);body,html{height:100%;margin:0;padding:0;font-family:Poppins,sans-serif}.pageBody{display:grid;grid-template-areas:"header" "body" "footer";height:100%;grid-template-rows:80px 1fr 80px;grid-template-columns:1fr}footer{grid-area:footer;background-color:#111;text-align:center;color:#fff;padding:20px}.help{display:grid;grid-template-columns:1fr;gap:1em}@media screen and (min-width:950px){.help{grid-template-columns:1fr 1fr}}.help ul{display:grid;grid-template-columns:1fr;width:100%;list-style:none;padding:0;margin:0;gap:20px}@media screen and (min-width:950px){.help ul{grid-column:1/3;grid-template-columns:1fr 1fr}}.help .helpItem{display:grid;grid-template-columns:50px 1fr;gap:1em;font-size:20px}.help .helpItem .icon{font-size:40px}.metronomeWidget{grid-area:metronome;display:flex;align-items:center;font-size:20px;text-align:right;justify-content:flex-end}.button.green,button.green{background-color:#4c8840;font-weight:700;color:#fff;font-size:20px;border:1px solid #4c8840}.button.red,button.red{background-color:#7e1313;border:1px solid #7e1313;font-weight:700;color:#fff;font-size:20px}.button:disabled,button:disabled{background-color:#333}.metronome{display:grid;line-height:35px}.metronome label{display:block;line-height:75px;font-size:20px}.metronome input{height:40px;margin:10px 0;padding:5px 20px}.metronome select{width:100%;height:54px;margin:10px 0;padding:5px 20px}.metronome button{line-height:40px;margin:10px 0}app-fretboard{display:grid;grid-template-columns:1fr;height:100%}app-fretboard .sideBar{background-color:#000;padding:10px;color:#fff}app-fretboard .sideBar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr}@media screen and (min-width:800px){app-fretboard .sideBar ul{display:grid;grid-template-columns:1fr}}app-fretboard .sideBar ul li{padding:0 20px;height:40px;line-height:40px;text-align:center;font-size:30px;margin-bottom:10px}app-fretboard .sideBar ul li:hover{background-color:orange}@media screen and (min-width:800px){app-fretboard .sideBar ul li{display:block;padding:0}}h1.title{font-family:Sansita Swashed,cursive;margin:0;padding:0}.home{max-width:1000px;margin:0 auto;padding:20px}.home .screenshot{width:100%}header{grid-area:header;display:grid;grid-template:"logo  menu" "metronome metronome";background-color:#000;color:#fff;padding:20px}@media screen and (min-width:800px){header{display:grid;grid-template:"logo  metronome menu"}}header .menu{display:flex;justify-content:flex-end}header .menu a{color:orange;font-size:20px;line-height:40px;font-family:sans-serif}header .menu a:hover,header a{color:#fff}header a{text-decoration:none}header h1{padding-left:20px;margin:0}.mode4ion{display:grid;grid-template-columns:5fr 2fr;gap:20px}.modeSelection select{width:100%}.controls{display:grid;gap:20px;grid-template-columns:1fr 1fr;justify-content:space-around;align-content:center;height:100%}.controls button{background-color:#85e278;border:1px solid #85e278;min-height:40px;line-height:40px;font-size:18px;text-align:center}.noteSelector{display:grid;grid-template-columns:1fr}.noteControl{padding:10px;background-color:#ccc}.noteControl .controls{display:grid;grid-template-columns:repeat(4,1fr);font-size:20px}.noteControl .controls div{display:flex;align-items:center}.modal{position:fixed;z-index:500;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.7)}.modal .content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:80%}.modal textarea{width:100%;min-height:300px}.content .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:10px}.content button{background-color:#85e278;border:1px solid #85e278;min-height:40px;line-height:40px;font-size:18px;text-align:center}.selectionControls{display:grid;grid-template-columns:1fr;padding:5px}.selectionControls .control{display:grid;grid-template-columns:1fr 1fr;line-height:50px;gap:20px}.selectionControls input,.selectionControls select{height:30px;margin:10px 0}input[type=checkbox]{height:25px;width:25px;margin-right:10px}.neckContainer::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}.neckContainer::-webkit-scrollbar{height:12px;background-color:#f5f5f5}.neckContainer::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}.showDesktop{display:none}.showMobile{display:block}.piano,.string,.stringedContainer{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media screen and (min-width:600px){.note{width:30px;height:30px;line-height:30px;font-size:16px}}@media screen and (min-width:800px){app-fretboard{grid-template-columns:60px 1fr}.metronome{border-bottom:1px solid #000;background-color:#ccc;padding-bottom:5px;padding-top:5px;min-height:35px;display:grid;grid-template-columns:repeat(7,1fr);line-height:35px;text-align:right;gap:10px}.selectionControls{grid-template-columns:1fr 1fr 1fr;text-align:right}.controls{grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}.noteSelector{display:grid;grid-template-columns:1fr 1fr}.fret{position:static}.fret:before{position:relative;top:50%;left:-9px;z-index:0;width:125%;height:20px;height:1px;border-top:2px solid silver;border-left:0;border-right:0;background:#000;transform:translateY(-50%)}.string>.fret-header{min-height:35px}.showDesktop{display:block}.showMobile{display:none}.string{min-height:20px;display:grid;grid-template-columns:100px repeat(auto-fit,minmax(40px,1fr))}select{margin-bottom:0}.neck{display:grid;grid-template-columns:1fr}.noteControl .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));padding:10px;background-color:#ccc}}