:root {
                --header-image: url('https://files.catbox.moe/c6asz5.png');
                --body-bg-image: url('https://files.catbox.moe/cg9aq0.jpg');
            }
            body {
                font-family: 'Nunito', sans-serif;
                background-size: 2000px;
                color: #f7cfff;
                background-image: var(--body-bg-image);
                
            }
                        * {
                box-sizing: border-box;
            }
            #container {
                max-width: 1300px;
                margin: 0 auto;
                border-image: url("https://files.catbox.moe/dp0sgs.jpg");
                border-width: 20px;
                border-image-slice: 45%;
                border-image-repeat:stretch;
                border-style: solid;
            }
            
            #container a {
                color: #000000;
                font-weight: bold;
            }

            #header {
                width: 100%;
                height: 150px;
                background-image: var(--header-image);
                background-size: 100%;
                
            }

            #little_melody img {
                width: 17%;
                position: fixed;
                bottom: 0%;
                right: 0%;
            }

            #second_melody img {
                width: 17%;
                position: fixed;
                bottom: 0%;
                left: 0%;
            }

            #third_melody img {
                width: 17%;
                position: fixed;
                top: 0%;
                left: 5%;
            }

              #fourth_melody img {
                width: 17%;
                position: fixed;
                top: 20%;
                right: 0%;
            }

            #flex {
              
                display: flex;
            }

            main {
                background-color:#080808;
                flex: 1;
                padding: 20px;
                text-align: justify;
            }

            footer {
                background-color:#1f1e20;
                width: 100%;
                height: auto;
                padding: 10px;
                text-align: center;
                
            }

    #leftSidebar {
                    order: 1;
                }
     aside {
                background-color: #1f1e20;
                width: 200px;
                padding: 20px;
            }

    #flex a {
        font-family: basiic;
        font-size:20px;
        background-image: linear-gradient(180deg,#b9b9b9 ,#ffffff);
        background-clip: text;
        -webkit-text-stroke-width: 0.0px;
        -webkit-text-stroke-color: rgb(255, 147, 147);
        color: transparent;
        text-decoration: none;
        transition: all 500ms;
    }

        #flex a:hover {
        font-family: basiic;
        font-size:20px;
        background-image: linear-gradient(180deg,#ffbaba ,#fff6c6);
        background-clip: text;
        -webkit-text-stroke-width: 0.0px;
        -webkit-text-stroke-color: rgb(147, 255, 237);
        color: transparent;
        text-decoration: none;
        font-size:30px;
        font-size-adjust: 20px;
    }

@media screen and (max-width: 900px) {
  #header {
    background-size: 200%;
  }
}

@font-face {
src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
font-family: hearts;
}
@font-face {
  font-family: starlight;
  src: url(https://dl.dropbox.com/s/cfcp07kvx3qut4s/starlight.ttf);
}

@font-face {
  font-family: basiic;
  src: url(https://cinni.net/fonts/basiic.ttf);
}

@font-face {
  font-family: helloday;
  src: url(https://dl.dropbox.com/s/yob9nensv1rr0zq/HelloDay.otf);
}

@font-face {
  font-family: candyshop;
  src: url(https://dl.dropbox.com/s/1uirqy15c3l5249/Candyshop.otf);
}

    p {
        
        font-family: hearts;
        font-size:25px;
        background-image: linear-gradient(180deg,#ffffff ,#acacac);
        background-clip: text;
        -webkit-text-stroke-width: 0.4px;
        -webkit-text-stroke-color: rgb(211, 0, 0);
        color: transparent;
    }
    
        h1,
        h2,
        h3 {
        font-size: 30px;
        background-image: linear-gradient(180deg, #ffffff,#b9b9b9 ,#ff7c7c);
        background-clip: text;
        -webkit-text-stroke-width: 0.1px;
        -webkit-text-stroke-color: hsl(0, 0%, 0%);
        color: transparent;
        font-family: starlight;
            }

.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(15, 14, 15, 0) 50%, rgba(114, 36, 94, 0.25) 50%), linear-gradient(90deg, rgba(35, 23, 39, 0.06), rgba(40, 29, 48, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.28128;
  }
  35% {
  opacity: 0.33604;
  }
}

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt {
  animation: textShadow 1.6s infinite;
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

button {
    border-style: none;
    padding: 10px;
    background-color:rgb(255, 210, 238);
    border-radius: 20px;
    font-size: 20px;
    font-family: hearts;
    color:rgb(177, 0, 133);
    transition: all 500ms;
    border-width: 2px;
    border-color: rgb(198, 255, 238);
    border-style:solid;
}

.oceantheme {
  --header-image: url('https://files.catbox.moe/ya0tbu.jpg');
  --body-bg-image: url('https://files.catbox.moe/l5t3i0.jpg');
      p {
        
        font-family: helloday;
        font-size:25px;
        background-image: linear-gradient(180deg,#cb48ff ,#d57cff);
        background-clip: text;
        -webkit-text-stroke-width: 0.4px;
        -webkit-text-stroke-color: rgb(119, 28, 223);
        color: transparent;
    }
    
        h1,
        h2,
        h3 {
        font-size: 30px;
        background-image: linear-gradient(180deg, #f9dbff,#d998ff ,#b459ff);
        background-clip: text;
        -webkit-text-stroke-width: 0.1px;
        -webkit-text-stroke-color: hsl(273, 75%, 51%);
        color: transparent;
        font-family: candyshop;
            }
              main {
                background-color:hwb(295 81% 0%);
                flex: 1;
                padding: 20px;
                text-align: justify;
            }

            footer {
                background-color:#f1aeff;
                width: 100%;
                height: auto;
                padding: 10px;
                text-align: center;
                
            }

    #leftSidebar {
                    order: 1;
                }
     aside {
                background-color: #f1aeff;
                width: 200px;
                padding: 20px;
            }

    #flex a {
        font-family: basiic;
        font-size:20px;
        background-image: linear-gradient(180deg,#cb48ff ,#aa0eaa);
        background-clip: text;
        -webkit-text-stroke-width: 0.0px;
        -webkit-text-stroke-color: rgb(123, 196, 230);
        color: transparent;
        text-decoration: none;
        transition: all 500ms;
    }

        #flex a:hover {
        font-family: basiic;
        font-size:20px;
        background-image: linear-gradient(180deg,#af4cdd ,#9024a8);
        background-clip: text;
        -webkit-text-stroke-width: 0.0px;
        -webkit-text-stroke-color: rgb(147, 255, 237);
        color: transparent;
        text-decoration: none;
        font-size:30px;
        font-size-adjust: 20px;
    }
                #container {
                max-width: 1300px;
                margin: 0 auto;
                border-image: url("https://files.catbox.moe/x8d0a3.gif");
                border-width: 20px;
                border-image-slice: 45%;
                border-image-repeat:stretch;
                border-style: solid;
            }
    button {
    border-style: none;
    padding: 10px;
    background-color:rgb(247, 151, 242);
    border-radius: 20px;
    font-size: 20px;
    font-family: hearts;
    color:rgb(177, 0, 177);
    transition: all 500ms;
        border-width: 5px;
    border-color: rgb(253, 198, 255);
    border-style:solid;
}
}