@font-face {
font-family: 'false';
src: url("https://dl.dropbox.com/scl/fi/o6kgv328n3bdvarfi2hna/False_Advertising.ttf?rlkey=yxp2928xsuvsf4tgqnl915gf7&st=0ds6qy8l");
}

@font-face {
font-family: 'dalbine';
src: url("https://dl.dropbox.com/scl/fi/7rngp7u0dch2pj80dc534/dalbinediscoregulardemo-6ra9a_fontlot5db0.otf?rlkey=7z50f1zhf8u0f2bz17t68wa7s&st=3qjb5njz");
}


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

@font-face {
font-family: 'uncle';
src: url(https://dl.dropbox.com/scl/fi/19p1b5dn0l058n2hlpewt/UNCLETYP.TTF?rlkey=5vc1kt43fsmktqr4ude7o3f0k&st=mosju5rl);
}

@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: 'pixel';
src: url(https://dl.dropbox.com/s/rwu0nhwc3rnbaqm/mspixel.otf);
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: url(https://64.media.tumblr.com/a4c93ef0f459aaad4f481befd9cf3cd5/tumblr_inline_mlhgopE1WD1qfamg6.gif), auto;


}

:root{
--border: #a17989;
}

body{
background-image: linear-gradient(transparent 55%, #fffff1cb 100%);
background-attachment: fixed;
background-size: 5px;
font-size: 11px;
}

.wrap{
width: 605px;
height: 43em;
margin: 10rem auto;
margin-bottom: 0px;
background: #f3f3f390;
border: dotted 0.7px #acacac;
border-radius: 10px;
display: flex;
position: relative;
}


.container-wrap {
display: grid;
gap: 6px;
}

.header {
width: -webkit-fill-available;
height: 30px;
box-shadow: -5px -5px 4px inset #00000033, 3px 3px 3px inset #ffffff55;
border: 1px dotted #acacac;
background: linear-gradient(to bottom, #fcfafb 0%,#f9e9f2 50%,#f8e0ed 51%,#fdf5f9 100%);
border-radius: 5px 5px 0px 0px;
padding: 5px;
font-size: 11px;
align-items: center;
    }
    
.navbox {
width: -webkit-fill-available;
height: 1.6rem;
display: flex;

}

.manantial-button {
margin-bottom: 2px;
margin-left: 2px;
overflow: hidden !important;
}


.grid {
width: -webkit-fill-available;
padding: 10px 6px 6px 6px;
height: 100%;
}

.navbutton, .navbutton2, .navbutton3, .navbutton4, .navbutton5, .navbutton6{
width: 100%;
cursor: pointer;
height: 1.6rem;
padding: 6px 2px 8px 6px;
border: 1px dotted #acacac;
border-top: none;
border-left: none;
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
display: flex;
justify-content: space-between;
align-items: center;
color: #808080;
transition: .3s;
text-decoration: none;
p{
font-size: 9px;
color: #808080;
font-family:'pixel';
}
}



.navbutton:hover {
background-image: linear-gradient(#ffffff90 50%, #fff 100%), url(https://manantial.neocities.org/manantial%20media/alchy.jpg);
background-size: cover;
background-position: center;
}

.navbutton2:hover {
background-image: linear-gradient(#ffffff90 50%, #fff 100%), url(https://manantial.neocities.org/manantial%20media/horses.jpg);
background-size: cover;
background-position: center;
  }
  
  .navbutton3:hover {
background-image: linear-gradient(#ffffff90 50%, #fff 100%), url(https://manantial.neocities.org/manantial%20media/jeremy.jpg);
background-size: cover;
background-position: center;
  }
  
  
  .navbutton4:hover {
background-image: linear-gradient(#ffffff90 50%, #fff 100%), url(https://manantial.neocities.org/manantial%20media/ring.jpg);
background-size: cover;
background-position: center;
  }
  
  .navbutton5:hover {
background-image: linear-gradient(#ffffff90 50%, #fff 100%), url(https://manantial.neocities.org/manantial%20media/bed.jpg);
background-size: cover;
background-position: center;
  }
  
 .navbutton6:hover {
background-image: linear-gradient(#ffffff90 50%, #fff 100%), url(https://manantial.neocities.org/manantial%20media/moles.jpg);
background-size: cover;
background-position: center;
  }
  
a:hover {
    color: #817a91;
    text-decoration: dotted underline;
    font-style: italic;
}

.dot-art {
position: absolute;
top: 1rem;
left: -20rem;
z-index: -1;
overflow: hidden;
height: auto;
pointer-events: none;
filter: brightness(0) saturate(100%);
color: white;
background: transparent;
}

.dot-art pre { white-space: pre; display: block; color: white; }

#thoughts {
background-image: url(https://manantial.neocities.org/manantial%20media/bubble.png);
width: 100px;
height: 100px;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
top: 19.6rem;
right: -66px;
filter: drop-shadow(2px 2px #a3736790);
align-content: center;
justify-content: center;
z-index: 1000;
}

#thoughts p {
margin-left: 7px;
color: white;
text-align: center;
text-shadow: 1px 0px #808080, 0px 1px #808080, -1px 0px #808080, 0px -1px #808080;
margin-top: -7px;
font-family: 'pixel';
}

.main {
width: 100%;
height: 27rem;
display: flex;
gap: 0.7rem;
}

.left {
background: transparent;
height: fill;
width: 24rem;
}

#manantial {
height: 220px;
content: center;
position: absolute;
top: -70px;
left: 30px;
z-index: 1000;
}


.leftone {
width: 11.25rem;
height: 129px;
margin-top: 9.1rem;
border: dotted 1px #acacac;
background: #fff;
border-radius: 4px;
}

.music-row {
font-size: 7px;
height: 37px;
padding: 4px 8px 6px 6px;
border-bottom: 1px dotted #a6a6a6;
}


.music-row .track-art {
float: right;
max-width: 15.8%;
margin-bottom: 2px;
margin-right: -1px;

border: 1px solid #a6a6a6;
}

.music-row .media-rating {
float: left;
max-width: 35px;
margin-top: 2px;
}

.music-row .track-title {
color:#edd6df;
margin-top: 6px;
font-family: 'pixel';
font-weight: bold;
}

.music-row .track-artist {
font-size: 9px;
font-family: 'pixel';
color: #a5a5a5;
font-style: italic;
}



.middle-wrap {
width: 25rem;
height: fill;
}

.david {
width: 25rem;
height: 11.3rem;
border: dotted 1px #acacac;
border-top: none;
background-image: url(https://manantial.neocities.org/rping2.png);
background-size: cover;
background-position: center;
opacity: 80%;
filter: saturate(80%);
padding: 4px;
box-shadow: inset #f2f2f8 0 0 6px;
transition: .3s;
cursor: default;
}



h2 {
margin-top: 3.65rem;
color: #edd6df;
font-size: 6px;
position: absolute;
top: -7.2rem;
left: 8.4rem;
z-index: 100000;
-webkit-text-stroke-width: 0.3px;
-webkit-text-stroke-color: #292929;
animation: glow 2.5s infinite;
}
 
@keyframes glow { 0% { text-shadow: 0px 0px 15px #f9e9f2; } 50% { text-shadow: 0px 0px 5px #f9e9f2; } 100% { text-shadow: 0px 0px 15px #f9e9f2; }
}

h2 pre { white-space: pre; display: block; }




.boxtwo {
width: 25rem;
height: 13.6rem;
background-image: linear-gradient(#fff7fa 10%, transparent 100% ), url(https://foollovers.com/mat/dot/u19-bg-polkadot.gif);
background-size: 4%;
background-position: center;
border: dotted 1px #acacac;
border-top: none;
padding: 8px 6px;
border-radius: 0 0 4px 4px; 
}

.boxtwo p {
font-family: "pixel";
font-size: 10px;
text-align: justify;
color: #a5a5a5;
}

.boxtwo-wrap {
display: flex;
gap: 0.5rem;
}

#horizontal-line {
width: 100%;
height: 8px;
border-top: 1px dotted #acacac;
line-height: 100%;
}
        
.about-cont {
width: 13.4rem;
height: 12.56rem;
background: #fff;
border: dotted 1px #acacac;
border-radius: 4px; 
overflow-y: scroll;
}

.about-top {
text-align: left;
height: 26px;
padding: 6px;
padding-bottom: 10px;
border-bottom: 1px dotted #a6a6a6;
background-image: linear-gradient(#fff7fa 50%, #ffdeeb 100%);
font-family: arial;
font-size: 9.5px;
color: #fff;
text-shadow: -0.8px 0 #fff, 0 0.8px #fff, 0.8px 0 #fff, 0 -0.8px #fff, 0 0;
}

.upto-cont {
width: 11em;
height: auto;

}

.about-cont::-webkit-scrollbar{
display: none;
}

#inner {
float: right;
width: 57px;
margin-right: 1px;
margin-top: 2px;
}


#news {
font-family: 'pixel';
font-size: 10px;
color: #acacac;
text-align: justify;
padding: 6px;
}


.upto1 {
width: 15em;
height: 9.1em;
background: #fff;
border: dotted 1px #acacac;
padding: 6px 5px;
border-radius: 4px; 
}

.cal_calendar {
border: 1px dotted #acacac;
padding: 1px;
background: linear-gradient(#ffffff, #FAEBF3);
width: 180px;
margin-top: 0.6rem;
height: 170px;
font-size: 11px;
font-family: arial;
color: #808080;
border-radius: 5px;
}

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

.cal_calendar td {
border:1px solid #edd6df85;
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:#292929;
font-weight:bold;
}

.cal_days_bef_aft {
color:#5a779e;
}


.upto2 {
margin-top:0.6em;
width: 18.28em;
height: 10.5em;
background: #fff;
border: dotted 1px #acacac;
padding: 8px;
color: #a5a5a5;
font-size: 9px;
font-family: 'pixel';
border-radius: 4px; 
text-align: justify;
overflow: scroll;
}


.upto2::-webkit-scrollbar{
display: none;
}

music {}

music, .img2 {
/* album's cover image u can change the size! */
position: relative;
width: 71px;
height: 71px;
border: 3px solid white;
box-shadow: 0px 0px 3px #00000077;
border-radius: 4px;
color: black;
cursor: help;
z-index: 999;
}

.img1 {
/* cd image u can change the size too */
position: relative;
width:auto;
height:68.9px;
right: 45px;
z-index: 800;
-webkit-animation: spin 2s linear infinite;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}

.img1 hover {
cursor: help;
}

@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
  }

  @-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

.img1:hover {
/* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}