*,:after,:before{box-sizing:border-box}input,textarea,select,button{font-family:inherit;font-size:inherit;font-weight:inherit}body{margin:0;padding:0;border:0;overflow:hidden;font-family:"Open Sans",sans;font-weight:300;background-color:#222;color:#fff}.supsub{display:inline-block;font-size:70%;vertical-align:sub}.supsub>span{display:block}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}@media(max-width: 1024px){body{font-size:1.75em}input[type=checkbox]{width:1.75em;height:1.75em}select{font-size:inherit}}a,a:visited{color:orange;text-decoration:none}.note-label{display:block;background-color:red;color:#fff;width:24px;height:24px;border-radius:12px;overflow:hidden;font-size:12px;font-weight:700;line-height:24px;text-align:center}@media(max-width: 1024px){.note-label{width:48px;height:48px;border-radius:24px;font-size:24px;line-height:48px}}#guitar-area{position:absolute;top:0;left:0;width:400px;height:100%}#guitar-area #guitar{position:absolute;margin:0;top:0;height:100%;left:80px;width:240px;background-color:#482d25;background-image:url("img/fretboard.jpg");background-size:cover;background-position:center center;background-repeat:no-repeat}@media(max-width: 1024px){#guitar-area #guitar{left:25px;width:350px}}#guitar-area #guitar #headstock{height:50px;position:relative;border-bottom:10px solid #000}@media(max-width: 1024px){#guitar-area #guitar #headstock{height:100px}}#guitar-area #guitar #headstock #capo{display:none}#guitar-area #guitar #fretboard{height:calc(100% - 150px)}@media(max-width: 1024px){#guitar-area #guitar #fretboard{height:calc(100% - 200px)}}#guitar-area #guitar #fretboard .fret{border-bottom:3px solid #dd9;position:relative}#guitar-area #guitar #fretboard .fret.fret-1{height:11.2251374637%}#guitar-area #guitar #fretboard .fret.fret-2{height:10.5951189083%}#guitar-area #guitar #fretboard .fret.fret-3{height:10.0004605773%}#guitar-area #guitar #fretboard .fret.fret-4{height:9.4391778539%}#guitar-area #guitar #fretboard .fret.fret-5{height:8.9093975092%}#guitar-area #guitar #fretboard .fret.fret-6{height:8.4093514504%}#guitar-area #guitar #fretboard .fret.fret-7{height:7.9373708203%}#guitar-area #guitar #fretboard .fret.fret-8{height:7.4918804275%}#guitar-area #guitar #fretboard .fret.fret-9{height:7.0713934892%}#guitar-area #guitar #fretboard .fret.fret-10{height:6.6745066693%}#guitar-area #guitar #fretboard .fret.fret-11{height:6.299895395%}#guitar-area #guitar #fretboard .fret.fret-12{height:5.9463094359%}#guitar-area #guitar #fretboard .fret.fret-3,#guitar-area #guitar #fretboard .fret.fret-5,#guitar-area #guitar #fretboard .fret.fret-7,#guitar-area #guitar #fretboard .fret.fret-9,#guitar-area #guitar #fretboard .fret.fret-12{background-image:url("img/fretboard-dots-1.svg");background-position:center;background-repeat:no-repeat;background-size:contain}#guitar-area #guitar #fretboard .fret.fret-12{background-image:url("img/fretboard-dots-2.svg")}#guitar-area #guitar #fretboard .fret #capo{position:absolute;bottom:0;height:20px;max-height:30%;width:100%;background-color:#000;z-index:150}#guitar-area #guitar #headstock .note,#guitar-area #guitar #fretboard .note{position:absolute;height:100%;top:0;z-index:200}#guitar-area #guitar #headstock .note .note-label,#guitar-area #guitar #fretboard .note .note-label{display:none;position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);cursor:default}@media(max-width: 1024px){#guitar-area #guitar #headstock .note .note-label,#guitar-area #guitar #fretboard .note .note-label{top:calc(50% - 12px*2);left:calc(50% - 12px*2)}}#guitar-area #guitar #headstock .note.active .note-label,#guitar-area #guitar #fretboard .note.active .note-label{display:block}#guitar-area #guitar #headstock .note:not(.active) .note-label{display:block;background-color:#ddd;color:#bbb}#guitar-area #guitar #pick-area{position:relative;background-color:#000;height:100px}#guitar-area #guitar #pick-area #pick{width:100px;height:100px;background-image:url(img/pick-pic.png);background-repeat:no-repeat;background-size:contain;position:absolute;top:0;left:-50px;z-index:200}#guitar-area #strings{position:absolute;top:0;left:0;height:100%;z-index:100;width:240px}@media(max-width: 1024px){#guitar-area #strings{width:350px}}#guitar-area #strings .string{position:absolute}#guitar-area #strings .string.static{top:0}#guitar-area #strings .string svg{width:100%;height:100%}#guitar-area #strings .string.bronze svg path.wire{stroke:#daa520}#guitar-area #strings .string.steel svg path.wire{stroke:#aaa}#controls{position:absolute;top:0;left:400px;width:calc(100% - 400px);height:100%;overflow:auto;text-align:center}#controls #title{font-family:"Milonga",sans-serif;font-size:2.5em;font-weight:700;margin-bottom:10px}#controls #options{margin-bottom:10px}#controls #chords-played table{border-collapse:collapse;margin:auto}#controls #chords-played table tbody td,#controls #chords-played table tbody th{border:1px solid #fff;padding:10px 20px}#controls #chords-played table tbody td .note-label,#controls #chords-played table tbody th .note-label{margin:auto;margin-bottom:10px}#controls #instructions{font-size:3rem;font-weight:600;text-align:left;max-width:600px;margin:auto;margin-top:1rem}#controls #copyright{position:absolute;bottom:0;padding-bottom:3px;width:100%;font-size:.9em}#audio{display:none}#optionsOverlay{display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);z-index:1000}#optionsOverlay #optionsModal{width:400px;margin:auto;margin-top:50px;background-color:#ddd;overflow:hidden;border-radius:5px}#optionsOverlay #optionsModal .header,#optionsOverlay #optionsModal .body,#optionsOverlay #optionsModal .footer{padding:10px}#optionsOverlay #optionsModal .header{font-weight:700;background-color:orange}#optionsOverlay #optionsModal .body{color:#222}#optionsOverlay #optionsModal .body .option{margin-bottom:5px}#optionsOverlay #optionsModal .footer{text-align:right;padding-top:0}