* {
  box-sizing:border-box
}
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
  -o-user-select: none; 
  -khtml-user-select: none; 
  user-select: none;
}
body {
    margin:0;
    font-size: 14px;
    font-family: Verdana;
    color:#fff;
    background: linear-gradient(rgba(20, 55, 35, 0.85), rgba(5, 20, 12, 0.85)), url('/images/harpbc.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
#close {
    position: absolute;
    top: 20px;
    left:20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    z-index: 999;
}
#close:hover {
    background-color: LightCoral;
}
.bl {
    color: #000;
    padding: 20px;
    margin: 5px;
}
h1 {
    font-size:20px;
}
h1 img {
    width:20px;
    height: 20px;
    margin-left: 10px;
}
h2 {
    font-size:16px;
}
#search {
    outline: none;
    border: 1px solid #030414;
    padding: 8px;
    border-radius: 15px;
    margin: 20px 0;
    width: 500px;
}
#search:focus {
    outline: none;
    border: 1px solid LightCoral;
}
#main {
    width: 90vw;
    min-height: 100vh; 
    margin: 60px auto 0;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    animation: expand 0.8s ease-out forwards; 
    transform-origin: center; 
    
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    gap: 50px;
}
#main0 {
    width: 90vw;
    min-height: 100vh; 
    margin: 60px auto 0;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    gap: 50px;
}
@keyframes expand {
    0% {
        transform: scaleX(0) scaleY(0); 
        opacity: 0;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}
#lft {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
#rgt {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#rgt2 {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

#b_op {
    display:flex;
    flex-direction: column;
    width:100%;
    margin:0 auto;
    padding-top:20px;
    white-space: nowrap;
}
#t_op, #g_op, #n_op {
    display:flex;
    flex-direction: column;
    white-space: nowrap;
}
#t_op {
    padding-top:20px;
}
#g_op, #n_op {
    padding-top:50px;
}
#t_op a, #g_op a {
    cursor: pointer;
}
#b_op div, #t_op div, #g_op div {
    padding-right: 20px;
}
#b_mode {
    display: flex;
    flex-direction: row;
    align-items: center;
}


#tab, #tab5 {
    
    width:100%;
    margin:0 auto;
    padding:3em 0;
}

#tab {
    display: none;
}
#pnl {
    width:100%;
    margin:0 auto;
    padding:0;
    display: flex;
    flex-direction: row;
    align-items: center
}
#pnlc {
    flex-grow: 1;
    text-align: center;
    font-size: 20px;
}
#pnlc a {
    color: LightCoral;
    text-decoration: none;
    font-weight: bold;
}
#pnll, #pnlr {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    align-items: center;
}
#pnll a, #pnlr a {
    display: inline-block;
    padding: 7px;
    border-radius: 15px;
    text-align: center;
    color: LightCoral;
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
}
#pnl a:hover {
    color: SkyBlue;
}
#tab0 {
    width:100%;
    margin:0 auto;
}
#tab0 a {
    display: inline;
    cursor: pointer;
    border-radius: 10px;
    padding:7px;
    margin-left: 5px;
    line-height: 50px;
    text-align: center;
    color: #000;
    background-color: #C7E3FF;
    text-decoration: none;
    font-size: 20px;
}
#tab0 a:hover {
    background-color: #86A2BF;
}
#tab0 div {
    display: inline;
    line-height: 50px;
    margin-left: 5px;
    padding: 10px 0;
    border-left: 2px #000 solid;
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0; 
  }
}
#tab3 {
    display: flex;
    flex-direction: column;
    width:100%;
    margin:30px auto;
    color: #fff;
}
#tab3 a {
    display:block;
    padding: 7px;
    border-radius: 15px;
    text-decoration: none;
    color: #fff;
}
#tab3 a:active {
    background-color: LightCoral;
}
#tab3 a:hover {
    color: #000;
}
#plink a, #glink a {
    display:inline;
    padding: 0;
    text-decoration: none;
    color: #fff;
}
#plink a:hover, #glink a:hover {
    color: LightCoral;
}
#favheart {
    cursor: pointer;
}
#fav {
    font-size: 16px;
}
#fav a {

}
#fav a:hover {
    color: LightCoral;
}
#fav a:active {
    color: LightCoral;
    background-color: transparent;
}
#tab3 span {
    color: #fff;
}
#tab4 {
    display: none;
    width:100%;
    margin:0 auto;
    padding:3em;
}
#tab5 a {
    color: LightCoral;
    text-decoration: none;
    font-weight: bold;
}

.type, .ovb {
    display: block;
    padding: 1px;
    font-size: 14px;
}
.type a, .ovb a {
    display: block;
    padding: 7px;
    text-decoration: none;
    border-radius: 15px;
    cursor: pointer;
    color: #fff;
}
.ovb a:hover {
    background-color: SkyBlue;
}
.type a:hover {
    background-color: SkyBlue;
    color: #fff;
}
.type a:active, .typeactive, .notationactive, .gactive {
    background-color: LightCoral;
    color: #fff;
}
.nobends, .lvl1:hover {
    background-color: #C3FFFBD9;
}
.nobendsc, .nobendsc:hover {
    background-color: #C3FFFBD9;
}
.bends, .lvl2:hover {
    background-color: #FFEAC3D9;
}
.bendsc {
    background-color: LightCoral;
}
.overbends, .lvl3:hover {
    background-color: #FFC3C6D9;
}
.overbendsc {
    background-color: LightCoral;
}
.c23, #plink, #glink {
    font-size: 10px;
}
.fl {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.fl p {
    padding-right: 60px;
}
.mline {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.mlevel {
    
}
.lbl {
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.mlink {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.mlink img {
    margin-left: 5px;
}
.mlink a:hover {
    color: #000;
}
.bunny, .fox, .bear {
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom right;
}
.bunny, #bunnyready {
    background-image: url('/images/logo/bunny.png');
}
.fox, #foxready {
    background-image: url('/images/logo/fox.png');
}
.bear, #bearready {
    background-image: url('/images/logo/bear.png');
}
#ready {
    display: flex;
    flex-direction: row;
    color: #fff;
}
#ready div {
    margin: 0 10px;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 120px;
    line-height: 50px;
}
#ready span {
	display: inline;
	padding: 10px;
	border-radius: 15px;
	color: #000;
	white-space: nowrap;
}
#bunnyready span {
    background-color: #C3FFFB;
    box-shadow: 0 0 10px 3px #C3FFFB;
}
#foxready span {
    background-color: #FFEAC3;
    box-shadow: 0 0 10px 3px #FFEAC3;
}
#bearready span {
    background-color: #FFC3C6;
    box-shadow: 0 0 10px 3px #FFC3C6;
}
#tabsgrid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
}
#tabsgrid div {
    flex: 1 1 240px;
    min-width: 240px;
    line-height: 1.5;
}
#melody {
    display: flex;
    flex-direction: row;
}
#melodytitle {
    flex-grow: 1;
}
#melodylinx {
    font-size: 20px;
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 480px) {
    #close {
        display: none;
    }
    #main, #main0 {
        animation: none;
        width: 100vw;
        padding: 2vw;
        flex-direction: column;
    }
    #b_op, #t_op, #g_op, #n_op {
        flex-direction: row;
        padding-top: 2vw;
        overflow-x: auto;
    }
    #b_op div, #t_op div, #g_op div, #n_op div {
        padding-right: 2vw;
    }
    #rgt {
        margin-left: 0;
        width: 100%;
    }
    #pnl {
        flex-direction: column;
    }
    
    #pnll, #search {
        width: 100%;
    }
    #pnlc, #pnlr {
        display: none;
    }
    h1 {
        margin: 20px 0;
    }
    #tab {
        padding: 0;
    }
    #tab3 {
        margin: 1vw 0;
    }
    #melody {
        flex-direction: column;
    }
}