:root {
                --header-image: url('https://prettyloveless.neocities.org/images/Bitmap3.png');
                --body-bg-image: url('https://prettyloveless.neocities.org/images/websitebg-Dither_Boy.png');

                /* colors */
                --content: #43256E;
            }

            @font-face {
                font-family: "Jacquarda Bastarda 9", serif;
                font-weight: 400;
                font-style: normal;
            }

            .courier-prime-regular {
              font-family: "Courier Prime", monospace;
              font-weight: 400;
              font-style: normal;
            }
            
            .courier-prime-bold {
              font-family: "Courier Prime", monospace;
              font-weight: 700;
              font-style: normal;
            }
            
            .courier-prime-regular-italic {
              font-family: "Courier Prime", monospace;
              font-weight: 400;
              font-style: italic;
            }
            
            .courier-prime-bold-italic {
              font-family: "Courier Prime", monospace;
              font-weight: 700;
              font-style: italic;
            }

            body {
                font-family: 'Jacquarda Bastarda 9', serif;
                margin: 0;
                background-color: #f0f6f0;
                background-size: 1980px;
                color: #222323 ;
                background-image: var(--body-bg-image);
                background-repeat: repeat-x;
            }
            

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 1200px;
                margin: 0 auto;
            }

            #container a {
                color: #606c38;
                font-weight: bold;
                text-decoration:none;
            }

            /*#header {
                max-width: 1900px;
                margin: 10px auto;
                width: 100%;
                background-color: #f0f6f0;
                background-image: var(--header-image);
                background-size: 10%;
                border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABSElEQVR4Xu3WsQrCQBAGYdNa5f2fMpWtdoK/kGXZ0ZAwXyfLcbnJCVm2x/a8CbMYlGVQmEFhX0HX+7q8f6iU/Qw6ZFCYQWHtoDmv5Pqus+2Xz2vQ4YXJ9QY16Ke8MV2HB50e4GwyeJ4/5+2/fM6vrjp/zg1ayGAGHTIozKAwg8IMCsODal/2M+iQQWEGhRkUZlCYQWEGhRkUZlCYQWEGhRkUZlCYQWEGhbWDVvOrq86fc4MWMphBhwwKMyjMoDCDwgwKMyjMoDCDwgwKw4NqX/Yz6JBBYQaFGRRmUJhBYQaFGRRmUJhBYQaFGRRmUJhBYQaFtYNW86urzp9zgxYymEGHDAozKMygMIPCDAr7edBKflZ05QEqR++Xz9v+Dq3k+q6z7ZfPa9Dhhcn1Bv13UO3LF1LeUO3LfgYdMiisDKoZg8IMCjMo7AVTc7JmK6uWwgAAABBkZUJHRjgxRERGMDc4MTU3Q0VDNPk6DYkAAAAASUVORK5CYII=") 28 /  14px / 0 round;
                border-width:  0px;
                border-style:  solid;

                
            }*/

            #navbar {
              border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABR0lEQVR4Xu3WQQrCQBAFUXMVc/8jxavoTvALaZouDQn1dtIMk6mMkOW+rs+bMItBWQaFGRT2FfSxbcv7h0rZz6BDBoUZFNYOmvNKru862375vAYdXphcb1CDfsob03V40OkBziaD5/lz3v7L5/zqqvPn3KCFDGbQIYPCDAozKMygMDyo9mU/gw4ZFGZQmEFhBoUZFGZQmEFhBoUZFGZQmEFhBoUZFGZQWDtoNb+66vw5N2ghgxl0yKAwg8IMCjMozKAwg8IMCjMozKAwPKj2ZT+DDhkUZlCYQWEGhRkUZlCYQWEGhRkUZlCYQWEGhRkUZlBYO2g1v7rq/Dk3aCGDGXTIoDCDwgwKMyjMoLCfB63kZ0VXHqBy9H75vO3v0Equ7zrbfvm8Bh1emFxv0H8H1b58IeUN1b7sZ9Ahg8LKoJoxKMygMIPCXrSn5j+V52GYAAAAEGRlQkc1NUNBRjM5MDcxQUE3QkRCNrqxLAAAAABJRU5ErkJggg==") 28 /  14px / 0 round;
              border-width:  0px;
              border-style:  solid;
                height: 40px;
                background-color: #f0f6f0;
                width: 100%;
                border-radius: 5px;
                margin-top: 25px;
                
            }

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

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

            /* navigation links*/
            #navbar li a {
                color: #222323;
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }

            #flex {
                display: flex;
                gap: 25px;
            }
            
            #sidebarStack {
              display: flex;
              flex-direction: column;
              gap: 15px;
              width: 200px;
              order: 2;
            }
            
            #rightSidebar,
            #musicInfo {
                width: 100%;
            }

           
            aside {
              border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABR0lEQVR4Xu3WQQrCQBAFUXMVc/8jxavoTvALaZouDQn1dtIMk6mMkOW+rs+bMItBWQaFGRT2FfSxbcv7h0rZz6BDBoUZFNYOmvNKru862375vAYdXphcb1CDfsob03V40OkBziaD5/lz3v7L5/zqqvPn3KCFDGbQIYPCDAozKMygMDyo9mU/gw4ZFGZQmEFhBoUZFGZQmEFhBoUZFGZQmEFhBoUZFGZQWDtoNb+66vw5N2ghgxl0yKAwg8IMCjMozKAwg8IMCjMozKAwPKj2ZT+DDhkUZlCYQWEGhRkUZlCYQWEGhRkUZlCYQWEGhRkUZlBYO2g1v7rq/Dk3aCGDGXTIoDCDwgwKMyjMoLCfB63kZ0VXHqBy9H75vO3v0Equ7zrbfvm8Bh1emFxv0H8H1b58IeUN1b7sZ9Ahg8LKoJoxKMygMIPCXrSn5j+V52GYAAAAEGRlQkc1NUNBRjM5MDcxQUE3QkRCNrqxLAAAAABJRU5ErkJggg==") 28 /  14px / 0 round;
              border-width:  10px;
              border-style:  solid;
                background-color: #f0f6f0;
                width: 300px;
                padding: 10px;
                font-size: smaller;
                border-radius: 0px;
            }

            main {
              border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABR0lEQVR4Xu3WQQrCQBAFUXMVc/8jxavoTvALaZouDQn1dtIMk6mMkOW+rs+bMItBWQaFGRT2FfSxbcv7h0rZz6BDBoUZFNYOmvNKru862375vAYdXphcb1CDfsob03V40OkBziaD5/lz3v7L5/zqqvPn3KCFDGbQIYPCDAozKMygMDyo9mU/gw4ZFGZQmEFhBoUZFGZQmEFhBoUZFGZQmEFhBoUZFGZQWDtoNb+66vw5N2ghgxl0yKAwg8IMCjMozKAwg8IMCjMozKAwPKj2ZT+DDhkUZlCYQWEGhRkUZlCYQWEGhRkUZlCYQWEGhRkUZlBYO2g1v7rq/Dk3aCGDGXTIoDCDwgwKMyjMoLCfB63kZ0VXHqBy9H75vO3v0Equ7zrbfvm8Bh1emFxv0H8H1b58IeUN1b7sZ9Ahg8LKoJoxKMygMIPCXrSn5j+V52GYAAAAEGRlQkc1NUNBRjM5MDcxQUE3QkRCNrqxLAAAAABJRU5ErkJggg==") 28 /  14px / 0 round;
              border-width:  14px;
              border-style:  solid;
                border-radius: 0px;
                background-color: #f0f6f0 ;
                flex: 1;
                padding: 25px;
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }
            
            #musicInfo {
              text-align: center;
              order: 2;
              height: 200px;
            }
            
            #musicInfo iframe {
              width: 150px;
              height: 20px;
              border: none;
              overflow: hidden;
              padding: 0;
              display: block;
              margin: 0 auto;
            }
            
            #albumCover iframe{
              width:100px;
              padding: 0;
              height: 70px;
            }

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

            h1,
            h2,
            h3 {
                color: #222323 ;
            }

            h1 {
                font-size: 25px;
            }
            
            p{
              font-family: "Courier Prime", monospace;
            }
            

            strong {
                color: #222323;
            }
            
            .broider {
              border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABR0lEQVR4Xu3WQQrCQBAFUXMVc/8jxavoTvALaZouDQn1dtIMk6mMkOW+rs+bMItBWQaFGRT2FfSxbcv7h0rZz6BDBoUZFNYOmvNKru862375vAYdXphcb1CDfsob03V40OkBziaD5/lz3v7L5/zqqvPn3KCFDGbQIYPCDAozKMygMDyo9mU/gw4ZFGZQmEFhBoUZFGZQmEFhBoUZFGZQmEFhBoUZFGZQWDtoNb+66vw5N2ghgxl0yKAwg8IMCjMozKAwg8IMCjMozKAwPKj2ZT+DDhkUZlCYQWEGhRkUZlCYQWEGhRkUZlCYQWEGhRkUZlBYO2g1v7rq/Dk3aCGDGXTIoDCDwgwKMyjMoLCfB63kZ0VXHqBy9H75vO3v0Equ7zrbfvm8Bh1emFxv0H8H1b58IeUN1b7sZ9Ahg8LKoJoxKMygMIPCXrSn5j+V52GYAAAAEGRlQkc1NUNBRjM5MDcxQUE3QkRCNrqxLAAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
              border-width:  28px;
              border-style:  solid;
              }
              
            .box {
                border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA/ElEQVRYR+2SQQrDMAwEm680/39S+pUGSuXDGLE5ZE1kPLfFSnYsvL2KsBXxvC763vdvCwP5HMfPcR7R2GTcbBTsleX8YBTsleWj32aIzSfKG7lhH3MqwUE37GNOJWLQTSbGXFeUN3HBHpU7GQ64YI/KTSYOiEuYIirXEaW5ynfB/6q8RBXcmMrzbNQFN6ay3KgL9qjcZOIgWKJ/uDGV20YDDrhgj8qdDAdcsEflToYDLtijcifDARfsUbnJxAFxCVNE5TqiNFf5LvhflZeoghuLTB67UXJZ1AV7mEkd0TDmG8ludhfsC7LeeqJBdlMX2QZJN1RG9Kl0G30qJ1EzMEm/FyfrAAAAEGRlQkcxOUFENzU2REU5RkUwRThEl08efAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
                border-width:  14px;
                border-style:  solid;
                padding: 10px;
                border-radius: 5px;
                font-family: "Courier Prime", monospace;
            }


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

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

                aside {
                    width: 100%;
                }

               
                main {
                    order: 1;
                }

                #sidebarStack {
                    order: 2;
                }
                
            
                
                #miniplay {
                  order: 4;
                }

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