* {
margin: 0;
padding: 0;
box-sizing: border-box;
cursor:url(http://media.tumblr.com/decea123681b5bdb67d7df9a35855ea7/tumblr_inline_mki7zsGiDT1qz4rgp.png), url(http://media.tumblr.com/decea123681b5bdb67d7df9a35855ea7/tumblr_inline_mki7zsGiDT1qz4rgp.png), auto;}
a{
color: #77adff;
text-decoration: none;

}
:root{
--border: #a17989;
}

body{
background-image: linear-gradient(transparent, #FAF1F4cb) ,url(https://manantial.neocities.org/manantial%20media/dotsblue.png);
background-size: 12px;
background-attachment: fixed;
animation: background 95s linear infinite;
}
              

.wrap{
width: 780px;
margin: 5rem auto;
background: #FAEBF3;
border-radius: 10px;
border-image: url(https://manantial.neocities.org/manantial%20media/border2.png);
border-image-width: 11px;
border-image-slice: 9;
border-image-repeat: round;
border-style: solid;
display: flex;
flex-direction: column;
position: relative;
}

.grids {
display: grid;
gap: 3px;
border: 1px #8b6f60 dashed;
border-radius: 7px;
background: url(https://manantial.neocities.org/manantial%20media/backgroundjournal.png);
padding: 26px 13px 16px 13px;
margin: 1px;
box-shadow: -5px -5px 4px inset #00000033, 3px 3px 3px inset #ffffff55;
}

.strap {
width: 68px;
background: url(https://manantial.neocities.org/manantial%20media/backgroundjournal.png);
box-shadow: 5px 5px 4px inset #00000033, -3px 3px 3px inset #ffffff55;
border-radius: 40% 40% 0 0 ;
outline: 1px dashed #f5add0;
outline-offset: -10px;
border-left: 0px;    
height: 130px;
position: absolute;
top: 225px;
right: -89px;
z-index: -1;
transform: rotate(90deg);
overflow: hidden;
}

.circle {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
box-shadow: inset #f5add0 2px -2px 4px -2px, inset #edcddd 0px 0px 4px 0px, #72003894 0px 0px 8px -3px, inset #ffffff3b -5px 6px 7px -3px;
background-color: #ffffff8e;
position: absolute;
top: 19px;
left: 17px;
}

.middle{
width: 100%;
height: 100%;
background-image: url(https://manantial.neocities.org/manantial%20media/plaidpink.gif);
display: flex;
padding: 5px;
gap: 7px;
border: 1px solid #a6a6a6;
border-radius: 5px;
}

.bottom {
width: 100%;
height: 80px;
background-color: #fff;
border: solid 1px #a6a6a6;
border-radius: 10px;
box-shadow: inset #ffdceb 0 0 6px;
text-align: center;
margin: 2px auto;
padding:8px 0px 8px 0px;
display: flex;
flex-direction: row;
gap: 0.2rem;
}

.dedication {
width: 100%;
height: 50px;
background-image: url(https://manantial.neocities.org/manantial%20media/deds.png);
border: solid 1px #a6a6a6;
border-radius: 4px 4px 12px 12px;  
text-align: left;
margin: 1.9px auto;
padding: 5px; 
}

.dedication p {
color: #FDBFD3;
font-size: 10px;
font-family: 'mondwest';
}

.buttons {
padding: 3.5px;
background-color: #FDBFD3;
border-radius: 10px 10px 0px 0px;
box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 20%), inset -13px 0 6px -10px rgb(66 66 66 / 56%), inset 0 13px 6px -10px #ffffff, inset 0 -13px 6px -10px rgb(66 66 66 / 38%);
border: solid 1px #8b6f60;
border-bottom: 0px;
padding-bottom: 0px;
text-align: center;
color: #FAEBF3;
font-size: 12px;
text-shadow: -1px 0 #70a4a4, 0 1px #70a4a4, 1px 0 #70a4a4, 0 -1px #70a4a4, 0 0;
font-family: 'spirit';
}

.left{
width: 27%;
height: 100%;
background: #edffff;
border: solid 1px #a6a6a6;
border-radius: 10px 10px 3px 3px;
padding: 5px;
}

.mainout {
display: flex;
gap: 0.4rem;
width: 335px;
flex-direction: column;
}

.main{
width: 532px;
height: 543px;
background-color: #fffff1;
border: solid 1px #a6a6a6;
border-radius: 10px 10px 3px 3px;
padding: 5px;
display: flex;
gap: 0.4rem;
}

.divwrap{
width: 100%;
height: 10rem;
background-color: #fffdfd;
border: 2px ridge #a17989;
display: flex;
padding: 5px;
gap: 0.5rem;
border-radius: 3px;
color: #687138;
}

.top-count {
margin: 7px 0px 0px 0px;
width: auto;
box-shadow: -1px -1.4px 1px inset #00000033, 2px 3px 1.5px inset white, 0px 0px 2px #aba4a6;
border-radius: 6px 6px 0px 0px;
border: solid 1px #a6a6a6;
border-bottom: 0px;
height: 20px;
background: #FAEBF3;
font-family: 'pixel';
color: #70a4a4;
font-size: 10px;
padding: 5px 6px 20px 5px;
}

.count-body {
width: auto;
border-radius: 0px 0px 6px 6px;
background: white;
border: solid 1px #a6a6a6;
color:  #808080;
box-shadow: inset 0px -5px 5px -5px #dadada, 0px 0px 5px 0px #dadada;
font-family: 'pc98';
font-size: 12px;
padding: 4px 5px 5px;
}

.phoneline {
width: 100%;
height: 11.6rem;
background-image: url(https://dl.dropbox.com/scl/fi/k0hd2mcj126npas4cbde4/itsalwaysu.gif?rlkey=mdksybzwk5p0we3vtmzekia0e&st=hjfiyb4t);
background-size: cover;
background-position: center;
border: solid 1px #a6a6a6;
border-radius: 3px 5px;
padding: 4px;
box-shadow: inset #ffddeb 0 0 6px;
}

.phoneline h1{
margin-top: 3.65rem;
margin-left: 0.82rem;
color: #f5f4f5;
font-size: 2.6em;
font-family: 'apple';
font-weight: 100;
text-shadow: -1px 0 #FDBFD3, 0 1px #FDBFD3, 1px 0 #FDBFD3, 0 -1px #FDBFD3, 0 0;
 animation: glow 2.5s infinite;
}
 
@keyframes glow { 0% { text-shadow: 0px 0px 15px #b8dcd8; } 50% { text-shadow: 0px 0px 5px #b8dcd8; } 100% { text-shadow: 0px 0px 15px #b8dcd8; }
}



.intro_wrap{
width: 100%;
height: 12.9em;
background: #FAF1F4;
border: solid 1px #a6a6a6;
padding: 6px;
border-radius: 5px;
overflow-y: auto;
}

.intro{
width: 100%;
height: 91%;
border: solid 1px #a6a6a6;
border-radius: 5px;
background-color: #fff;
box-shadow: inset #ffddeb 0 0 6px;
text-align: justify;
font-size: 11px;
padding: 8px;
color: #808080;
p {
font-family: 'pixel';
}
}

#news {
font-family: 'pixel';
font-size: 11px;
padding-top: 1px;
}
 #news:hover{ 
   color: #ffbad2;
 }
 
.intro2{
width: 100%;
height: 100%;
border: solid 1px #a6a6a6;
border-radius: 5px;
background-color: #fff;
box-shadow: inset #ffddeb 0 0 6px;
text-align: justify;
font-size: 11px;
font-family:'spirit';
padding: 8px;
color: #808080;
margin-top: 6.2px;
}



.intro3{
width: 100%;
height: 100%;
border: solid 1px #a6a6a6;
border-radius: 5px;
background-color: #fff;
box-shadow: inset #ffddeb 0 0 6px;
text-align: justify;
font-size: 11px;
padding: 8px;
color: #808080;
margin-top: 6.2px;
}

.right{
width: 170px;
height: 100%;
background-color: #fffcf9;
border: solid 1px #a6a6a6;
border-radius: 10px 10px 3px 3px;
display: flex;
flex-direction: column;
padding: 4px;
gap: 0.7rem;
color: #616161;
}

.box1{
width: 100%;
height: 10.4rem;
background-color: #fffff1;
border: solid 1px #a6a6a6;
border-radius: 5px;
text-align: center;
font-family: 'pixel';
font-size: 11px;
margin-top: 1px;
overflow: auto;
}

.featured-img {
margin: 2px;
width: 98px;
text-align: center;
border: solid 1px #a6a6a6;
border-radius: 5px;
filter: sepia(1) saturate(0.3) hue-rotate(295deg);
transition: 0.4s ease-out;
}


.featured-img:hover {
filter: none;
transition: 0.3s ;
} 

.box2{
width: 100%;
height: 5.2rem;
background-color: #FAEBF3;
border: solid 1px #a6a6a6;
border-radius: 5px;
padding: 7px;
text-align: justify;
font-size: 11.6px;
}

marquee {
height: auto;
animation: marq 22 linear;
animation-iteration-count: infinite;
display: flex;
flex-direction: row;
gap: 0.5rem;
image-rendering: pixelated;
}

#inner {
float: left;
width: 65px;
margin-right: 5px;
margin-top: 5px;
}

#inner2 {
float: right;
width: 150px;
margin: 2px;
margin-top: 1px;
margin-bottom: -2px;
}

#inner3 {
float: left;
width: 55px;
margin: 6px;
margin-top: 5px;
margin-bottom: 2px;
}



.upto {
width: 125px;
margin: auto;
margin-top: 10px;
padding: 5px;
font-family: 'pixel';
font-size: 10px;
background-color: white;
border: 1px dashed #FFB0C9;
outline: 2px solid white;
box-shadow: 3px 3px #a3736750;
text-align: left;
border-radius: 4px;  
}

#upto-user {
margin-left: 1px;
margin-top: 5px;
margin-bottom: 4px;
text-shadow: 1px 0px white, 0px 1px white, -1px 0px white, 0px -1px white;
background: #edffff;
padding: 2px 4px 2px 4px;
width: fit-content;
font-family: 'pc98';
font-size: 9px;
border-right: 2px solid #6d999950;
border-bottom: 2px solid #6d999950;
border-radius: 3px;
font-size: 12px;
}

#upto-content {
padding-top: 4px;
padding-right: 4px;
margin: 0em 0em 0.5em 0.5em;
height: 175px;
text-align: justify;
overflow-y: auto;
}
 
#upto-content::-webkit-scrollbar {
        width: 4px;
        }

        #upto-content::-webkit-scrollbar-track {
        background-color: transparent;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }

        #upto-content::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #edffff;
        }

.ad{
font-family: 'pixel';
width: 100%;
height: 15.3rem;
background-image: linear-gradient(transparent 50%, #ffdeeb 100%) , url(https://manantial.neocities.org/manantial%20media/dotbg.png);
background-size: 30%;
border: solid 1px #a6a6a6;
border-radius: 5px;
}

.box3 {
font-family: 'pixel';
width: 100%;
height: 7.3rem;
align-content: center;
text-align: center;
background-image: linear-gradient(transparent 50%, #ffdeeb 100%), url(https://dl.dropbox.com/scl/fi/ts7p0rt2vd92kul334ehu/fabs.jpg?rlkey=9efhwh8ey9rqa14biqssjrwz2&st=9wpdwtoi);
background-size: contain;
border: solid 1px #a6a6a6;
border-radius: 5px;
}

.eyelet {
position: absolute;
top: -6px;
left: 2.4px;
z-index: 10;
pointer-events: none;
}

.chichi {
width: auto;
height: 300px;
position: absolute;
top: 4px;
left: -172px;
z-index: 30;
transform: rotate(15deg);
pointer-events: none;
}

.hae {
width: 200px;
height: auto;
position: absolute;
top: 9px;
left: -100px;
z-index: 32;
transform: rotate(6deg);
pointer-events: none;
}

.stars {
width: 200px;
height: auto;
position: absolute;
top: 136px;
left: -120px;
z-index: 29;
transform: rotate(-5deg);
pointer-events: none;
}

.yuno {
width: 80px;
height: auto;
position: absolute;
top: 80px;
left: -80px;
z-index: 31;
transform: rotate(45deg);
pointer-events: none;
}

.ribboned {
width: 132px;
height: auto;
position: absolute;
bottom: 170px;
right: -30px;
animation: sway 2.4s infinite;
animation-timing-function: ease-in-out;
z-index:37;
}
@keyframes sway  {
    0% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

.navigate-pad {
width: 100%;
height: 74.3%;
background: transparent;
line-height: 10px;
font-weight: 300;
position: relative;
z-index: 10;
top: 18px;
outline: 1px brown dashed;
text-align: left;
margin: auto;
border-radius: 6px;
}

.nav{
width: 100%;
height: 17rem;
border-image-source: url(https://manantial.neocities.org/manantial%20media/bordernav.png);
border-image-repeat: round;
border-image-slice: 6;
border-image-width: 5px;
border-style: solid;
font-family:'spirit';
background: #fff;
padding: 7px;
margin-top: 3px;
border-radius: 4px;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
}
    

.navbutton{
width: 100%;
cursor: pointer;
height: 2rem;
padding: 6px 2px 8px 6px;
border: 1px solid #f0b5cd;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
background-color: white;
background-image: linear-gradient(#fff7fa 50%, #FAEBF3 100%);
display: flex;
justify-content: space-between;
align-items: center;
color: #808080;
transition: .3s;
p{
font-size: 10.7px;
color: #808080;
font-family:'pixel';
}
}

.navbutton:hover {
background-image: linear-gradient(#ebf5f590 50%, #d3eded90 100%);
  }

a:hover {
    color: #edaecb;
    text-decoration: dotted underline;
    font-style: italic;
}

.navtop{
width: 100%;
height: 40px;
background: url(https://dl.dropbox.com/scl/fi/l0i4gkqql7ertk8z8ub67/download-9.jpg?rlkey=mp0bzv929ujpp16gj5s614ca3&st=hfpnym1i);
background-position: center; 
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
background-size: 60%;
border: 1px solid #f0b5cd;
padding-top: 6px;
border-radius: 6px 6px 6px 6px;
text-align: center;
font-family:'dots';
font-weight: bold;
margin-top: 3px;
text-shadow: -1px 0 #FDBFD3, 0 1px #FDBFD3, 1px 0 #FDBFD3, 0 -1px #FDBFD3, 0 0;
}

.navtop p {
font-size: 22px;
}

.box2top {
text-align: center;
padding: 7px;
height: auto;
border-bottom: 1px solid #a6a6a6;
background-image: linear-gradient(#fff7fa 50%, #ffdeeb 100%);
font-family:'spirit';
font-size: 13px;
font-weight: 100;
margin-bottom: 6px;
color: #70a4a4;
text-shadow: -1px 0 #FDBFD3, 0 1px #FDBFD3, 1px 0 #FDBFD3, 0 -1px #FDBFD3, 0 0;
}

.navdesc{
text-align: center;
color: #FAEBF3;
font-family: 'dotgothic16'; 
filter: drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 0.5px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(0px 0px 1px #fbfaf8) drop-shadow(1px 1px 0px #0000002d);
text-shadow: -1px 0 #FDBFD3, 0 1px #FDBFD3, 1px 0 #FDBFD3, 0 -1px #FDBFD3, 0 0;
}

.manantial-button {
margin-top: 2px;
border: 3px solid white;
box-shadow: 0px 0px 3px #00000077;
border-radius: 4px;
overflow: hidden !important;
}

.navsite{
width: 100%;
height: 30px;
background: url("https://manantial.neocities.org/manantial%20media/dotbg.png");
text-align: left;
padding: 12px 2px 8px 6px;
color: #FAEBF3;
font-weight: 100;
text-shadow: -1px 0 #FDBFD3, 0 1px #FDBFD3, 1px 0 #FDBFD3, 0 -1px #FDBFD3, 0 0;
align-items: center;
}


.box2 .nav::-webkit-scrollbar{
display: none;
}
 .intro_wrap::-webkit-scrollbar {
  display: none;
}

.cal_calendar {
border: 1px solid #a6a6a6;
padding: 1px;
background: linear-gradient(#fffff1, #FAEBF3);
width: 100%;
margin: 0.6rem auto 0 auto;
height: 191px;
font-size: 11px;
font-family: arial;
color: #808080;
border-radius: 5px;
}

.cal_calendar th {
border:1px solid #a6a6a6c9;
background: linear-gradient(50deg, #FFFFF2, #FAEBF3);
width:36px;
font-size: 0.80em;
border-radius: 3px;
color: #808080;
box-shadow: inset #ffcee8 0 0 4px 1px;
}

.cal_calendar td {
border:1px solid #fa94c785;
background:linear-gradient(#fffff1, #FAEBF3);
text-align:center;
font-family: arial;
font-size: 0.8em;
border-radius: 3px;
box-shadow: inset white 0 3px 3px, inset #ff7cb945 0 0 2px 1px;
}

.cal_today {
color:#70a4a4;
font-weight:bold;
}

.cal_days_bef_aft {
color:#5a779e;
}

@font-face {
font-family: 'spirit'; 
src: url(https://dl.dropbox.com/scl/fi/npu6iooiwovhxljcjoeex/spirit.ttf?rlkey=eubwh1fc2c460q68exstay65d);
}

@font-face {
font-family: 'dreamer'; 
src: url(https://dl.dropbox.com/scl/fi/qvk6uhla5awv27fnspgia/DreamerTM-Regular.ttf?rlkey=qztaq1tp1ogzf30pcdjyxbw5m&st=yh0l83z6);
}

@font-face {
font-family: 'apple'; 
src: url(https://dl.dropbox.com/scl/fi/mslct1cam3stnw7qrsrhz/AppleGaramond-Light.ttf?rlkey=0vpmxzc0db7uygg974hc8n2j8&st=pwm1413f);
}

@font-face {
font-family: 'pixel';
src: url(https://dl.dropbox.com/s/rwu0nhwc3rnbaqm/mspixel.otf);
}

 @font-face {
font-family: 'ruritania';
src: url(https://dl.dropbox.com/scl/fi/y3ignkjyugkcli063iwye/Ruritania.ttf?rlkey=utxqstq5qq6wkdj3ljouyseb2&st=nwkor6wa);
}

@font-face {
font-family: 'pc98'; 
src: url(https://dl.dropbox.com/s/b3ea2lfugu2k3gw/pc98.ttf);
}

@font-face {
font-family: 'dots';
src: url(https://dl.dropbox.com/scl/fi/6ryawgn8czhf2cctvy9hs/dot_digital-7.ttf?rlkey=za4cx4xh2vlmp4g61uvqhlw11&st=hupsrd1m);
}

@font-face {
font-family: 'mondwest';
src: url(https://dl.dropbox.com/scl/fi/3qa192b4x54d6jywp3qrl/PPMondwest-Regular.otf?rlkey=i9s9nsnvh9d010tzrfzxeyuke&st=sstdq5qi);
}

@font-face {
font-family: 'expressive';
src: url(https://dl.dropbox.com/scl/fi/kmqh29gl6dpxlouadi1xk/acsf-expressive-5pt-light.ttf?rlkey=ssyw3bip4d53ihlnf5plijpcj&st=5fsypm3t);

}

#glenplayer02 {
position:relative;
display:flex;
background: #C2C2C2;
padding: .2em .2em .2em .4em;
border: 3px solid;
border-style: inset;
margin: auto;
margin-top: 0.6em;
margin-bottom: 0.5em;
width:auto;
}

 
#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:17px;
cursor:pointer;
font-family: arial;
}
 
.playy, .pausee {
font-family: arial; font-size: 0.95em; color: #b2dfdb; -webkit-text-stroke: 0.5px #000; margin-top: -0.1em; margin-bottom: 0.1em; } /* color of play & pause buttons */
 
.pausee {display:none;}
 
 
.sonata {
margin-left:0.5em;
font-family: 'pixel';
font-size:0.85em;
color:#000; /* color of music note symbol */
}
 
.labeltext {
margin-left:0.55em;
position: relative;
bottom: 0.055em;
font-size:11px;/* color of song title */
}