body {
    max-width: 100%;
    overflow-y: hidden;
    
   }
    
        /****** fonts ******/
        @font-face {
            font-family: 'Comic Sans MS', 'Comic Sans', monospace;
          font-family: "Yesterweb Monster";
          src: url("https://cloudflare-ipfs.com/ipfs/QmaKT1nHC9JM5xmz7cRuRcB8jrkRjxdPsLaLnyzEta3e8R/MonsterFriendFore.woff") format("woff"); }
          
        @font-face { 
                font-family: 'W95FA'; src: url('indeximg/homepage/W95FA.otf'); } 
                

@import url('https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');


        /****** scrollbar ******/
        ::-webkit-scrollbar{
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-thumb{
            background: #f6d695;
            border-radius: 0px;
        }

        ::-webkit-scrollbar-track{
            background: #f6d695;
            border-radius: 0px;
        }
        
        /****** select hightlight ******/
        ::selection {
            background: #9988ff;
            color:white;
        }

        ::-moz-selection {
            background: #9988ff;
            color:white;
        }
        
        /****** body ******/
        body {
            background-color:#000000;
            overflow-x: hidden;
            overflow-y:scroll;
            background-image:url(indeximg/homepage/background.png);
            background-repeat: repeat;
            background-position: 0 0;
            background-attachment: fixed;
            color:#1d0e4a; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            font-size:15px; /* default font size */
            padding:0px;
        }

        /****** links ******/
        a{
            text-decoration: none;
            color:#ff4782;
            transition:0s;

        }

        a:hover{
            cursor:pointer;
            transition:0s;
            color:cyan;

        }
        
        /****** wrappers ******/
        #wrapper{
            max-width:1200px; /* width of entire page - can be changed but i don't recommend anything bigger than 1000! got to make sure the page fits on the screen */
            max-height:95%;
            width:fit-content;
            height:fit-content;
            width: -moz-fit-content;
            height: -moz-fit-content;
            animation: fadeEffect 1s;
            margin: auto;
            overflow:none;
        }

        @keyframes fadeEffect {
            from {opacity: 0;}
            to {opacity: 1;}
        }
        
        #mainwrapper{
            margin-top:10px; /* space between containers */
            display:flex;
            gap:15px; /* space between containers */
            justify-content:space-between;
        }
        
        /****** main containers ******/
        #header{
            width:100%; /* automatically resizes header image to the size of the wrapper (in this case 900px) */
             z-index:-10;
            border:5px groove #f4f4f4; /* border around header */
            border-radius: 20px;
        }
        
        #header img{
            max-width:100%;
            max-height:100%;
            display:block;
 
            object-fit:cover;
            box-sizing:border-box;
            opacity: 90%
             z-index:-10;
            
        }
        
        #title{
            color:#f4deac; /* color of title */
            text-shadow: -1px 0 #000000, 0 1px #ffdeac, 1px 0 #000000, 0 -1px #f4f4f4;
            font-size:50px; /* font size of title */
            text-align:center;
            font-family:'Comic Sans MS'; /* font of title */
            width:100%;
            animation: pop 3s ease-in-out infinite alternate;
        }
        
        @keyframes pop{
            from{
                transform:scale(0.95)
            }

            50%{
                transform:scale(1)
            }

            to{
                transform:scale(0.95)
            }
        }
        
        #main{
            width:90%; /* width of main container - should add up to 100 when added to #sidebar width */
            max-height:2200px; /* you can make this taller if you'd like */
            float:left;
            border:4px double #0949dd; /* border of main container */
            border-radius: 10px;
            padding:10px;
            overflow:auto;
            background-color: rgba(100,20,250,.4);color: #fff; /* background color of main container */
            overflow-y: hidden; /* hide vertical */
            overflow-x: hidden; /* hide horizontal */
        }
        
        #sidebar{
            width:30%; /* width of sidebar - should add up to 100 when added to #main width */
            float:left;
            display:flex;
            flex-direction:column;
            gap:20px; /* space between containers */
            position:relative;
        }
        
        #sidebarleft{
            width:30%; /* width of sidebar - should add up to 100 when added to #main width */
            float:left;
            display:flex;
            flex-direction:column;
            gap:20px; /* space between containers */
            position:relative;
        }
        
         #foo {
            position: fixed;
            bottom: -8px;
            left: 8px;
        }
        
        #mini {
            border:2px solid #ef165c; /* border of main container */
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            overflow:none;
            color: #ffc50d;
            background-color: rgba(150,0,150,.5);color: #fff; /* background color of main container */
        }
        
        #minikofi {
            width:305px;
            height:190px;
            border:2px solid #ef165c; /* border of main container */
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            overflow:none;
            color: #ffc50d;
            z-index:1;
            background-color: rgba(150,0,150,.5);color: #fff; /* background color of main container */
        }

        #minikofihi {
            width:650px;
            height:175px;
            border:2px solid #ef165c; /* border of main container */
            border-style: solid;
            border-radius: 20px;
            padding:8px;
            overflow:none;
            color: #ffc50d;
            z-index:1;
            background-color: rgba(150,0,255,.5);color: #fff; /* background color of main container */
        }

       #indexz {
         z-index:3;
       }

       #indexz2 {
         z-index:4;
       }
        #minikofi2 {
          position:relative;
 
            height:60px;
            width:160px;
 
            padding:10px;
            overflow:none;
 
        }
        
    #float {
        animation: Float 26s ease-in-out 0.8s infinite normal forwards;
        
}
        
        #welcome {
            height:160px;
            border:2px solid #00ab68; /* border of main container */
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            overflow:none;
            background-color: rgba(0,197,120,.5);color: #fff; /* background color of main container */
        }
        
        #thirdbox {
            border:2px solid #ef165c; /* border of main container */
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            overflow:none;
            background-color: rgba(150,0,150,.5);color: #fff; /* background color of main container */
        }
        
        #thirdboxinline {
            width: 650px;
            border:2px solid #ef165c; /* border of main container */
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            overflow:none;
            background-color: rgba(150,0,150,.5);color: #fff; /* background color of main container */
            display:inline-block
        }
        
        #thirdboxinline2 {
            width: 175px;
            height: auto;
            border:2px solid #ef165c; /* border of main container */
            border-style: solid;
            border-radius: 20px;
                color: #ffc50d;
                /* default font color */
                font-family: 'W95FA';
            border-radius: 20px;
            background-image: url("https://sadhost.neocities.org/images/tiles/b15.gif");
                color: #ffffff;
            display:inline-block
        }

            .moodcenter {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 0px solid #FFFF00;
            padding: 0px
          }

          #mood {
            height:160px;
             border:2px solid #00ab68; /* border of main container */
            border-style: double;
            border-radius: 10px;
                color: #ffc50d;
                /* default font color */
                font-family: 'W95FA';
            border-radius: 20px;
            background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url("https://files.catbox.moe/gzc4af.gif");
                color: #ffffff;
          }

          .moodresize {
                -moz-transform: scale(1.3);
                -ms-transform: scale(1.3);
                -o-transform: scale(1.3);
                -webkit-transform: scale(1.3);
                 transform: scale(1.3);
}

   .shadow img {
     filter: drop-shadow(3px 5px 1px #000000);
   }

        .parent {
        display: flex;
        justify-content: center;
        justify-content: space-between;
        }
        
        .parent2 {
        display: flex;
        justify-content: center;
        justify-content: space-between;
        }
        
        
         #fourthbox {
            border:2px solid #ef165c; /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            line-height: 40px; /* 4px +12px + 4px */
            width: 840px;
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            height:300px;
            overflow: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display: block;
         }
         
         #fifthbox {
            border:2px solid #ef165c; /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            width: 100px;
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            height:150px;
            overflow-y: scroll;
            overflow-x: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display:inline-block
         }
         
         #fifthbox2 {
            border:2px solid #ef165c; /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            width: 100px;
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            height:110px;
            overflow-y: scroll;
            overflow-x: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display:inline-block
         }
         
         .parent2 {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 12px;
                /* space between containers */
            }
         
         #statuscafe {
    padding: .3em;
    background-color: transparent;
    border: 0px solid midnightblue;
    color:#ecc645;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    color:#ecc645;
    max-width:310px;
    overflow-x: none;
    overflow-y: scroll;
}
         
         #sixthbox {
            border:2px solid #ef165c; /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            width: 400px;
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            max-height:150px;
            overflow-y: scroll;
            overflow-x: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display:inline-block
         }
         
         #seventhbox {
            border:2px solid #ef165c; /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            width: 400px;
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            max-height:150px;
            overflow-y: none;
            overflow-x: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display:inline-block
         }
         
         #pages {
            z-index:10;
            border:2px solid #ef165c; /* border of main container */ /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            width: auto;
            border-style: solid;
            border-radius: 20px;
            padding: 10px;
            margin: -10px 0px 5px 0px;
            max-height:220px;
            overflow-y: scroll;
            overflow-x: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display:inline-block
         }
         
            #status {
            border:2px solid #ef165c; /* border of main container */
            color:#ffc50d; /* default font color */
            font-family:'Comic Sans MS'; /* default font */
            width: 400px;
            height:200px;
            border-style: solid;
            border-radius: 20px;
            padding:10px;
            max-height:200px;
            overflow-y: scroll;
            overflow-x: none;
            background-color: rgba(50,50,250,.5);color: #fff; /* background color of main container */
            display:inline-block
            }
            
            #nowplaying {
            border:2px solid #00ab68; /* border of main container */
            border-style: double;
            border-radius: 10px;
                color: #ffc50d;
                /* default font color */
                font-family: 'W95FA';
                /* default font */
                width: 700px;
                height: auto;
                padding: 10px;
                overflow: none;
                background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url("indeximg/homepage/deltarunegrid.gif");
                color: #ffffff;
                /* background color of main container */
            }
            
            #poll {
              background-color: rgba(255,255,255,.9);
              border-radius:10px; 
            }
            
            #stickers {
              position:relative;
              overflow: visible;
              z-index:10;
            }
            
            #beepbox-webring {display: flex; align-items: center; gap: 8px; font: 1rem/1.1 sans-serif; max-width: 100%}
#beepbox-main {flex: 1; color: #999; text-align: center; padding: 8px 12px; border: 4px solid #222; border-radius: 5px; background-color: black}
#beepbox-main a {color: #98f; font-weight: bold; text-decoration: underline}
#beepbox-iframe, #beepbox-bg {height: 64px; margin-top: 8px}
#beepbox-iframe {display: block; width: 100%; border: none}
#beepbox-bg {background: url(background.png) center}
.beepbox-arrow {padding: 8px; border-radius: 5px; background-color: #444}
.beepbox-arrow:hover {background: #555}
.beepbox-arrow img {display: block; width: 14px; height: 14px}
            
            .ids {
              
              z-index:11;
                display: flex;
                justify-content: center;
                gap: 15px;
                /* space between containers */
            }
            
            #funpagespace {
                margin - top: 15px;
                /* space between containers */
                display: flex;
                gap: 15px;
                /* space between containers */
                justify-content: space-between;
            }
            
            
            #funpage {
 
                /* width of main container - should add up to 100 when added to #sidebar width */
                max-height: 2000px;
                /* you can make this taller if you'd like */

                border-radius: 5px;
                /* border of main container */
 

                color: #ffffff;
                /* background color of main container */
 
                /* hide horizontal */
                display: center;
            }


            #funpage img {
                filter:         url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
                -webkit-filter: grayscale(100%);
                -moz-filter:    grayscale(100%);
                -ms-filter:     grayscale(100%);
                -o-filter:      grayscale(100%);
                filter: grayscale(1);
                transition: .4s ease-in-out;
            }
            
            #funpage img:hover {
                filter: none;
                cursor: pointer;
                transform: scale(1.03);
                
                transition: .4s ease-in-out;
            }
            
            #linkpage {
                /* width of main container - should add up to 100 when added to #sidebar width */
                height:35px;
                width:300px;
                border:solid black 1px;
                border-radius:2px;
                padding:5px;
                margin:10px;
                font-family: 'Victor Mono', monospace;
                font-size:15px;
                cursor: pointer;
                font-weight: bold;
            }
  
            
            
            #animated: {
 
                /* width of main container - should add up to 100 when added to #sidebar width */

                -webkit-filter: grayscale(100%);
                 filter: grayscale(100%);         
               transition: .2s ease-in-out;
                cursor: pointer;

            }

            #animated:hover {
               -webkit-filter: grayscale(0);
                 filter: grayscale(0);
                filter: none;
                cursor: pointer;
                transform: rotate(2deg);
                filter: drop-shadow(0px 0px 2px rgba(255, 231, 179, 0.556));
                
            }


            }

.highlight {
                position:relative;
                width: 240px;
              overflow: none;
              z-index:9;
}

.highlight img:hover {
                position:relative;
              overflow: visible;
              z-index:10;
filter: drop-shadow(0px 0px 5px rgba(255, 231, 179, 0.556));
transition: 0s ease-in-out;
}


.tilt {
                position:relative;
              overflow: visible;
              z-index:10;
}

.tilt img:hover {
                position:relative;
              overflow: visible;
              z-index:10;
filter: drop-shadow(0px 0px 5px rgba(255, 231, 179, 0.556));
transform: rotate(5deg);
transition: 0s ease-in-out;
}


.tilt2 {
                position:relative;
              overflow: none;
              width: 240px;
}

.tilt2 img:hover {
                position:relative;
              overflow: none;
              z-index:10;
filter: drop-shadow(0px 0px 5px rgba(255, 231, 179, 0.556));
transform: rotate(-5deg);
transition: 0s ease-in-out;
}



.taunt {
                position:relative;
                width:64.1px;
              overflow: none;
              z-index:10;
}

.taunt img:hover {
                position:relative;
              overflow: visible;
              z-index:10;
cursor: pointer;
}

          
            #content {
        position: relative;
    }
        #content img {
        position: absolute;
        top: 0px;
        right: 0px; 
    }
         #buttontext {
           border 1px ridge #ef165c;
           font-family:'Comic Sans MS';
           width: 150px;
           border-style: ridge;
           border-radius: 3px;
           max-height:20px;
           overflow: scroll;
           display: flex;
           justify-content: center;
           position: relative;
           background-color: rgba(200,0,150,.5);
           color: #ffc50d;
         }
         
         .button-image {
    animation: updown 3s ease-in-out infinite;
}

@keyframes updown {
  0% {
    transform: translateY(-20%);
  }

  50% {
    transform: translateY(20%);
  }

  100% {
    transform: translateY(-20%);
  }
}
        
        /****** sidebar containers ******/
        .subtitle{
            text-align:center;
            font-family:'Victor Mono'; /* font of subtitle */
            font-weight: bold;
            font-size:35px; /* font size of subtitle */
            margin-top:-25px; /* should be about half of the subtitle font size */
            width:150%;
            position:absolute;
            color:#f4deac; /* color of subtitle */
            text-shadow: -1px 0 #000000, 0 1px #ffdeac, 1px 0 #000000, 0 -1px #f4f4f4;
            opacity: 95%
        }
        
        .links{
            border:4px solid #9988ff;
            border-radius: 20px;
            padding:10px;
            background-color: rgba(150,0,150,.5);color: #fff; 
            text-align: center;
        }
        
        
        .music{
            border:4px solid #9988ff;
            border-radius: 20px;
            padding:10px;
            background-color: rgba(0,30,250,.5);color: #fff; 
            text-align: center;
        }
        

        
          .updates{
            border:4px solid #9988ff;
            border-radius: 20px;
            padding:10px;
            height:auto;
            overflow:auto;
            background-color: rgba(150,0,150,.5);color: #fff;
        }
        
        
          .chatbox{
            border:4px solid #9988ff;
            border-radius: 20px;
            padding:10px;
            height:auto;
            overflow:none;
            background-color: rgba(150,0,150,.5);color: #fff;
        }
        

        
        .box{
            border:4px solid #9988ff;
            border-radius: 20px;
            padding:10px;
            background-color: rgba(0,30,250,.5);color: #fff;
            text-align: center;
        }
        
        .box2{
            border:4px solid #9988ff;
            border-radius: 20px;
            padding:10px;
            background-color: rgba(150,0,150,.5);color: #fff;
            text-align: center;
        }
        
        .banner{
            max-width:100%;
            max-height:100%;
            border-radius:10px; 
            border:4px solid #9988ff; 
        }
        
        #inline {
          display: inline-block;
        }
        
        
          .marquee {
    display:inline-block;
    white-space: nowrap;
    animation: marquee 18s linear infinite;
  }
  .marquee:hover {
    animation-play-state: paused;
  }
  
  
        .rotateImg {
            transition: transform 0.5s ease;
        }

        .rotateImg:hover {
            transform: rotate(1deg);
        }
        
        
.wobble {

-webkit-animation:spin 8.8s ease  infinite;

}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(1deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

 @keyframes Float {
	0%,
	100% {
		transform: translateY(0);
	}

	10%,
	30%,
	50%,
	70% {
		transform: translateY(-6px);
	}

	20%,
	40%,
	60% {
		transform: translateY(4px);
	}	

	80% {
		transform: translateY(4.4px);
	}

	90% {
		transform: translateY(-6.4px);
	}
 }
      
      
#musicplayer{
    background:none; /* background color of player */
    width:100%; /* width of the player - make it 100% if you want it to fill your container */

}

.songtitle, .track-info, .now-playing{
    padding:5px;
}

.controls{
    display:flex; 

}

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.buttons div{
    width:33.3%;
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
}

.now-playing, .track-info{
    background-color:#none; /* background color of top two boxes */
}

.now-playing{
    font-weight:bold;
}

.material-icons{
    color:#9494ac;
}

input[type=range]{
    -webkit-appearance:none; /* removes default appearance of the tracks */
    appearance:none;
    width:100%;
    background-color:inherit;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#9494ac; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:#9494ac; /* color of seeker square */
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#9494ac; /* color of seeking track */

}
      
      
.animated-rainbow {
    background: linear-gradient(to left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    animation: rainbow-move-left-right 5s linear infinite alternate;
    -webkit-background-clip: text;
    background-clip: text;
   -webkit-text-fill-color: transparent;

}
@keyframes rainbow-move-left-right {
    0% {background-position: 0 0    }
    100% {background-position: -500px 0}
}
        
        /****** mobile settings ******/
        @media only screen and (max-width: 600px) {
            #sidebar, #main{
                width:100%; /* makes all container 100% to fit screen */
            }
            
            #mainwrapper{
                flex-wrap:wrap;
            }
            
            .banner{
                max-width:60%; /* reduces image size of banners on mobile so they look nicer */
                margin:auto;
            }
        }