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

body {
 background-color: #daf7ff;
 background-image: url('../images/tile.gif');
 background-position: top;
 font-family: ms pgothic;
 text-align: justify;
 line-height: 1.3;
 color: #3399ff;
}

::-moz-selection {
 color: #ff6699;
 background: white;
 }

::selection {
 color: #ff6699;
 background: white;
 }

a:link, a:visited {
 color: #00c3ff;
 text-decoration: none;
 font-weight: bold;
 text-align: justify;
 line-height: 1.3;
}

a:hover {
 color: #ff6699;
 text-decoration: none;
 text-align: justify;
 line-height: 1.3;
 background-color: #ffffff;
 cursor: url('https://ordainedmotion.neocities.org/images/cur.webp'),auto;
}

p {
 line-height: 1.3em;
 color: #3399ff;
}

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

h1, h2, h3, h5 {
 color: #0099ff;
 font-size: 16px;
 font-family: "courier new", monospace;
 text-align: right;
 background-color: #ffffff;
}

h4 {
 color: #0099ff;
 font-size: 13px;
 font-family: ms pgothic;
 text-align: left;
}

ul {
  list-style-image: url('https://ordainedmotion.neocities.org/images/bullet.gif');
}

nav{
 position: absolute;
 padding: 10px;
 height: 133%;
 width: 220px;
 margin: auto;
 border: 3px solid #3fabde;
 background: #d7f2fa;
 margin-left: 1%;
}

.n2{
 background-color: white;
 display: block;
 margin: 3px 1px 3px 1px;
 border: 1px solid #3fabde;
}

.navlink {
 background: linear-gradient(white 50%, #7cd8f3);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font-family: "Meiryo", "Verdana", "Tahoma", sans-serif;
 font-weight:bold;
 filter:  drop-shadow(0px 1px #6b9dcb) drop-shadow(0 -1px #6b9dcb) drop-shadow(1px 0 #6b9dcb) drop-shadow(-1px 0 #6b9dcb)drop-shadow(0px 1px #8bddf4) drop-shadow(0 -1px #8bddf4) drop-shadow(1px 0 #8bddf4) drop-shadow(-1px 0 #8bddf4);
 letter-spacing: 2px;
 padding: 2px;
 margin: 2px;
}

.navlink a:hover {
 background: linear-gradient(white 40%, #ff6699);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font-family: "Meiryo", "Verdana", "Tahoma", sans-serif;
 font-weight: bold;
 }
 
.calendar-table {
 background: linear-gradient(#d7f2fa 15%, white);
 padding: 2px;
 font-weight: bold;
 text-align: center;
 letter-spacing: 3px;
 border: 1px solid #3fabde;
 border-radius: 3px;
}

.month-name {
 background: linear-gradient(white 50%, #d7f2fa);
 border: 1px solid #3fabde;
 border-radius: 3px;
}

.calendar-header-day {
 background: linear-gradient(white 50%, #7cd8f3);
 border: 1px solid #3fabde;
 border-radius: 3px;
}

.calendar-day {
 background: linear-gradient(white 50%, #d7f2fa);
 border: 1px solid #3fabde;
 border-radius: 3px;
}

#imgheader {
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}

section {
 margin: auto;
 position: relative;
 width: 1000px;
 padding-left: 3%;
}

blog {
 position: relative;
 width: 78%;
 max-width: 800px;
 float: left;
 border: 3px solid #3fabde;
 background: #d7f2fa;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}

cb {
 position: relative;
 width: 20%;
 max-width: 200px;
 float: right;
 border: 3px solid #3fabde;
 background: #d7f2fa;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}

.postav img {
 margin: 0% 1% 0% 1%;
 border: 0px;
}

#container {
 margin: auto;
 position: relative;
 width: 100%;
 max-width: 900px;
 background-color: #d7f2fa;
 float: left;
}

#content {
 padding: 1% 2% 1% 2%;
}

#footer {
 font-size: 0.8em;
 padding: 1%;
 text-align: right;
 color: #3399ff;
}

hr {
 border: solid #3fabde;
 border-width: 2px 0 0 0;
}

#postlistdiv ul {
 font-size: 13px;
 padding: 0;
 margin-left: 6%;
list-style-image: url('https://ordainedmotion.neocities.org/images/bullet.gif');
}
#recentpostlistdiv ul {
 font-size: 13px;
 padding: 0;
 margin-left: 6%;
 margin-bottom: -6%;
 list-style-image: url('https://ordainedmotion.neocities.org/images/bullet.gif');
}
.moreposts {
 font-size: 0.8em;
 margin-top: 0.2em;
}

#nextprev {
 text-align: center;
 margin-top: 13px;
}

*{
 scrollbar-width: thin;
 scrollbar-color: #3fabde #d7f2fa;
}

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

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

*::-webkit-scrollbar-thumb {
 background-color: #3fabde;
 border-radius: 10px;
 border: 3px none #ffffff;
}

#musicplayer {
 font-family: ms pgothic;
 font-size: 0.8em;
 background: #d7f2fa;
 border: 3px solid #3fabde;	
 border-top: 0;
 width: 18%;
 max-width: 200px;
 padding: 0 1% 0 1%;
 text-align: center; 
 display: flex;
 flex-direction: column;
 gap: 0px;
 position: relative;
 float: right;
}

.musicheader {
 font-family: ms pgothic;
 border: 3px solid #3fabde;	
 border-bottom: 0;
 width: 20%;
 max-width: 200px;
 text-align: center; 
 display: flex;
 flex-direction: column;
 gap: 0px;
 position: relative;
 float: right;
}

.songtitle, .track-info, .now-playing{
 padding: 0px;
}

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

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

.buttons div{
 width: 33.3%;
}

.playpause-track, .prev-track, .next-track{
 color: #3399ff;
 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-color: #d7f2fa;
}

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

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

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

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

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

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

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

.crt::before {
 content: " ";
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
 z-index: 2;
 background-size: 100% 2px, 3px 100%;
 pointer-events: none;
}

@keyframes flicker {
0% {
 opacity: 0.27861;
}
5% {
 opacity: 0.34769;
}
10% {
 opacity: 0.23604;
}
15% {
 opacity: 0.10626;
}
20% {
 opacity: 0.18128;
}
25% {
 opacity: 0.10626;
}
30% {
 opacity: 0.18128;
}
35% {
 opacity: 0.23604;
}
}

.crt::after {
 content: " ";
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: rgba(18, 16, 16, 0.1);
 opacity: 0;
 z-index: 2;
 pointer-events: none;
 animation: flicker 0.15s infinite;
}