/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


@font-face {
font-family: "Simple";
src: url('https://okoilo.neocities.org/Simple.ttf');
}

@font-face {
  font-family: "mamemoji";
  src: url('https://okoilo.neocities.org/mamemoji.ttf');
}

@font-face {
  font-family: "miracle paint";
  src: url('https://okoilo.neocities.org/miracle%20paint.ttf');
}

@font-face {
  font-family: "script";
  src: url('https://okoilo.neocities.org/Spirit.ttf');
}


div {
  display: block;
}

/**----**/
.box22 {
margin-left: 0px; /* 中央寄せは0をautoに変更 */
width:auto; /* 幅 */
margin-right: auto;
}
.u01 {
background:url(https://foollovers.com/mat/t-frame/frame22-a/f-ue.gif) repeat-x;
height:18px;
margin:0 18px 0 19px
}
.s01 {
background:url(https://foollovers.com/mat/t-frame/frame22-a/f-sita.gif) repeat-x;
height:19px;
margin:0 18px 0 19px
}
.box-top {
background-image:url(https://foollovers.com/mat/t-frame/frame22-a/f-kado1.gif), url(https://foollovers.com/mat/t-frame/frame22-a/f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:18px
}
.box-center {
background-image:url(https://foollovers.com/mat/t-frame/frame22-a/f-migi.gif), url(https://foollovers.com/mat/t-frame/frame22-a/f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y
}
.box-inner {
background:#fff;
margin:0 18px 0 19px
}
.box-bottom {
background-image:url(https://foollovers.com/mat/t-frame/frame22-a/f-kado3.gif), url(https://foollovers.com/mat/t-frame/frame22-a/f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:19px
}

/**----**/

::-webkit-scrollbar {
width: 8.5px; /** width of total scrollbar **/
background: white; /** background of scrollbar **/
border: 1px solid #bfa697;
border-radius: 10px;/** border around whole scrollbar **/
}

::-webkit-scrollbar-thumb {
background: #fcccce; /** color of the moving part of the scrollbar (thumb) **/
border: 1px solid #bfa697;/** border around moving part of scrollbar (overlaps with border of total scrollbar) **/
border-radius: 5px;
}


/*-- Basic stuff --*/


.sidebar p {
    font-size: 16px;
    color: #917a6c;
}

.sidebar h1 {
    color: pink;
    border-bottom: 5px dotted #facdd0;
    margin: 0px;
    margin-top: 2px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 25px;
}


/*--Music player css--*/
.music-body {
    height: auto;
    margin: 0;
    font-size: 16px;
    font-family: "Simple";
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.music-container {
    display: flex;
    flex-direction: row;
    padding: 0px;
    margin-left: 0px;
    position: relative;
    margin: 0px;
    box-sizing: border-box;
}

.music-container p {
    margin: 0px;
}


.img-container {
    position: relative;
    width: 110px;
    height: 110px;
}

.img-container::after {
    content: '';
    background-image: '';
    height: 20px;
    width: 20px;
    position: absolute;
    bottom: -50px;
    transform: translate(50%, 50%);
}

.img-container img {
    box-sizing: border-box;
    width: inherit;
    height: 110px;
    position: absolute;
    
    animation: rotate 3s linear infinite;
    
    animation-play-state: paused;
}

.music-container.play {     /*--.img-container img--*/
    animation-play-state: running;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(360deg);
    }
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-top: 3px;
    position: absolute;
    top: 223px;
    left: -5px
}

.action-btn {
    background: none;
    border: 0;
    color: white;
    font-size: 20px;
    padding: 0px 10px;
    margin: 0 0px;
}

.music-info {
    position: absolute;
    top: -10px;
    margin-left: -50px;
    z-index: 2;
    width: 210px;
}

.music-info h1 {
    margin: 0;
    font-size: 18px;
    color: pink;
    text-decoration: none;
}

.progress-container {
    background-color: #FFFFFF;
    border: 1px solid #bfa697;
    border-radius: 5px;
    margin: 8px 0;
    height: 5px;
    width: 100%;
    z-index: 2;
    margin-left: 0px;
    position: relative;
}

.progress {
    background-color: #fcccce;
    object-fit: cover;
    1px solid #bfa697;
    border-radius: 3px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    z-index: 2;
    position: relative;
}

.playlist {
    position: absolute;
    display: inline;
    margin-top: 280px;
    width: 210px;
    height: 150px;
    margin-left: -50px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #FFFFFF;
    border: 1px dashed #bfa697;
        border-radius: 10px;
    z-index: 1;
}

.playlist ul, .playlist li {
    width: 100%;
    margin-left: -7px;
    margin-top: 3px;
    list-style-image: url('https://tomomi.neocities.org/pixeles/87.gif');
    
}

.playlist li {
    font-size: 16px;
    color: #8f796d;
    width: 100%;
    vertical-align: middle;
}

.playlist li:hover {
    background: rgba(255, 237, 238, 1);
}

.activeSong {
    background: rgba(250, 205, 208, 0.66);
}

.trackDuration {
    position: absolute; 
    right: 5px;
    margin-top: 3.5px;
    font-size: 16px;
}

.trackInfo {
    display: inline-block;
    width: 130px;
    word-wrap: break-word;
    margin-left: -5px;
}

.rotate-anim:hover {
    animation: rotateBackAndForth 5s ease infinite;
    animation-play-state: running;
}

@keyframes rotateBackAndForth {
    33% {transform: rotate(30deg)}
    66% {transform: rotate(-30deg)}
}

/*----*/



/*calendar*/

header {
  margin-bottom: 3px;
  font-family: script;
  font-size: 20px;
  color: pink;
  background: url('https://okoilo.neocities.org/gingamcheck_p3t.gif');
  background-repeat: repeat;
  padding: 7px;
  border: 1px solid #ffccd7;
  border-radius: 2px;
  text-align: center;
}

td {
  padding-top: 8px;
  padding: 1px;
  font-family: ms pgothic;
  background: white;
  border: none
}

td.week {
  padding: 2px;
  padding-bottom: 0px;
  font-family: ms pgothic;
  background: pink;
  border-radius: 2px
}


table {
  font-family: ms pgothic;
  border:1.7px solid #ffccd7;
  font-weight: normal;
  font-size: 13px;
  background: white;
  padding: 4px;
  padding-bottom: 2px;
}


/*calendar: end*/


/*rss feed*/

.feed-title {
  visibility: hidden;
  margin-top: 0px;
  height: 0px;
}

.feed-item-title {
  visibility: hidden;
  height: 0px;
  margin: 0px;
}

.feed-item-desc {
  margin: 0;
  border-bottom: 3px dotted pink;
}

.npf_quirky {
   font-family: script;
  font-size: 20px;
  color: pink;
  margin-top: 7px;
  margin-bottom: 2px;
  border-bottom: none;
  font-weight: bold;
}


.tmblr-full > img{
 max-width: 720px; 
}

.tmblr-full {
 margin: 0px; 
}

figure {
  margin-left: 0px;
  margin-bottom: 8px;
}

.middle > p {
  padding-right: 14px;
}
/*rss end*/



.calendar {
background-image: url("https://okoilo.neocities.org/pinkcheck.png");
padding: 9px;
width: auto;
height: 166px;
}

.titlee {
  text-align: left;
}

textarea {
font-size: 15px;
  font-family: ms pgothic;
}


.positioned {
  position: absolute;
  bottom: 74%;
  left: 17%;
}


.counter {
    display: flex;
  flex-direction: column;
  align-items: center;
}




.scrollable{
  width: 10px;
  padding: 10px;
    height:100px;
    overflow-y:auto;
    background: white;
    border: 1px dashed #bfa697;
    border-radius: 10px;
      font-family: Simple;
      font-size: 17px
}

.scrollable-2{
  width: auto;
  padding: 10px;
    height:300px;
    overflow-y:auto;
    background: white;
    border: 1px dashed #bfa697;
    border-radius: 10px;
      font-family: Simple;
}


.header {
  background: #fae1e2;
}
  

.row-1 {
  display: flex;
  width: 975px;
  height: auto;
  font-size: 15px;
  font-family: ms pgothic;
  color: #917a6c;
  text-transform: none;
  border:67px solid transparent;
  border-image: url('https://okoilo.neocities.org/lacey.png') 67 round;
}


.row-2 {
  display: flex;
  height: auto;
    font-size: 15px;
  font-family: ms pgothic;
  color: #917a6c;
  background: #FBF1ED;
  border:2px solid #F1E9DD;
  border-radius: 1em;
  padding: 20px;
}

.row-3 {
  height: auto;
  width: 926px;
  font-size: 15px;
  font-family: ms pgothic;
  color: #917a6c;
  background: #FBF1ED;
  border:2px solid #F1E9DD;
  border-radius: 1em;
  padding: 20px;
}




.left {
  width:700px;
}

.middle {
  width: 740px;
  margin-left: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
}


.blog {
  padding: 15px;
  padding-bottom: 0px;
  max-width: 745px
}

.blog h1 {
  font-family: script;
font-size: 25px;
color: #f97575;
margin-top: 7px;
margin-bottom: 2px;
border-bottom: none;
font-weight: bold;
}



.right_3 {
  width: auto;
  margin: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  float: left
}

.right_4 {
  width: 122px;
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-right: 3px;
  float: right;
}

.tags {
  width: 180px;
  float: left;
}

.kins {
  width: 140px;
  display: grid;
  grid-template-columns: 75px 75px 75px;
  gap: 5px
}

.kins > img {
  border-radius: 7px;
  border: 1px dashed #bfa697
}






.right-2 {
  width:300px
}




.holder {
padding: 20px;
width: 1109px;
margin:auto;
}

.left-side {
    height: auto;
    width: 234px;
    float: left;
    margin-right:20px;
}

.leftbar {
  width:180px;
  padding: 3px;
  font-family: Simple;
  color: #917a6c;
  text-transform: none;
  font-size: 15px;
  background: #FBF1ED;
  border:2px solid #F1E9DD;
  border-radius: 1em;
}  

.side {
    height: auto;
    width: 234px;
    float: right;
    position: relative;
    margin-left:20px;
}


.blinkiebar {
  padding: 3px;
  font-family: Simple;
  color: #917a6c;
  text-transform: none;
  font-size: 15px;
  background: #FBF1ED;
  border:2px solid #F1E9DD;
  border-radius: 1em;
}  


.extra {
  padding: 10px;
  font-family: Simple;
  color: #917a6c;
  text-transform: none;
  font-size: 15px;
  background: #FBF1ED;
  border:2px solid #F1E9DD;
  border-radius: 1em;
}

.lace {
  background: url(https://files.catbox.moe/rw5dm9.gif) repeat-x;
  background-position: top;
  height: 47px;
  margin: 0px;
}


h2 {
  margin: auto;
  width: 85px;
  font-size: 15px;
  border: 2px dashed pink;
  padding: 10px;
  font-family: Simple;
}

.sidebarr {
  border:1.7px solid #ffccd7;
  border-right: none;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  float: left;
  width: 180px;
  font-family: Simple;
  color: #917a6c;
  text-transform: none;
  font-size: 15px;
  padding: 20px;
  padding-right: 5px;
  padding-left: 9px;
}

.sidebarr  a {
  color: #8f796d;
  text-decoration: none;
}

.sidebar  a:hover {
  color: #fcccce;
  cursor:url(https://static.tumblr.com/xjqjg7j/Mhcmxtzxp/84.gif), auto;
}

.sidebarr h1 {
  font-family: script;
  font-size: 20px;
  color: pink;
  margin-top: 7px;
  margin-bottom: 2px;
  border-bottom: none;
  font-weight: bold;
  text-align: center;
}

.lacebor {
 background: url('https://okoilo.neocities.org/table-doll-migi.gif') repeat-y;
 width: 35px;
 background-position: right;

border:1.7px solid #ffccd7;
border-left: none;
border-right: none;
}  

.guestbook {
  background: url('https://okoilo.neocities.org/gingamcheck_p3t.gif');
  background-repeat: repeat;
  padding: 7px;
  border: 1px solid #ffccd7;
  border-radius: 2px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}


.guestbook h1 {
  font-family: script;
  font-size: 17px;
  color: #ffadcd;
  margin-top: 2px;
  margin-bottom: 2px;
  border-bottom: none;
  font-weight: normal;
}



.guestbook img {
  float: right;
}


.right_4 > .scrollable {
  width: 100px;
}



.blank-space {
  width: auto;
  height: 30px;
}

.blank-space-v {
  width: 30px;
  height: auto;
}


iframe {
    margin-left: 10px;
    border: none;
}



 a {
  color: pink;

}

 a:hover {
  color: #ffe0e6;
  cursor:url(https://static.tumblr.com/xjqjg7j/Mhcmxtzxp/84.gif), auto;
}





h1 {
  font-family: script;
  font-size: 20px;
  color: pink;
  margin-top: 7px;
  margin-bottom: 2px;
  border-bottom: none;
  font-weight: bold;
}

h3 {
  font-family: miracle paint;
  font-weight: normal;
  font-size: 60px;
  margin-bottom: 0px;
  color: #fcccce;
  text-shadow: 
      2px 1px 0px #8f796d,
      -2px 1px 0px #8f796d,
      1px 2px 0px #8f796d,
      1px -2px 0px #8f796d,
      4px 1px 0px white,
      -4px 1px 0px white,
      1px 4px 0px white,
      1px -4px 0px white;
}

li {
  list-style-type: circle;
  border-bottom: 2px dotted #fcc0cb;
    font-family: ms pgothic;
    font-size: 15px
}


body {
  margin: 0px;
  background-image: url('https://okoilo.neocities.org/dott-t-1.gif');
  background-repeat: repeat;
  background-size: 80px;
  font-size: 15px;
  font-family: ms pgothic;
  cursor:url(https://okoilo.neocities.org/tumblr_inline_mzo3g3OMFa1r63cto540.gif), auto;
}

p {
  font-size: 15px;
  font-family: ms pgothic;
}


footer {
  margin-top: auto;
  font-family: ms pgothic;
  font-size: 5px;
  font-style: italic;
  text-align: center;
}

footer > p {
  font-size: 11px;
}