:root {
                --header-image: url('/assets/Banner.png');
                --body-bg-image: url('/assets/bg2.png');
                --navbar-bg-image: url('/assets/fire2.png');
                
                --content: #43256E;
}

@font-face {
    font-family: 'W95FA';
    src: url('/scripts/fonts/W95FA.eot');
    src: url('/scripts/fonts/W95FA.eot?#iefix') format('embedded-opentype'),
         url('/scripts/fonts/W95FA.woff2') format('woff2'),
         url('/scripts/fonts/W95FA.woff') format('woff'),
         url('/scripts/fonts/W95FA.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic Punk';
    src: url('/scripts/fonts/Gothic_Punk.eot');
    src: url('/scripts/fonts/Gothic_Punk.eot?#iefix') format('embedded-opentype'),
         url('/scripts/fonts/Gothic_Punk.woff2') format('woff2'),
         url('/scripts/fonts/Gothic_Punk.woff') format('woff'),
         url('/scripts/fonts/Gothic_Punk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothicPixel';
    src: url('/scripts/fonts/gothic_pixel.eot');
    src: url('/scripts/fonts/gothic_pixel.eot?#iefix') format('embedded-opentype'),
         url('/scripts/fonts/gothic_pixel.woff2') format('woff2'),
         url('/scripts/fonts/gothic_pixel.woff') format('woff'),
         url('/scripts/fonts/gothic_pixel.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothicPixels';
    src: url('/scripts/fonts/GothicPixels.eot');
    src: url('/scripts/fonts/GothicPixels.eot?#iefix') format('embedded-opentype'),
         url('/scripts/fonts/GothicPixels.woff2') format('woff2'),
         url('/scripts/fonts/GothicPixels.woff') format('woff'),
         url('/scripts/fonts/GothicPixels.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
                
            }
            
            html {
                cursor: url("/assets/kunai.gif"), auto;  
            }
            
            a:link {
                cursor: url("/assets/duskull.png"), pointer;
            }
            
            
/*HEAD*/
            marquee {
               width: 100%;
               background-color:transparent;
               position:fixed;
                font-family: W95FA;
            }

            body {
                font-family: 'W95FA';
                margin: 0;
                background-color: #08031A;
                color: #fceaff;
                background: var(--body-bg-image) no-repeat center fixed; 
                background-size: cover;
            }

              * {
                box-sizing: border-box;
            }


            #container {
                max-width: 1150px;
                max-height: 1220px;
                margin: 0 auto;
            }

            /* LINKS */
            #container a {
                color: #ED64F5;
                text-decoration: none;
            }

            #header {
                width: 100%;
                background-color: transparent;
                height: 300px;
                background-repeat: no-repeat;
                background-position: center;
                background-image: var(--header-image);
                background-size: 85%;
                top:0px;
            }
             
             
/* NAVIGATION */
            #navbar {
                font-family: Gothic Punk;
                font-size: 50px;
                width: 100%;
                background-image: var(--navbar-bg-image);
                background-repeat: repeat-x;
                background-size: 60%;
                
            }

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

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

            #navbar li a {
                color: #ffe6f1;
                font-weight: 200;
                font-size: 50px;
            }

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

            #flex {
                display: flex;
            }

/* SIDEBARS + MAIN */
    
            aside {
                background-color: transparent;
                width: 200px;
                padding: 20px;
                font-size: 20px;
                font-family: Gothic Pixel;
                position:relative;
            }
            
            #aside li a:hover {
                color: #6a45ff;
                text-decoration: underline;
            }
            
            #leftSidebar {
                width: 200px;
                order: 1;
                position:relative;
            }
            
            main {
                background-color: transparent;
                flex: 1;
                width: 1200px;
                padding: 10px;
                order: 3;
                position:relative;
            }

            #rightSidebar {
                order: 4;
                position:relative;
                margin-left:200px;
            }

            footer {
                background-color: transparent;
                bottom:0px;
                width:100%;
                font-size: 20px;
                font-family: Gothic Pixel;
                text-align:center;
                
            }

            h1,
            h2 {
                color: #08031a;
                font-family: GothicPixels;
                
            }
            
            h3 {
                color: #ED64F5;
                font-family: GothicPixels;
            }
            
            h1 li a:hover {
                color: #4a11d4;
                
            }

            h1 {
                font-size: 25px;
            }

            strong {
                color: #ED64F5;
            }

/*CLASSES*/
            .box {
                background-color: #13092D;
                border: 1px solid #ED64F5;
                padding: 10px;
                line-height: 20px;
                font-family: W95FA;
                
            }
            .box2 {
                background-color: #13092D;
                border: 1px solid #ED64F5;
                padding: 20px;
                line-height: 20px;
                font-size: 25px;
                font-family: Gothic Pixel;
                
            }
            
            #box2 li a:hover {
                color: #6a45ff;
                text-decoration: underline;
                
            }
            
            .box3 {
                background-color: transparent;
                border:none;
                font-family:  W95FA;
            
            }
            .overlay {
                z-index: 9;
                margin:0px;
                background: transparency;
                
            }
            
            .flip {
               -webkit-transform: scaleX(-1);
               -ms-transform: scaleX(-1);
            }
            
            .fill {object-fit: fill;}
            .contain {object-fit: contain;}
            .cover {object-fit: cover;}
            .scale-down {object-fit: scale-down;}
            .none {object-fit: none;}
            
            
            .blur {filter: blur(1px);}
            .brightness {filter: brightness(90%);}
            .contrast {filter: contrast(180%);}
            .grayscale {filter: grayscale(100%);}
            .huerotate {filter: hue-rotate(180deg);}
            .invert {filter: invert(100%);}
            .opacity {filter: opacity(50%);}
            .saturate {filter: saturate(7);}
            .sepia {filter: sepia(100%);}
            .shadow {filter: drop-shadow(8px 8px 10px green);}
            

            /* CSS for extras */

            .topBar {
                width: 100%;
                font-size: smaller;
                background-color: transparent;
            }
            
             .scroll-container {
                background-color: #333;
                overflow: auto;
                white-space: nowrap;
                display: flex;
                
            }

            .scroll-container img {
                padding: 10px;
                
            }
            
             .sticky {
              position: -webkit-sticky; 
              position: sticky;
              top: 0;
              
            }
    
             .bottomicon {
             position: fixed;
             right: 0px;
             bottom: 0px;
             width: 119px;
             height: 136px;
             background-image: url("/assets/graphics/luckycat.png");
	           z-index:700;
	         
            }
            
            .bumpers {
            grid-column: 1/6;
            grid-row: 17/18;
            border: 1px solid #ED64F5;
            background-image: url('/assets/textures/pink.png');
            padding: 5px;
            width: 1150px;
            height: 45px;
            
            }
            
            .paper {
            position: fixed;
            z-index:700;
            
            }
            
            .icon {
            position: absolute;
            height:60px;
            transform: rotate(10deg);
            
            } 
            
              * {
                box-sizing: border-box;
            }


 /*  MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */
    @media only screen and (max-width:500px) {
                #flex {
                    flex-wrap: wrap;
                }
                aside {
                    width: 100%;
                    order: 1;
                    display: flex;
                    flex-direction: column;
                    position:relative;
                    top:0;
                    margin:00;
                }

                #leftSidebar {
                    order: 1;
                    max-width:100%;
                    display: flex;
                    flex-direction: column;
                    position:relative;
                    top:0;
                    margin:0;
                    align-items:flex-start;
                }
                
                      
                main {
                    order: 3;
                    max-width:500px;
                    display: flex;
                    flex-direction: column;
                    position:relative;
                    margin:auto;
                    align-items:flex-start;
                    align-content:flex-start;
                }

                #rightSidebar {
                    order: 4;
                            display: flex;
                            flex-direction: column;
                    position:static;
                    margin-left:0px;
                }
              
                img {
                    display: flex;
                    flex-direction: column;
                } 
                .box {
                    max-width:500px;
                    height:auto;
                    display: flex;
                    flex-direction: column;
                    align-items:center;
                    margin:0;
                }}
                
    @media only screen and (max-width:500px) {
                      .hidden {
                            display: none;
                            background-color:transparent;
                      }
            
                      .rightCol {
                            max-width:500px;
                            height:auto;
                            font-size: 30%;
                            display: flex;
                            flex-direction: column;
                            position:relative;
                            order:2;
            }
                      .leftCol {
                            max-width:500px;
                            height:auto;
                            font-size: 30%;
                            display: flex;
                            flex-direction: column;
                            position:relative;
                            order:4;
             
            }}