 <style>
            @font-face {
                font-family: Ms Ui Gothic;
            }

            @font-face {
                font-family: Ms Ui Gothic;
                font-weight: bold;
            }

            @font-face {
                font-family: Ms Ui Gothic;
                font-style: italic;
            }

            @font-face {
                font-family: Ms Ui Gothic;
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'Ms Ui Gothic', sans-serif;
                margin: 0;
                background-color: #ebebeb;
                background-size: 180px;
                color: #417794;
                background-image: url(https://file.garden/ZRccwbUQNGkxIJbr/looping.gif);
            }

            * {
                box-sizing: border-box;
            }




            #container {
                max-width: 1200px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #0008ff;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
                width: 100%;
                background-color: #ffffff;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                background-image: var(--header-image);
                background-size: 100%;
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: #13092D;
                /* navbar color */
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar li a {
                color: #5f8590;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            aside {
                background-color: #ffffff;
                width: 800px;
                padding: 20px;
                font-size: smaller;
            }

            #leftSidebar {
                background-color: #ffffff;
                width: 800px;
                padding: 20px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
            }
            /* this is the color of the main content area,
    between the sidebars! */
            main {
                border-radius: 5px;
                background-image: url(https://file.garden/ZRccwbUQNGkxIJbr/site/gridgray.png);
                background-color: rgba(255, 255, 255);
                flex: 2;
                padding: 30px;
                order: 2;
                border: 2px solid #4d7385;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                margin-top: auto; /* Push the footer to the bottom */
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px;
                text-align: center;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #4d7385;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #6195ad;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background:  url(https://file.garden/ZRccwbUQNGkxIJbr/site/cross2.png);
                border: 1px solid #ccc;
                padding: 10px;
            }
    textarea {
      resize: none;
    }
            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }


            /* BELOW THIS POINT IS MEDIA QUERY */

            /* in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }

    .div-a {
      max-width: 170px;
      min-width: 120px;
      border-radius: 17px;
      margin-bottom: 5px;
      padding-top: 7px;
      padding-bottom: 7px;
      box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white,
        0px 0px 2px #aba4a6;
      margin: auto;
      background-image: url("https://foollovers.com/mat/samback/slantstripe12.png");
    }

    .div-b {
      color: #9ed5f0;
      font-size: 20px;
      font-weight: bold;
      font-family: Ms Ui Gothic;
      text-shadow: 2px 1px 1px #4285a6, 1px -2px 0 #4285a6, -1px 1px 0 #4285a6,
        -1px -1px 0 #4285a6, 1px 0px 0 #4285a6, 0px 2px 0 #4285a6,
        -2px 0px 0 #4285a6, 0px -2px 0 #4285a6, 2px 2px 2px rgba(66, 133, 166);
      filter: drop-shadow(1px 1px 1px white);
      text-align: center;
    }



.box04{
background:url(https://foollovers.com/mat/slantstripe/xa03-bg-slantstripe.gif);
border-radius:5px;
box-shadow:0 1px 5px #ccc;
box-sizing:border-box;
padding:15px;
width:100%
}
.box-inner{
background:#fff url('https://foollovers.com/mat/cloth/p01-bg-paper.gif'); 
border:1px solid #ccc;
border-radius:5px;
padding: 10px;
overflow-y:scroll;
}

.jelly.white {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid #a1a1a1;
  border-radius: 5px;
  padding: 8px 16px;
  min-width: 8em;
  background-color: #56c9f0;
  background-image: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
  color: #70777d;
  text-align: center;

  &::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    width: 99%;
    height: 40%;
    background-image: linear-gradient(to bottom, #f4feff, transparent);
    opacity: 1;
  }
}
.jelly.yellow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px groove rgb(65, 119, 148); 
  border-radius: 5px;
  padding: 8px 16px;
  min-width: 8em;
  color: #30607a;
  background-color: #ffb64f;
  background-image: linear-gradient(to bottom, rgba(214,255,253,1) 0%,rgba(107,223,249,1) 28%,rgba(107,223,249,1) 50%,rgba(76,195,255,1) 51%,rgba(150,255,241,1) 100%);
  text-align: center;
  
  &::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    width: 97%;
    height: 40%;
    background-image: linear-gradient(to bottom, #fff, transparent);
    opacity: 1;
  }
}

#dsring {
  margin: 0 auto;
  font-size: 12px;
  padding: 5px; /* creates some space around the widget */
  font-family: 'Nintendo-DS', sans-serif;
}

@font-face {
  font-family:Nintendo-DS;
  src: url("https://ikaroll.neocities.org/assets/fonts/Nintendo-DS.ttf");
}

#dsring table {
  background-color: #ffffff; /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
  border: 1px solid #c3c3c3;
  color: #000000;
  background-repeat: repeat;
  background-image: url("https://file.garden/ZRccwbUQNGkxIJbr/site/nds%20blog%20bg.png");
}

#dsring table tr td {
  padding: 1px; /* creates some space between the links and text inside the widget */
}

#dsring .webring-prev {
  text-align:right;
}

#dsring .webring-info {
   text-align:center;
}

#dsring .webring-next {
  text-align:left;
}

#dsring .webring-links {
  font-size:small;
}

#pokeholder {
  width: 180px;
  height: 300px;
  z-index: 999;
}



.entry {
  width: 430px;
  margin: 5px 0px 0px 10px;
  padding: 0px;
}

.entry_top{
  margin: 0px;
  height: 70px;
  background: url(https://blog-imgs-23.fc2.com/x/i/c/xicenex/e-top2.gif);
  background-repeat:no-repeat;
}


.entry_title {
  font-size: 14px;
  font-weight: bolder;
  text-align: left;
  padding-top: 45px;
  padding-left: 30px;
}


.entry_body {
  margin: 0px;
  background:  url(https://blog-imgs-23.fc2.com/x/i/c/xicenex/e-bg.gif);
  background-repeat : repeat-y;
  }


.entry_text{
  font-size: 12px;
  line-height: 135%;
  padding: 20px 15px;
  text-align :left;
}


.ent_bot {
  margin:0px;
  height: 70px;
  background: url(https://file.garden/ZRccwbUQNGkxIJbr/Untitled3316.png);
}


.entry_state {
  font-size: 10px;
  text-align: right;
  padding:15px;
  color: #fcaf17;
}


caption {
  padding-bottom:5px;
  font-size:10px;
}

.chatcontainer {
    background-image: url('https://file.garden/ZRccwbUQNGkxIJbr/Untitled3398.png'); 
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    width: 100%;
    height: 450px; /* Adjust the height as needed */
    position: relative;
    overflow: hidden;
}

.chatcontainer iframe {
    width: 100%;
    height: 100%;
}
  .txtfield {
    width: 213px;
    text-align: center;
    height: 54px;
    background-image: url('https://file.garden/ZRccwbUQNGkxIJbr/txtfield.png');
    background-repeat: no-repeat;
    background-size: contain;
    padding:10px;
    margin-top: 25px;
    overflow: hidden;
    vertical-align: middle; 
  }
    .txtfield img {
        vertical-align: middle; 
        margin-left: 5px; 
    }
    
    
    /* hey future pocchi, this is the code for the fanlisting marquee.. duh */
.fanlist {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.fanlist-content {
    display: inline-block;
    white-space: nowrap; 
    animation: marquee 20s linear infinite; 
    transition: animation 0.5s ease-in-out;
}

.fanlist:hover .fanlist-content {
    animation-play-state: paused;
    transition: animation 1s ease-in-out;
}

.fanlist-content img {
    margin: 0 5px;
    vertical-align: middle;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } 
}
