@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lucida Grande'), local('Verdana'), local('Arial'), local('Sans-Serif');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
    background-image: url('../img/pngtree-abstract-musical-notes-flowing-in-air-image_21316854.webp');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

h1.post-title a#titlehref{
  padding-left: 7px;
  color: #fff;
  font-size: 2.5em;
  font-family: 'Lato';
  font-weight:bold;
  text-decoration:unset;
}

.post-title-custom, #loadtop10front ul li,.post-title{
 width: 100%;
 background: linear-gradient(to bottom, rgba(69,72,77,1) 100%,rgba(0,0,0,1) 100%);
 color: #fff;
 font-size:0.9em;
 padding-top: 7px;
 padding-bottom: 7px;
 font-family: 'Lato';
 margin: 0px;
 margin-bottom: 3px;
}
  
@media (min-width: 1024px) {
#wrap2 {
 padding-left: 10%;
 padding-right: 10%;
}}

.colorchord {
 color: #0006FF;
}
h2 .colorchord,a.alpha div .colorchord {
 color: black;
}
 a.alpha div .colorchord:hover,table.alpha tr.alpha td.alpha a.alpha:hover div .colorchord:hover {
 color:darkred;
}

#test1 pre {
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word;
}

.container-fontsize{
 display:unset !important;
 padding-left: 40%;
}
.resizefontcss{
 font-size: 2.0em !important;
 font-weight: bold !important;
 padding-left: 7px;
 padding-right: 7px;
 color: #80FF00 !important;
 border-radius: 1px;
 background-color: #f5f5f5;
 font-family: arial,sans-serif;
 font-weight: bold;
 text-align: center;
 cursor: pointer;
 border:none;
}
.nobgcss{
 background-color:transparent !important;
 padding-left unset !important;
 padding-right unset !important;
 font-family: arial,sans-serif;
 font-size: 2.0em;
 font-weight:bold;
 border:none;
}

#wrap2{
 padding-bottom:32px;
}

#test1{
 font-family: monospace;
 font-size: 1.8em;
 font-weight:bold;
 line-height:  1.4em;
}

.footerv2 , .footerv2item{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  z-index: 99;
}
.footerv2 span {
  float: left;
  text-align: center;
  width: 19.33333333333333%;
  padding-top: 7px;
  padding-bottom: 7px;
  border-right: 1px solid #443e3e;
  border-left: 1px solid #443e3e;
}
.footerv2item {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
}
.footerv2item span.divide {
  float: left;
  text-align: center;
  padding-top: 7px;
}
.footerv2item span.divide:nth-child(1){
  width: 33.3333%;
}
.footerv2item span.divide:nth-child(2){
  width:  33.3333%;
}
.footerv2item span.divide:nth-child(3){
  width:  33.3333%;
}
span.divide #minusminus, span.divide #plusplus, span.divide #start{
  padding: 2px 10px 2px 10px;
  font-size: 25px;
}
span.divide #transposesection a{
  padding: 2px 10px 2px 10px;
}
#start, #minusminus, #plusplus {
  color: white;
  background: #666666;
}
i.righttranspose, i.lefttranspose {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.righttranspose {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.lefttranspose {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
span.divide #transposesection a {
  padding: 2px 10px 2px 10px;
}
#transposebutton {
  color: #444;
  padding: 10px;
  border-radius: 2px;
  background-color: #d8d8d8;
  font-family: arial, sans-serif;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}
#runvalue{
 font-size: 1.7em;
}
.colorchord .tootltipchord {
  visibility: hidden !important;
  background-color: white;
  text-align: center;
  color:black;
  border:gray 0.5px solid;
  /* Position the colorchord */
  position: absolute;
  z-index: 1;
}
.colorchord:hover{
  cursor:pointer;
}
.colorchord:hover .tootltipchord {
  visibility: visible !important;
}
#lefthint, #righthint{
display:inline-block;
}
.tootltipchord svg{
  display:block;
}
#righthint {
  padding:10px;
  padding-bottom:10px;
  font-weight:bold;
  cursor:pointer;
}
#lefthint {
  padding:10px;
  padding-bottom:10px;
  font-weight:bold;
  cursor:pointer;
}

#backHome{
 font-size:30px;
 margin-top: 0px;
 margin-bottom: 30px;
}
#googlebutton{
 font-size:30px;
 margin-top: 0px;
 margin-bottom: 30px;
}