/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FF1111;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FF2222s;
}   


 html{
   cursor: url("https://storeyed.neocities.org/Assets/Cursors/storeyedcursor1.png"), url("https://storeyed.neocities.org/Assets/Cursors/storeyedcursor1.png"), default;

} 

    a{
     cursor: url("https://storeyed.neocities.org/Assets/Cursors/storeyedcursor2.png"), url("https://storeyed.neocities.org/Assets/Cursors/storeyedcursor2.png"), default;
    }



:root {
                --header-image: url('https://evilstoreyed.neocities.org/awesomebanner.png');
                --body-bg-image: url('');
                
                --content: #c84471;
            }
    
      */      
            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
            /* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: 400px 400px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 400px 400px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: 400px 400px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: 400px 400px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: 400px 400px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: 400px 400px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: 400px 400px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 400px 400px;
  }
}

            
            body {
            font-family: 'Nunito', sans-serif;
            margin: 0;
            text-align: center;
            background-color: #291F66;
            color: #000000;
            background-image: var(--body-bg-image);
            background-repeat: repeat;
            background: url("https://sadhost.neocities.org/images/tiles/firesplotch.png") repeat 0 0;
  -webkit-animation: bg-scrolling-reverse 10s infinite;
  -moz-animation: bg-scrolling-reverse 10s infinite;
  -o-animation: bg-scrolling-reverse 10s infinite;
  animation: bg-scrolling-reverse 10s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  image-rendering: pixelated;
            }

            * {
                box-sizing: border-box;
            }
            
            #container {
                max-width: 900px;
                
                margin: 0 auto;
                
            }

            #container a {
                color: #c00505;
                font-weight: bold;
                
            }

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

            #navbar {
                height: 40px;
                background-color: #860736;
                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: #ffffff;
                font-weight: 800;
                text-decoration: none;
            }

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

            #flex {
                display: flex;
            }

            aside {
                background-color: #ab1733;
                width: 200px;
                padding: 20px;
                font-size: smaller;
            }


            main {
                background-color: #c84471;
                flex: 1;
                padding: 20px;
                order: 2;
            }


            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

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

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

            h1 {
                font-size: 25px;
            }

            strong {
                color: #aa0e0e;
            }

            .box1 {
                overflow: scroll;
                overflow-x: hidden;
                overflow-y: auto;
                width:160px;
                height:186.5px;
                background-color: #ff6666;
                border: 3px solid #700014;
                padding: 10px;
            }
            
            .box2 {
                overflow: scroll;
                overflow-x: hidden;
                overflow-y: auto;
                width:160px;
                height:186.5px;
                background-color: #ff6666;
                border: 3px solid #700014;
                padding: 10px;
            }
            
            #scrollcontainer{
            padding: 5px;
            }

            #scrolly{
            overflow: auto;
            overflow-x: hidden;
            width: 650px;
            height:160px;
            background-color: #ff6666;
            border: 3px solid #700014;
            margin: 0 auto;
            }
            
            #scrolly2{
            overflow: auto;
            overflow-x: hidden;
            width: 245px;
            height: 400px;
            background-color: #ff6666;
            border: 3px solid #700014;
            margin: 0 auto;
            }

           #scrollyheader{
           margin: 0px;
           border-bottom: 1px dotted #ff668a;
           }

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


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

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

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