@font-face {
            font-family: body;
            src: url('https://file.garden/aNy90GYmaWI-Okj1/dogicapixelbold.ttf');
        }
        @font-face {
            font-family: bold;
            src: url('https://file.garden/aNy90GYmaWI-Okj1/font1.ttf');
        }
        
        @font-face {
                font-family: 'Mount';
                src: url('/font/Mount.ttf');
            }
            
            @font-face {
              font-family: 'Cheer';
              src: url('/font/Cheer.otf')
            }
            
            h1{
              font-family:Mount;
              font-size:32px;
              text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color:#815442;
            }
            
        a, a:visited{
        color:rgb(129, 84, 66);
        }
        
        a:hover{
          color:#F6C7D5;
        }
        
        body{
        background-color: rgb(129, 84, 66);
        background-image: url('/graphics/f09-bg-polkadot.gif');
        font-family: Arial;
        font-size: 12px;
        text-align: center;
        }
        
        
        
        
        ::-webkit-scrollbar{
        width:0px;
        background: transparent;
        }
        .title{
        height:fit-content;
        width:100%;
        margin-top:0;
        padding:5px;
        font-size: 25px;
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color:#F5C7D3;
        box-sizing: border-box;
        font-family: Mount;
        color:#B1F1D6;            
        text-shadow: 0.05em 0 #815442, 0 0.05em #815442, -0.05em 0 #815442, 0 -0.05em #815442, -0.05em -0.05em #815442, -0.05em 0.05em #815442, 0.05em -0.05em #815442, 0.05em 0.05em #815442;
        }
        .main{
        max-width: 1000px;
        height: fit-content;
        margin:auto;
        position:relative;
        border: 0px solid transparent;
        background-repeat: repeat-y ;
        background-position: left, right;
        padding-left: 20px;
        padding-right: 20px;
        border-width: 9px;
border-style: solid;
border-image: url('/graphics/lace5.png') 8 fill round;
        }
        .grid{
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: 1fr;
        width: 100%;
        gap:10px
        }
        .header{
        width:100%;
        height: 20%;
        font-family: Mount; 
        background-size:cover;
        text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
        box-sizing: border-box;
        overflow-wrap: break-word;
        }
        .center{
        min-height: 700px;
        width:100%;
        grid-column: 2;
        grid-row:1;
        }
        .centerbox{
        width:100%; 
        border: 1px solid rgb(129, 84, 66);
        background-color: rgba(239, 221, 198, 0.731);
        margin-top: 10px;
        height:538px;
        background-image:url('/graphics/j01-bg-cloth.png');
        overflow:scroll;
        }
        .left{
        height: 700px;
        max-width:200px;
        grid-column: 1;
        grid-row:1;
        overflow-y: auto;
        overflow-x:hidden;
        }
        .right{
        height: 700px;
        max-width:200px;
        grid-column: 3;
        grid-row:1;
        overflow-y: hidden;
        overflow-x:hidden;
        } 
        @media only screen and (max-width: 900px) {
        .left {grid-area: 2 / span 3; min-height: 300px; max-height:none;min-width:100%;}
        .center {grid-area: 1 / span 3;}
        .right {grid-area: 3/ span 3;min-height: 300px;min-width:100%}
        }
        
        
#glenplayer02 {
position:relative;
top:0px;
left:5px;
display:flex;
z-index:99;
}
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
}
 
.playy, .pausee {color:#F6C6D6; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
font-family: mount;
font-size:20px;
color:#F6C6D6;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of music note symbol */
}
 
.labeltext {
margin-left:0px;
position: relative;
bottom:10px;
font-family: mount;
font-size:14px;
color:#F6D5F0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;/* color of song title */
}