/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like "how to change link color." */
  
   .saturate {
     filter: saturate(3);
}
 .grayscale {
     filter: grayscale(100%);
}
 .contrast {
     filter: contrast(160%);
}
 .brightness {
     filter: brightness(0.25);
}
 .blur {
     filter: blur(3px);
}
 .invert {
     filter: invert(100%);
}
 .sepia {
     filter: sepia(100%);
}
 .huerotate {
     filter: hue-rotate(180deg);
}
 .rss.opacity {
     filter: opacity(50%);
}
 .lacescr {
    border-width:7px;
    border-style:solid;
    border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
    width:98%;
    height:100px;
    overflow-y:auto;
}

.lol {
  position: relative;
  text-align: center;
  color: black;
     letter-spacing: -0.4px;
     font-family: "ms gothic";
     font-size: 32px;
     margin-bottom: 4px;
     margin-top: 5px;
     text-align: center;
     padding-bottom: 0px;
     font-weight: normal;
}
.loltext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.decor
{
 display:block;
 height:0px;
 width:1480px;
}

::selection {
  color: DarkTurquoise;
  text-shadow: none;
}

::-moz-selection {
  color: DarkTurquoise;
  text-shadow: none;
}

 body {
     background-image: url(https://i.imgur.com/VmAlssF.png);
     background-repeat: no-repeat;
     background-size: cover;
     color: black;
     font-family: "ms ui gothic";
     letter-spacing: -0.2px;
     font-size:14px;
}
 img {
     vertical-align: middle;
     overflow: hidden;
}
 h1 {
     color: black;
     letter-spacing: -0.4px;
     font-family: "ms gothic";
     font-size: 32px;
     margin-bottom: 4px;
     margin-top: 5px;
     text-align: center;
     background-color: #96c4e3;
     background-size: 5px, 5px;
     padding-bottom: 0px;
     font-weight: normal;
}
  #g {
     text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
     font-weight: bold;
     color: black;
     font-size: 30px;
     margin: auto;
     margin-top: -30px;
     text-align: center;
}

 #f {
     text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
     font-weight: bold;
     color: black;
     font-size: 20px;
     margin: auto;
     margin-top: -5px;
     text-align: center;
}
 div {
     display: block;
}

 #announcement-div {
     width: 60%;
     margin-left: 100px;
     margin-top: 40px;
     margin: auto;
     overflow: hidden;
}
 #announcement-div2 {
     width: 40%;
     margin-left: 100px;
     margin-top: 40px;
     margin: auto;
     overflow: hidden;
}
 #musicimg {
     background-attachment: fixed;
     display: block;
     background-image: url("music.png");
     margin-left:30px;
     width: 200px;
     background-repeat: no-repeat;
     position: fixed;
     bottom: -30px;
     height: 200px;
}
 #announcement {
     font-weight: bold;
     margin: auto;
     margin-left: -20px;
     color: white;
     white-space: nowrap;
     overflow: hidden;
     font-size:18px;
     text-align: center;
     animation: scroll-left 14s linear 0s infinite normal;
     animation-play-state: running;
     animation-iteration-count: infinite;
}
 #announcement2 {
     font-weight: bold;
     margin: auto;
     margin-left: -20px;
     color: white;
     white-space: nowrap;
     overflow: hidden;
     font-size:18px;
     text-align: center;
     animation: scroll-left 7s linear 0s infinite normal;
     animation-play-state: running;
     animation-iteration-count: infinite;
}
 @keyframes scroll-left {
     0% {
         transform: translateX(60%);
    }
     100% {
         transform: translateX(-120%);
    }
}
 #header {
     background-color: rgba(102, 222, 255, 0.10);
     background-image:url(https://sadhost.neocities.org/images/tiles/sky.png);
     display: block;
     box-sizing: border-box;
     border-image: #78a6c4;
     border-width: 1px;
     border-style: dashed;
     margin-bottom: 10px;
     margin-left: 10px;
     height: 100%;
     width: 40%;
     padding: 20px;
}
 #padding2 {
     padding: 5px;
     
}
 aside {
     width: 10%;
     padding: 15px;
     margin-left: 15px;
     float: right;
}
 #side {
     float: left;
     width: 25%;
     margin-top: 0px;
     text-align: justify;
     height:70%;
     overflow: hidden;
     background-color: rgba(102, 222, 255, 0.10);
     display: block;
     box-sizing: border-box;
     border-image: #78a6c4;
     border-width: 1px;
     border-style: dashed;
     padding: 30px;
}
 #main {
     left: 700px;
     font-size: 16px;
     overflow-x: hidden;
}
 #padding1 {
     padding: 30px;
     display: flex;
     justify-content: center;
     flex-direction: row;
}

#side2 {
     float: right;
     width: 25%;
     margin-top: 0px;
     text-align: justify;
     height:70%;
     overflow: hidden;
     background-color: rgba(102, 222, 255, 0.10);
     display: block;
     box-sizing: border-box;
     border-image: #78a6c4;
     margin-left: 10px;
     border-width: 1px;
     border-style: dashed;
     padding: 30px;
}
  
 #title {
     width: 60%;
     display: block;
     margin: auto;
     font-family: ms gothic;
     font-size: 60px;
     text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
     font-weight: bold;
     color: black;
     text-align: center;
}

#music {
  position: relative;
  background: url('https://file.garden/ZRYtsnIP2EXOR4Kw/Site%20Files/musicplayer.png') top left no-repeat;
    background-size: auto;
  background-size: auto;
  background-size: 100% 100%;
  overflow: hidden;
  height: 50px;
  max-width: 305px;
  border: 1px solid #000000;
}
#music iframe {
  position: absolute;
  top: 0px;
  height: 47px;
  opacity: 0.00000000000000000000000001;
  z-index: 0;
  left: 0px;
}
#music div {
  position: absolute;
  top: 10px;
  left: 55px;
  width: 51%;
  margin: 0 !important;
}
#music span {
  display: block;
  color: #FFFFFF;
  font-weight: normal;
  text-align: left;
  font-size: 12px;
  width: 240px;
}

    .yotsuba-fuuka{
        background: url(https://files.catbox.moe/x286bh.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        right: 20px;
        bottom: -10px;
        height: 300px;
        width: 280px;
    }