html {
cursor: url(../images/cur.gif), auto;
}

body {
 font-family: 'Zen Maru Gothic';
 color: #4f4257;
 font-weight: bold;
 line-height: 1.3em;
 background-image: url(../images/tile.png);
 background-position: top;
 overflow-x: hidden;
 }

a:link, a:visited {
 color: #9e72d9;
 font-weight: bold;
 text-decoration: none;
 line-height: 1.3;
}

a:hover {
 color: #a562ff;
 text-decoration: none;
 line-height: 1.3;
 background-color: #ffffff;
 cursor: url(../images/cur.gif),auto;
}

b {
 color: #9e72d9;
 font-weight: bold;
}

img {
 max-width: 100%;
 height: auto;
}

p {
 color: #4f4257;
 line-height: 1.1em;
}

h1, h2, h3{
 font-family: 'Kosugi Maru';
 color: #9e72d9;
 font-size: 1em;
 text-align: right;
 background-color: #ffffff;
}

h4 {
 font-family: 'Kosugi Maru';
 color: #a562ff;
 font-size: .8em;
 text-align: left;
}

h5 {
 font-family: 'Hachi Maru Pop';
 color: #ffffff;
 font-size: 3.2em;
 line-height: 1.3em;
 background: -webkit-linear-gradient(#f2e9fb, #9071bb);
 position: absolute;
 top: 6%;
 left: -1%;
 margin: 1%;
 padding: 2%;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

ul {
 list-style-image: url(../images/bullet.png);
}

textarea {
 color: #ffffff;
 background: rgba(110, 82, 126, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 98%;
 height: 6.7em;
 padding: 2px;
}

.postav img {
 border:0;
 margin:1% 1% -.5%;
 vertical-align:center
}

#layout {
 background: rgba(110, 82, 126, 0.5);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 75em;
 height: auto;
 position: relative;
 margin: auto;
 overflow-y: auto;
}

#topbanner {
 background-image: url(../images/hbg.png);
 background-position: center;
 background-size: cover;
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 96.7%;
 height: 8em;
 margin: 0.5em;
 padding: 10px;
 overflow-y: hidden;
}

#midbanner {
 background-image: url(../images/mdiv.gif);
 background-repeat: repeat-x;
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 96.7%;
 margin: 0.5em;
 padding: 10px;
 overflow-x: hidden;
 overflow-y: auto;
}

#botbanner {
 background-image: url(../images/ctbg.png);
 border: 1px solid #947ed0;
 border-radius: 5px;
 width: 96.7%;
 height: 1.8em;
 margin: 0.5em;
 padding: 10px;
 overflow-x: hidden;
 overflow-y: hidden;
}

#stack {
width: 13.75em;
display: flex;
float: left;
flex-direction: column;
}

#solo {
width: 80%;
position: relative;
display: flex;
float: right;
}

#nav{
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 13.75em;
 height: 100%;
 display: flex;
 float: left;
 flex-direction: column;
 margin: 0.5em;
}

#cal {
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 13.75em;
 display: flex;
 float: left;
 flex-direction: column;
 margin: 0.5em;
}

#blog {
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 100%;
 height: 100%;
 position: relative;
 float: right;
 margin: 0.5em;
}

#musicplayer {
 text-align: center; 
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 13.75em;
 display: flex;
 float: left;
 flex-direction: column;
 margin: 0.5em;
}
 
#botcontainer {
 background-image: url(../images/ctbg.png);
 border: 3px solid #947ed0;
 border-radius: 5px;
 width: 76%;
 height: 34.8em;
 position: relative;
 float: left;
 margin: 0.5em;
}

.n2{
 background: rgba(216, 202, 235, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 display: block;
 margin: 3px 1px 3px 1px;
}

.navlink a{
 font-family: 'Zen Maru Gothic';
 color: #ffffff;
 letter-spacing: 2px;
 background: -webkit-linear-gradient(#f2e9fb, #9071bb);
 margin: 3px;
 padding: 3px;
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
}

.navlink a:hover {
 font-family: 'Zen Maru Gothic';
 background: -webkit-linear-gradient(white, #9966ff);
 -webkit-background-clip: text;
 -webkit-text-stroke: 4px transparent;
 }
 
.calendar-table {
 color:#4f4257;
 font-weight: bold;
 text-align: center;
 letter-spacing: 3px;
 background: linear-gradient(#d9d7fa 15%, white);
 border: 1px solid #947ed0;
 border-radius: 5px;
 margin: auto;
 padding: 2px;
}

.month-name {
 color:#4f4257;
 background: linear-gradient(white 50%, #d9d7fa);
 border: 1px solid #947ed0;
 border-radius: 5px;
}

.calendar-header-day {
 color:#4f4257;
 background: linear-gradient(white 50%, #aa92c5);
 border: 1px solid #947ed0;
 border-radius: 5px;
}

.calendar-day {
 color:#4f4257;
 background: linear-gradient(white 50%, #d9d7fa);
 border: 1px solid #947ed0;
 border-radius: 5px;
}

.calendar-current-date {
 color:#a562ff;
 font-weight:700
}

.innercontainer {
 background: rgba(255, 255, 255, 0.7);
 border: 1px solid #947ed0;
 border-radius: 5px;
 margin: 1%;
 padding: 1%;
}

.outercontainer {
 background: rgba(216, 202, 235, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 padding: 1%;
 margin: 1%;
}

#footer {
 color: #4f4257;
 font-size: 0.8em;
}

#content {
 height: 44.4em;
 padding: 1.5%;
 overflow-y: scroll;
 overflow-x: hidden;
}

#sidepad {
 padding: 4.5%;
}

.layouthead {
 background-image: url(../images/hdrly.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 1em;
 overflow-x: auto;
}

.navhead {
 background-image: url(../images/hdrsd.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 1em;
 overflow-x: auto;
}

.bloghead {
 background-image: url(../images/hdrbg.png);
 background-repeat: repeat-x;
 background-position: right; 
 height: 1em;
 overflow-x: auto;
}

#headerfocus {
 position: absolute;
 right: 1.5%;
 top: 1.45%;
 overflow-y: hidden;
}

.innerborder {
 background-image: url(../images/bdbg.png);
 border: 1px solid #947ed0;
 border-radius: 5px;
 display: inline-flex;
 padding: 1%;
 margin: 1%;
}

::-moz-selection {
 color: #a562ff;
 }

::selection {
 color: #a562ff;
 }


* {
 scrollbar-width: thin;
 scrollbar-color: #9071bb #daccee;
}

*::-webkit-scrollbar {
 width: 16px;
}

*::-webkit-scrollbar-track {
 background: #daccee;
}

*::-webkit-scrollbar-thumb {
 background-color: #9071bb;
 border-radius: 10px;
 border: 3px solid #ffffff;
}

.songtitle, .track-info, .now-playing{
 color: #ffffff;
 font-size: 0.8em;
 padding: 0px;
}

.controls{
 display: flex; 
 flex-direction: column; 
 gap: 0px;
}

.buttons{
 font-size: 0.8em;
 width: 100%;
 display: flex;
 justify-content: center;
}

.buttons div{
 width: 33.3%;
}

.playpause-track, .prev-track, .next-track{
 color: #ffffff;
 font-size: 1.8em;
}

.volume-icon{
 font-size: 0.8em;
}

.seeking, .volume{
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 0px;			
}

.now-playing { 
}

.track-info{
 background: rgba(110, 82, 126, 0.5);
 border: 1px solid #947ed0;
 border-radius: 5px;
 padding: 5px;
}

.now-playing{
 font-weight: bold;
}

input[type=range]{
width: 95%;
-webkit-appearance: none;
}

input[type=range]:focus{
 outline: none;
}

input[type=range]::-webkit-slider-runnable-track{
 background:#ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-webkit-slider-thumb{
 background: #ffffff;
 border-radius: 3px;
 height: 0.8em;
 width: 0.8em;
 margin-top: -3px;
 -webkit-appearance: none;
}

input[type=range]::-moz-range-track{
 background: #ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-moz-range-thumb{
 background: #ffffff;
 border: none;
 border-radius: 3px;
 height: 0.8em;
 width: 0.8em;
}

input[type=range]{
 width: 95%;
 -webkit-appearance: none;
}

input[type=range]:focus{
 outline: none;
}

input[type=range]::-webkit-slider-runnable-track{
 background:#ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-webkit-slider-thumb{
 background: #ffffff;
 border-radius: 3px;
 width: 0.8em;
 height: 0.8em;
 margin-top: -3px;
 -webkit-appearance: none;
}

input[type=range]::-moz-range-track{
 background: #ffffff;
 width: 90%;
 height: 3px;
}

input[type=range]::-moz-range-thumb{
 background: #ffffff;
 border: none;
 border-radius: 3px;
 width: 0.8em;
 height: 0.8em;
}

.kosugi-maru-regular {
 font-family: "Kosugi Maru", serif;
 font-weight: 400;
 font-style: normal;
}

.zen-maru-gothic-regular {
 font-family: "Zen Maru Gothic", serif;
 font-weight: 400;
 font-style: normal;
}

.hachi-maru-pop-regular {
 font-family: "Hachi Maru Pop", serif;
 font-weight: 400;
 font-style: normal;
}