body, html { padding:0; margin:0; height:100%; }

.wrapper { display:flex; flex-direction:column; min-height:100%; background-image: linear-gradient(to bottom, #845a5d, #483132); }

header { background-color:#507573; text-align:center; padding:5px 0 10px 0; margin:0; flex-grow:0; flex-shrink:0; border-bottom:1px solid #BB7E5D; }

main { padding:0 20px; flex-grow:1; text-align:center; font-family: 'Segoe UI', sans-serif;  }

footer { font-family: 'Segoe UI', sans-serif; font-weight:700; color:#BB7E5D; background-color:#507573; text-align:center; padding:20px 0 20px 0; flex-grow:0; flex-shrink:0; margin:0; border-top:1px solid #BB7E5D; }

header h1 { font-size:4em; font-family: 'Segoe UI', sans-serif; font-weight:700; color:#BB7E5D; margin:auto; }

main > section { background-color:#fff; text-align:left; padding:20px; border-radius:10px; margin:50px auto; max-width:1176px; }


.btn { font-weight:bold; font-family: 'Segoe UI', sans-serif; padding:10px 20px; border:0; border-radius:7px; font-size:1.35em; }


.btn:hover { cursor:pointer; }

.string-menu { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; grid-gap:15px; }

.string-menu-2 { font-size:1.35em; }

.btn-stop { margin-left:10px; background-color:#8b0000; color:#fff; }

.btn-stop:hover { background-color:#d90000; transition:0.3s; }

.btn-stop:active { background-color:#ff7777; transition:0; }

select.btn { text-align:left; background-color:#507573; color:#fff; }

select > option { font-weight:bold; }

.check-loop { font-size:1.15em; }

input[type="checkbox"] { margin:0 5px 0 0;  width:18px; height:18px; accent-color:#507573; }

input[type="checkbox"]:hover { cursor:pointer; }

#volControl { margin:0; }

#userInstr { margin:0; }
#showInstr { display:none; font-style:italic; color:blue; background-color:#fff; border:0; }
#showInstr:hover { cursor:pointer; }

.string-table { 
    display:grid;
    background-color:#ababab;
    padding:3px;
    gap:3px 3px;

    grid-template-columns:repeat(4, minmax(0, 1fr));
}

/* Rotate column colors */
.string-header:nth-child(even), .string-footer:nth-child(even), .string-play:nth-child(even) { background-color:#abefbc; }

.string-header:nth-child(odd), .string-footer:nth-child(odd), .string-play:nth-child(odd) { background-color:#abefef; }

.string-header, .string-footer, .string-play { text-align:center; padding:5px 0; }

.string-header h3, .string-footer h3 { margin:0; }

.note-tile { text-align:center; background-color:#a26464; padding:10px 0; height:2em; }

.note-tile:hover { cursor:pointer; background-color:#efabef; transition:0.3s; }

.note-tile > span:first-child { font-size:1.75em; }

.note-tile > span:last-child { font-size:1.0em; }

.string-play > .btn { background-color:#507573; color:#fff; }

.string-play .btn:hover { background-color:#EFABAB; color:#000; border-color:#fff; transition:0.3s; }

.string-play .btn:active { background-color:#f5cccc; transition:0; }

.selected-note { background-color:#efabef; }


@media(max-width:991px) { 
    main { padding-left:20px; padding-right:20px; }    
}

@media(max-width:768px) { 
    main { padding:0 10px; }
    header h1 { font-size:3em; }   
    .string-menu-2, .check-loop { font-size:1.1em; }
}

@media(max-width:600px) {
    .string-menu { grid-template-columns:auto; }
    .string-menu-2 { grid-row:2; }
    #showInstr { display:inline-block; }
}

@media(max-width:425px) {
    .btn, .string-menu-2, .check-loop { font-size:1em; }   
    .btn-stop { margin-left:2px; }   
    .string-header h3 { font-size:1.1em; }    
    .note-tile > span:first-child { font-size:1.5em; }
}