@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
         
@font-face {                  
font-family: 'jgs7';
src: url(https://humantooth.neocities.org/fonts/jgs7.woff) format('woff');
font-weight: normal;
font-style: normal;
} 
         
@font-face {                  
font-family: 'unixel';
src: url(https://humantooth.neocities.org/fonts/unixel-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

    @font-face{
          font-family:lacy;
          src:url(https://files.catbox.moe/wipybg.ttf) ;
        }
    @font-face{
        font-family:easter-bunnies;
        src:url(https://dl.dropbox.com/s/cgvn4dyoonpqzec/Easter%20Bunnies.ttf);
}
    @font-face {
        font-family: day;
        src: url(https://dl.dropbox.com/s/yob9nensv1rr0zq/HelloDay.otf);
}
    @font-face{
        font-family:hugmei;
        src:url(https://dl.dropbox.com/s/lkx18y1mqiuxt63/Hug%20Me%20Tight%20-%20TTF.ttf);
}
        @font-face{
        font-family:cherl;
        src:url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
}
        @font-face{
        font-family:easter-bunnies;
        src:url(https://dl.dropbox.com/s/cgvn4dyoonpqzec/Easter%20Bunnies.ttf);
}
    @font-face{
        font-family: basiic;
        src: url(https://cinni.net/fonts/basiic.ttf);
    }

      body {
background: url(https://moonflyxspace.neocities.org/background/dreamy_star_cloud.png);
background-repeat: repeat; 
background-size: 200px;
font-family: 'unixel';
color: #4932C9;
font-size:14.5px;
height: 740px;
overflow: auto;
cursor: 
  url(https://file.garden/Z9SdSfoosGBApxC8/mvoidsta.cur), auto;}

a:hover {
cursor: 
  url(https://file.garden/Z9SdSfoosGBApxC8/mvoidsta_hand.cur), pointer;}

textarea:hover {
cursor: 
  url(https://file.garden/Z9SdSfoosGBApxC8/text_mvoid.cur), text;}
     


 .scrollbox {
    width: 100%;
    height: 200px;
    font-size: 1.5rem;
    overflow-x: hidden;
    overflow-y: hidden;
  }

.scrollbox:hover {
  overflow-y:auto;
}

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

  ::-webkit-scrollbar-track {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
    image-rendering: pixelated;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  ::-webkit-scrollbar-track:active {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  ::-webkit-scrollbar-thumb {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    z-index: 1;
  }

  ::-webkit-scrollbar-corner {
    background-color: #cccccc;
  }

  ::-webkit-resizer {
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
    background-position: bottom right;
    background-repeat: no-repeat;
    image-rendering: pixelated;
  }

  ::-webkit-scrollbar-button,
  ::-webkit-scrollbar-button {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-position: center center;
  }

  ::-webkit-scrollbar-button:active,
  ::-webkit-scrollbar-button:active {
    background-position: 2px 2px;
  }

  ::-webkit-scrollbar-button:horizontal:decrement,
  ::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
  }

  ::-webkit-scrollbar-button:horizontal:increment,
  ::-webkit-scrollbar-button:horizontal:increment {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
  }

  ::-webkit-scrollbar-button:vertical:decrement,
  ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
  }

  ::-webkit-scrollbar-button:vertical:increment,
  ::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
  }

  ::-webkit-scrollbar-button:horizontal:increment:start,
  ::-webkit-scrollbar-button:horizontal:increment:start {
    display: none;
  }

  ::-webkit-scrollbar-button:horizontal:decrement:end,
  ::-webkit-scrollbar-button:horizontal:decrement:end {
    display: none;
  }

  ::-webkit-scrollbar-button:vertical:increment:start,
  ::-webkit-scrollbar-button:vertical:increment:start {
    display: none;
  }

  ::-webkit-scrollbar-button:vertical:decrement:end,
  ::-webkit-scrollbar-button:vertical:decrement:end {
    display: none;
  }

  ::-webkit-scrollbar-button:active,
  ::-webkit-scrollbar-button:active {
    border-top: 1px solid #868a8e;
    border-left: 1px solid #868a8e;
    border-bottom: 1px solid #868a8e;
    border-right: 1px solid #868a8e;
    box-shadow: none;
  }

#s-m-t-tooltip {
    /* basic */
    max-width: 200px;
    height: auto;
    z-index: 1000;
    margin: 24px 14px 7px 12px;
    /* style and design */
    padding: 8px;
    font-size: 18px;
    border-radius: 0.5rem;
    background: url(https://moonflyxspace.neocities.org/background/rainbowstr.gif);
    color: seashell;
-webkit-text-stroke: 0.8px rosybrown;
    font-family: Cherry Bomb One;
    border:2px ridge darkcyan;
  }

    ::selection {
  color: white;
  background: mediumpurple;
}
       header {
            width: 100%;
            height: 100px;
            border-radius: 4px;
            border: 3px ridge;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            margin-bottom: 18px;
            box-sizing: border-box;
        }
       .footer {
            width: 99.6%;
            height: 50px;
            border: 8px solid transparent;
            border-image: 8 round;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            margin: 2px;
            box-sizing: border-box;
        }
b {
font-weight: 800;
text-shadow: 2px 2px rgba(80, 20, 255, 0.2);
}
h1 {
font-family: "Cherry Bomb One";
font-size: 36px;
color: lightcyan;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.5px mediumpurple;
            filter: drop-shadow(1px 1px 0 rosybrown);
font-weight: bold;
text-shadow: 0 0px 1px;
}
h2 {
font-family: 'Cherry Bomb One';
font-size: 22px;
color: #85dda7;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.6px darkslateblue;
            filter: drop-shadow(1px 1px 0 rosybrown);
font-weight: bold;
text-shadow: 0 0px 1px;
}
h3 {
font-family: 'Cherry Bomb One';
font-size: 20px;
color: #EDD0EE;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.6px darkslateblue;
            filter: drop-shadow(1px 1px 0 rosybrown);
font-weight: bold;
text-shadow: 0 0px 1px;
}
a {
-webkit-background-clip: text;
-webkit-text-fill-color: mediumaquamarine;
}
a:hover{ 
text-decoration:underline 1px mediumpurple dashed;
}
li {
list-style-image: url("https://moonflyxspace.neocities.org/pixel/animate/dark-moon.gif");
width: 16px;
height:auto;
}
.activeWindow .windowHeader {
border: 2px solid #4932C9;
}
.windowHeader {
font-family: unixel;
color: peachpuff;
text-align: right;
border-bottom: 2px solid white;
padding: 2px;
height: 28px;
margin: 2px;
margin-bottom: 5px;
}
.windowHeader > img {
padding: 2px 2px;
position: relative;
overflow: hidden;
width: 21px;
}
.windowHeader > strong {
float: left;
margin: 1px 0 10px;
padding-left: 3px;
font-size: 17px;
}
#everything {
display: flex;
}
.image-wrap {
  overflow: hidden; /* Ensures content wraps around image */
}

.image-wrap img {
  float: right; /* Float the image to the right */
  margin-right: 10px;
  margin-bottom: 10px; /* Adds some space below the image */
  max-height: 200px;
}

.image-wrap::after {
  content: "";
  display: table;
  clear: both;
}

.image-wrap2 {
  overflow: hidden; /* Ensures content wraps around image */
}

.image-wrap2 img {
  float: left; /* Float the image to the right */
  margin-right: 10px;
  margin-bottom: 10px; /* Adds some space below the image */
  max-height: 200px;
}

.image-wrap2::after {
  content: "";
  display: table;
  clear: both;
}

.button {
font-family: 'Cherry Bomb One';
border: 2px solid;
border-color: white #4932C9 #4932C9 white;
background: linear-gradient(180deg, rgba(225,240,254,1) 20%, rgba(186,133,221,1)  100%);
text-align: justify;
padding: 2px;
margin-bottom: 2px;
}
.button a {
-webkit-background-clip: text;
-webkit-text-fill-color: peachpuff;
-webkit-text-stroke: 1px rosybrown;
text-decoration: none;
}
.button:hover {
filter: drop-shadow(white);
background: linear-gradient(180deg, rgba(89,203,151,1) 20%, rgba(225,240,254,1) 100%);
border-color: #4da67d white white #4da67d;
}
          #star {
              content:url(https://moonflyxspace.neocities.org/pixel/animate/star2.gif);
          }
          
          #moon {
              content:url('https://moonflyxspace.neocities.org/pixel/animate/dark-moon.gif');
          } 
          
          #nightsky {
              content:url(https://moonflyxspace.neocities.org/pixel/animate/wlb7uc.gif);
          }
          
          #navicon {
              content:url('https://moonflyxspace.neocities.org/pixel/animate/k58395.gif');
          }
          
          #butterfly {
              content:url('https://moonflyxspace.neocities.org/pixel/animate/p0vl54.gif')
          }
          
          #new {
              content:url(https://moonflyxspace.neocities.org/new.gif);
          }
.photo-container {
    max-width: 40em;
    height: auto;
    position: relative;
    margin: 0.2em auto;
}

.photo-container a {
    text-decoration: none;
    color: black;
    cursor: default;
    font-weight: normal;
}

.photo-container a span {
    visibility: hidden;
    position: absolute;
    left: 14em;
    top: 10em;
    background: seashell;
    color: darkcyan;
    width: 12em;
    border: 2px ridge #4932C9;
    border-radius: 4px;
    font-size: 0.9em;
    padding: 4px;
    cursor: default;
    line-height: 1.4;
}

.photo-container a:hover span {
    visibility: visible;
}
html { text-size-adjust: 100%; }
/* this is for mobile phones in vertical view */
@media screen and (min-width: 1px) and (orientation: portrait){
#everything { 
transform: rotate(90deg);
position: absolute;
left:595px; top:-60px;
zoom: 160%; 
height: 2280px;
}
.window { 
width: 800px;
}
}
/* this is for mobile phones in horizontal view */
@media screen and (max-width: 1360px){


        /* Style the scroll-bounce container */
    .blinkiedisplay {
      width: 98.4%;
      height: 100%;
      margin: 0 auto; /* Center horizontally */
      align-content: center;
      display: inline-block;
        padding-top: 4px;
        padding-bottom: 0px;
      overflow-x: auto;  
      overflow-y: hidden; /* Hide overflowing content */
      white-space: nowrap; /* Prevent images from wrapping */
    }
    
                .advertisementdisplay {
      width: 98.4%;
      height: 100%;
      margin: 0 auto; /* Center horizontally */
      padding-bottom: 4px;
      align-content: right;
      display: inline-block;
      overflow-x: auto;  
      overflow-y: hidden; /* Hide overflowing content */
      white-space: nowrap; /* Prevent images from wrapping */
    }
                    .advertisementdisplay img {
      min-width: 100px;
      max-height: 40px;
      min-height: 40px;
    }
        
        .buttondisplay {
      width: 100%;
      height: 100%;
      margin: 0 auto; /* Center horizontally */
      align-content: center;
      display: inline-block;
      overflow-x: auto;  
      overflow-y: hidden; /* Hide overflowing content */
      white-space: nowrap; /* Prevent images from wrapping */
    }
     .buttondisplay img {
       width: 88px;
       height: 31px;
  }
            .stampdisplay {
      width: 98.4%;
      height: 100%;
      margin: 0 auto; /* Center horizontally */
      padding-top: 4px;
      padding-bottom: 2px;
      align-content: center;
      display: inline-block;
      overflow-x: auto;  
      overflow-y: hidden; /* Hide overflowing content */
      white-space: nowrap; /* Prevent images from wrapping */
    }

    strong {
        color:mediumaquamarine; 
        font-family:'unixel'; 
        font-size: 12px;
    }
    
    /* animation  */
.pop    {
 -webkit-animation: pop 1s ease-in-out infinite alternate;
 animation: pop 1s ease-in-out infinite alternate;
 -moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
    
}
    
.floating {  
    animation: floating 3s ease-in-out infinite; 
    margin: 5px 0; 
    position: relative; 
    z-index: 1001; 
}

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(16px); }
    100% { transform: translateY(0); }
}