:root {
                --header-image: url('https://files.catbox.moe/2c7c1e.png');
                --body-bg-image: url('https://files.catbox.moe/c5xynn.jpg');
            }
            body {
                font-family: 'Nunito', sans-serif;
                background-size: 500px;
                color: #f7cfff;
                background-image: var(--body-bg-image);
                
            }
                        * {
                box-sizing: border-box;
            }
            #container {
                max-width: 1000px;
                margin: 0 auto;
                border-image: url("https://files.catbox.moe/xp5eqm.jpg");
                border-width: 5px;
                border-image-slice: 94;
                border-image-repeat: round;
                border-image-outset:1;
                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;
                top: 630px;
                left: 83%;
            }
            #flex {
                display: flex;
            }

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

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

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

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

        #flex a:hover {
        font-family: basiic;
        font-size:20px;
        background-image: linear-gradient(180deg,#cdffc6 ,#b0ffb0);
        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);
}

    p {
        
        font-family: hearts;
        font-size:25px;
        background-image: linear-gradient(180deg,#ffffff ,#5b8a25);
        background-clip: text;
        -webkit-text-stroke-width: 0.4px;
        -webkit-text-stroke-color: rgb(0, 255, 0);
        color: transparent;
    }
    
        h1,
        h2,
        h3 {
        font-size: 30px;
        background-image: linear-gradient(180deg, #ffffff,#000000 ,#7cffe9);
        background-clip: text;
        -webkit-text-stroke-width: 0.1px;
        -webkit-text-stroke-color: hsl(106, 100%, 50%);
        color: transparent;
        font-family: starlight;
            }