:root {
                    --header-image: url(https://i.imgur.com/sT1woaP.jpeg);
                    --body-bg-image: url(https://i.pinimg.com/736x/ae/3e/ba/ae3ebae61b92392d4283cc78ac3e6165.jpg);
                    --text: #ffffff;
                    --pixeltext: #59d3ff;
                    --boldtext: #DD277C;
                    --link: #006eff;
                    --link-hover: #b5e51d;
                    --content: rgba(0, 0, 0, 0.9);
                    --aside: rgba(0, 0, 0, 0.9);
                    --box: black;
                    --border-gradient: linear-gradient(#DD277C, #E48B69, #9EFF33, #02E6B3, #096BFF, #AB20B1)1;
            }
            
            
            
            
            
            

            /* fonts */

           @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/NUNITO/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
            
            @font-face {
                font-family: PixelOperator;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/PIXEL%20OPERATOR/PixelOperator.ttf');
            }
            
            @font-face {
                font-family: PixelOperator;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/PIXEL%20OPERATOR/PixelOperator-Bold.ttf');
                font-weight: bold;
            }
            
            /*DELTARUNE*/
            
            @font-face {
                font-family: DTM-Sans;
                src: url('/projects/fonts/DTM-Sans.ttf');
            }
            
              @font-face {
                font-family: Pixel-Operator;
                src: url('/projects/fonts/PixelOperator.ttf');
            }
            
            /*BATIM*/
            @font-face {
                font-family: CaviarDreams;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/BENDY%20FONTS/CaviarDreams.ttf');
            }
            
              @font-face {
                font-family: DkDownwardFall;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/BENDY%20FONTS/DK%20Downward%20Fall.ttf');
            }
            
            /*EPIC MICKEY CASTAWAYS*/
            @font-face {
                font-family: Highlander;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/DISNEY%20FONTS/HighlanderITCStdBook.OTF');
            }
            
              @font-face {
                font-family: Waltograph;
                src: url('https://file.garden/ZqupM392zz4G2fAX/FONTS/DISNEY%20FONTS/waltographUI.ttf');
            }
            
            
            
            /*general*/
            body {
                overflow-x: hidden;
                font-size: 17px;
                font-family: 'Nunito', sans-serif;
                margin: 0;
                color: var(--text);
                background-image: var(--body-bg-image);
                background-attachment: fixed;
                background-repeat: repeat;
                background-size: auto;
            }

            * {
                box-sizing: border-box;
            }
            
            ::-moz-selection { /* Code for Firefox */
                    color: black;
                    background: lime;
                  }
                  
                ::selection {
                    color: black;
                    background: lime;
                  }

            #container{
              width: 80%;
              margin: 0 auto;
            }
            
            #flex {
                display: flex;
                flex-wrap: wrap;
            }
            
            
            /*text decor*/
            a {
              color: var(--link);
              text-decoration: none;
            }
            
            a:hover{
              color: var(--link-hover);
              text-decoration: underline;
            }
            
            h1,
            h2,
            h3 {
                color: var(--boldtext);
            }

            h1 {
                font-size: 25px;
            }

            strong, .box bold {
                color: var(--boldtext);
            }
            
            
            /*header*/
            
            @keyframes rainbowheader{
                0% {filter: hue-rotate(0deg)}  
                10% {filter: hue-rotate(36deg)}
                20% {filter: hue-rotate(72deg)}
                30% {filter: hue-rotate(180deg)}
                40% {filter: hue-rotate(144deg)}
                50% {filter: hue-rotate(180deg)}
                60% {filter: hue-rotate(216deg)}
                70% {filter: hue-rotate(252deg)}
                80% {filter: hue-rotate(288deg)}
                90% {filter: hue-rotate(384deg)}
                100% {filter: hue-rotate(360deg)}
            }
            
            #header {
                width: 100%;
                background-color: #5e4e8c;
                height: 110px;
                background-image: var(--header-image);
                background-size: 100%;
                animation-name:rainbowheader;
                animation-duration:3s;
                animation-iteration-count:infinite;
            }
            

                
                
            
            /*navbar*/
            #navbar {
                height: 40px;
                background-color: var(--box);
                width: 100%;
            }

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

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

            #navbar li a {
                color: var(--link);
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: vare(--linkhover);
                text-decoration: underline;
            }
            
            /*main*/
            middle {
              flex: 1;
              order: 2;
            }

            main {
                background-color: var(--content);
                padding: 20px;
                margin-bottom: 10px;
                border: 5px solid;
                border-image: var(--border-gradient);
            }
            
            
            /*sidebars*/
            aside {
                background-color: var(--aside);
                width: 250px;
                height: fit-content;
                padding: 20px;
                font-size: smaller;
                border: 5px solid;
                border-image: var(--border-gradient);
            }
            
            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }
            
            textarea{
              border: dashed 2px var(--pixeltext);
              background: var(--box);
              color: var(--pixeltext);
              width: 90%;
              height: 75px;
              resize: none;
              font-family: PixelOperator;
              font-size: 15px;
              scrollbar-width: none;
            }
            
            #discord-img img{
              width: 100%;
              transition-duration: 0.4s;
            }
            
            #discord-img img:hover{
              transform: scale(1.2) rotate(20deg);
              filter: drop-shadow(2px 2px 10px limegreen);
              transition-duration: 0.4s;
            }
            
            marquee img{
              width: 88px;
              height: 31px;
              image-rendering: pixelated;
            }
            
            #button-div{
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
            }
            
            #youtube-iframe{
              width: 100%;
              margin: 10px 0;
            }
            
            #youtube-iframe iframe{
                border: 0;
                width: -webkit-fill-available;
            }
            
            
            /*footer*/
            footer {
                background-color: var(--box);
                width: 100%;
                height: 30px;
                padding: 5px;
                text-align: center;
                font-size: 15px;
                position: relative;
                bottom: -10px;
            }
            
            /*status cafe*/
            #statuscafe{
              width: 100%;
              height: fit-content;
              background-color: var(--box);
              border: 1px solid var(--pixeltext);
              border-radius: 10px;
              padding: 5px 10px;
              margin-bottom: 10px;
            }
            
            #statuscafe iframe{
              width: 100%;
              height: 90px;
            }
            
            /*theme changer*/
            #siteswitcher {
              background-color: var(--box);
              width: 100%;
              margin: 10px auto;
              border: 1px solid var(--link);
              border-radius: 5px;
              color: var(--pixeltext);
              padding: 5px;
            }
            
            
            
            
            
            
            
            
            
            

            /*index*/

            #chat-and-site{
              width: 100%;
              display: flex;
            }
            
            chat-box, guestbook{
              display: flex;
              flex-direction: column;
              width: 50%;
              height: fit-content;
              background-color: var(--content);
              border: 5px solid;
              border-image: var(--border-gradient);
              padding: 10px;
            }

            .box {
                font-family: PixelOperator;
                font-size: 18px;
                color: var(--pixeltext);
                background-color: var(--box);
                border: 1px solid #ED64F5;
                padding: 10px;
            }
            
            iframe#updates{
                height: 300px;
                overflow: scroll;
                border: 1px solid var(--pixeltext);
                width: 100%;
            }
            
            iframe#neighbors{
                height: 50px;
                border: none;
                width: 100%;
            }
            
            chat-box{
              display: flex;
              flex-direction: column;
              margin-right: 10px;
              width: 50%;
              height: fit-content;
              background-color: var(--content);
              padding: 10px;
            }
            
            guestbook{
              display: flex;
              flex-direction: column;
              width: 50%;
              height: fit-content;
              background-color: var(--content);
              padding: 10px;
            }
            
            
            /*about*/
            
            #interest-wrapper{
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
            }
            
            .interest-box{
                font-family: PixelOperator;
                font-size: 18px;
                color: var(--text);
                background-color: var(--box);
                border: 1px solid var(--pixeltext);
                padding: 10px;
                margin: 5px;
                width: 30%;
                height: 250px;
                overflow: scroll;
            }
            
            .img-box{
                font-family: PixelOperator;
                font-size: 18px;
                color: var(--text);
                background-color: var(--box);
                border: 1px solid var(--pixeltext);
                padding: 10px;
                margin: 5px;
                width: 45%;
                height: 350px;
                overflow: scroll;
            }
            
            #plush-box, #can-box{
              width: 100%;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center;
            }
            
            #plush-box img{
              width: 50%;
            }
            
            #can-box img{
              width: 30%;
            }

            .info-wrapper{
              display: flex;
            }
            
            .info{
              border: 4px dashed var(--pixeltext);
              width: fit-content;
              min-width: 25%;
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              padding: 5px;
              margin: 0 10px 10px 0;
            }
            
            .info img{
              width: 100%;
              border-radius: 10px;
            }
            
            /*projects*/
            /*ORIGINAL CHARACTERS*/
            #original-characters{
              border: 4px #b5e51d groove;
              border-radius: 10px;
              padding: 5px 0px;
              background-color: black;
            }
            
            #original-characters p{
              font-family: Nunito;
              font-size: 17px;
            }
            
            #original-characters h2{
              font-family: Nunito;
              font-size: 30px;
              margin: 0px;
              color: #8a2be2;
            }
            
            #original-characters .new-text{
              margin-right: 10px;
            }
            
            /*FANDOM LEFTOVERS*/
            #fandom-leftovers{
              border: 4px #8a2be2 groove;
              border-radius: 10px;
              padding: 5px 0px;
              background-color: black;
            }
            
            #fandom-leftovers p{
              font-family: Nunito;
              font-size: 17px;
            }
            
            #fandom-leftovers h2{
              font-family: Nunito;
              font-size: 30px;
              margin: 0px;
              color: #b5e51d;
            }
            
            #fandom-leftovers .new-text{
              margin-right: 10px;
            }
            
            /*DELTARUNE CHAPTER GARY*/
            #deltarune{
              border: 26px solid transparent;
                border-image: url(https://i.imgur.com/eRh2YpB.gif) 52 stretch;
                border-image-slice: 27.3%;
                padding: 5px 0px;
              background-color: black;
            }
            
            #deltarune p{
              font-family: Pixel-Operator;
              font-size: 22px;
            }
            
            #deltarune a{
              min-width: 30%;
            }
            
            #deltarune h2{
              font-family: DTM-Sans;
              font-size: 30px;
              margin: 0px;
            }
            
            /*BATIM REPAINTED*/
            #batim{
              border: 20px solid transparent;
              border-image: url(https://i.imgur.com/0amhGFf.png) 52 stretch;
              border-image-slice: 10% fill;
              padding: 5px 0px;
            }
            
            #batim p{
              font-family: CaviarDreams;
              font-size: 20px;
              color: black;
            }
            
            #batim h2{
              font-family: DkDownwardFall;
              font-size: 30px;
              color: black;
              margin: 0px;
            }
            #batim a{
              min-width: 30%;
            }
            
            /*EPIC MICKEY CASTAWAYS*/
            #epic-mickey{
              border: 20px solid transparent;
              border-image: url(https://i.imgur.com/5SqhXPQ.png) 52 stretch;
              border-image-slice: 10% fill;
              padding: 5px 0px;
              filter: drop-shadow(2px 2px 6px cyan);
            }
            
            #epic-mickey p{
              font-family: Highlander;
              font-size: 20px;
              color: white;
            }
            
            #epic-mickey h2{
              font-family: Waltograph;
              font-size: 30px;
              color: white;
              margin: 0px;
            }
            #epic-mickey a{
              min-width: 35%;
            }
            
            main img{
              width: 50%;
            }
            
            new-project{
              width: 100%;
              display: flex;
              align-items: center;
              margin: 5px 0px;
            }
            
            new-project img{
              width: 100%;
              transition-duration: 0.4s;
            }
            
            new-project img:hover{
              transform: scale(1.2) rotate(20deg);
              transition-duration: 0.4s;
            }
            
            .new-text{
              display: flex;
              flex-direction: column;
              margin-left: 10px;
            }
            
            tba{
              width: 100%;
              display: flex;
              margin: 10px 0px;
              border: solid 3px #b5e51d;
              border-radius: 10px;
              background-color: black;
              text-align: center;
              justify-content: center;
            }
            
            /*shrines*/
            #shrine-button{
              width: 150px; height: 150px;
              border: 7px double #ED64F5;
              border-radius: 5px;
              background-size: cover;
              background-position: center;
              transition-duration: 0.4s;
              
            }
            
            #shrine-button .overlay{
              width: 100%; height: 100%;
              background-color: rgb(67, 37, 110);
              transition-duration: 0.4s;
              mix-blend-mode: hard-light;
            }
            
            #shrine-button .background{
              width: 100%; height: 100%;
              background-size: cover;
              background-position: center;
            }
            
            #shrine-button:hover{
              transform: scale(1.2);
              transition-duration: 0.4s;
            }
            
            #shrine-button:hover .overlay{
              transform: scale(1.1);
              background-color: rgb(67, 37, 110);
              transition-duration: 0.4s;
              mix-blend-mode: soft-light;
            }
            
            #shrine-flex{
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              gap: 10px;
            }
            
            
            
            /*graphics*/
            
            #buttons, #stamps, #gifs, #sprites{
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              width: 100%;
            }
            
            #buttons img, #stamps img, #gifs img, #sprites img{
              width: unset;
            }
            
            #buttons img{
              margin: 1px;
            }
            
            /*commissions*/
            main ul {
              list-style-image: url('https://file.garden/ZqupM392zz4G2fAX/IMAGES/cd-tiny');
             }
             
             main ol {
                list-style-type: disc;
                list-style-image: none;
             }
            
            /* Slideshow container */
              .slideshow-container {
                max-width: 75%;
                position: relative;
                margin: auto;
              }
              
              /* Hide the images by default */
              .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9{
                display: none;
              }
              
              .SlideImage {
                display: flex;
                position: relative;
                margin: auto;
                width: 100%;
                
              }
              
              /* Next & previous buttons */
              .prev, .next {
                cursor: pointer;
                position: absolute;
                top: 50%;
                width: auto;
                margin-top: -22px;
                padding: 16px;
                font-weight: bold;
                font-size: 35px;
                border-radius: 0 3px 3px 0;
                user-select: none;
                text-shadow: 2px 2px #9559c9
              }
              
              /* Position the "next button" to the right */
              .next {
                right: 0;
                border-radius: 3px 0 0 3px;
              }
              
              
              /* Caption text */
              .text {
                color: #f2f2f2;
                font-size: 15px;
                padding: 8px 12px;
                position: absolute;
                width: 100%;
                text-align: center;
              }
              
              .active, .dot:hover {
                background-color: #717171;
              }
            
            
              .will-box, .wont-box {
              border: dashed 4px var(--boldtext);
              background: var(--box);
              width: 95%;
              height: 300px;
              font-family: PixelOperator;
              font-size: 21px;
              color: white;
              overflow: scroll;
              padding-left: 10px;
              scrollbar-width: none;
            }
            
            .site-box{
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              flex-direction:
              column; width: 50%;
            }
            
            #com-box{
              display: flex;
              margin: 10px;
              width: 100%;
              padding: 20px;
            }
            
            #ref-example {
               display: flex;
               position: relative;
               margin: auto;
               width: 70%;
            }
            
            #deltarune-sprites img{
              width: unset;
            }
            
            /*sitemap*/
            .new{
              font-family: PixelOperator;
              font-size: 15px;
              text-decoration: overline underline;
              color: lime;
            }
            
            #sitemap-list{
              column-count: 3;
              column-rule: 1px solid var(--boldtext);
              list-style-position: inside;
            }
            
            #sitemap-list ul, #sitemap-list ol{
              padding-left: 15px;
            }
            
            /*credits*/
            div#credits-buttons img{
              width: unset;
            }
            
            /*archive*/
          #archive-flex{
              display: flex;
              gap: 10px;
              justify-content: center;
            }
            
            .archive-wrapper{
              width: 200px; height: 150px;
            }
            
            #archive-button{
              width: 100%; height: 100%;
              border: 7px double #ED64F5;
              border-radius: 5px;
              background-size: cover;
              background-position: center;
              transition-duration: 0.4s;
              
            }
            
             #archive-button .overlay{
              width: 100%; height: 100%;
              background-color: rgb(67, 37, 110);
              transition-duration: 0.4s;
              mix-blend-mode: hard-light;
            }
            
            #archive-button .background{
              width: 100%; height: 100%;
              background-size: cover;
              background-position: center;
            }
            
            #archive-button:hover{
              transform: scale(1.2);
              transition-duration: 0.4s;
            }
            
            #archive-button:hover .overlay{
              transform: scale(1.1);
              background-color: rgb(67, 37, 110);
              transition-duration: 0.4s;
              mix-blend-mode: soft-light;
            }
            
            #archive-text{
              text-align: center;
              display: block;
              position: absolute;
              z-index: 2;
              width: inherit;
              margin-top: 60px;
          }








          /*compatibility*/
        @media(max-width:1600px) {
          #maggy .floating-img {
            width: 250px;
            }
          }
          
        @media(max-width:1300px) {
          #container{
            width: 100%;
            }
          }
          
          @media(max-width:1394px) {
                      
          #sitemap-list{
            column-count: 2;
          }
          }
          
          @media(max-width:1000px) {
          
          #header{
            height: 80px;
          }
          
          .interest-box{
                width: 45%;
            }
            
            main{
              margin-bottom: 10px;
            }
            
            sidebar{
              margin-left: 0;
            }
            
            #leftSidebar img{
              width: 100%;
            }
            
            aside{
              width: 200px;
            }
            
            .info-wrapper{
              flex-direction: column;
            }
            
            .info{
              margin: 0 auto;
            }
            
            new-project{
              flex-direction: column-reverse;
            }
            
            #ref-example{
            width: 100%;
          }
          
          #com-box{
            flex-direction: column;
            padding: 0;
            margin: 0;
          }
          
          .site-box{
            width: 100%;
          }
          
          .slideshow-container{
            max-width: unset;
            width: 100%;
          }
          
          }

            
              /*mobile */
        @media(orientation: portrait) {
          
          
          /*main*/
          
          #container{
            width: 100%;
          }
          
          #header{
            height: 50px;
          }
          
           #headerarea{
            width: 100%;
          }
          
          #navbar{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
          }
          
          #navbar ul{
            width: 100%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-around;
            }
            
            #navbar li {
                padding: 5px 10px;
            }
            
            
          #flex{
            display: flex;
            flex-wrap: wrap;
          }
          
          #leftSidebar, #rightSidebar{
            display: none;
          }
          
          main{
            display: flex;
            flex-direction: column;
            width: 100%;
          }
          
          footer {
                font-size: 10px;
            }
          
          /*home*/
          
          #chat-and-site{
            flex-direction: column;
          }
          
          guestbook, chat-box{
            width: 100%;
          }
          
          guestbook{
            margin-top: 10px;
          }
          
          /*about*/
          .info-wrapper{
            flex-direction: column;
          }
          
          .info{
            margin: 0 auto;
          }
          
          .info ul{
            padding: 0 20px 0 30px;
          }
          
          .interest-box{
            width: 45%;
            word-wrap: break-word;         /* IE 5.5+ */
            overflow-wrap: break-word;     /* Modern browsers */
            overflow-x: hidden;
          }
          
          .img-box{
            width: 100%;
          }
          
          /*projects*/
          
          new-project{
            flex-direction: column-reverse;
          }
          
          /*graphics*/
          /*...all is good as far as i can tell??? wow coding so good its easy to read on all devices hehe*/
          
          /*commissions*/
          #ref-example{
            width: 100%;
          }
          
          #com-box{
            flex-direction: column;
            padding: 0;
            margin: 0;
          }
          
          .site-box{
            width: 100%;
          }
          
          .slideshow-container{
            max-width: unset;
            width: 100%;
          }
          
          /*sitemap*/
          #sitemap-list{
            padding-left: 5px;
          }
          
          /*credits*/
          /*same thing no big issues!! :D !!*/

        }