:root {
                --header-image: url('https://graveweather.neocities.org/images/banner.png');
                --body-bg-image: url('');

                /* colors */
                --content: white;
            }

            @font-face {
               
            }

            @font-face {
               
                font-weight: bold;
            }

            @font-face {
              
                font-style: italic;
            }

            @font-face {
              
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'Verdana', sans-serif;
                margin: 0;
                background-image: url(https://graveweather.neocities.org/images/forest.jpg);
                background-size: cover;
                background-color: black;
                color: white;
                cursor: url("cursor.png"), auto;
                
            }

            * {
                box-sizing: border-box;
            }



            /* container */
            #container {
                max-width: 900px;
                margin: 0 auto;
            }

            /* links */
            #container a {
                color: white;
                font-weight: bold;
            }

            #header {
                width: 100%;
                background-color: white;
                height: 150px;
                background-image: var(--header-image);
                background-size: 100%;
                backdrop-filter: blur(3px);
            }

            /* navigation section */
            #navbar {
                height: 50px;
                background-color: white;
                border-top: 5px solid #404040;
                border-left: 5px solid #404040;
                border-bottom: 5px solid #000000;
                border-right: 5px solid #000000;
                background: rgba(0,0,0,0.50);
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                backdrop-filter: blur(3px);
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
                backdrop-filter: blur(3px);
            }

            #navbar li {
                padding-top: 10px;
                backdrop-filter: blur(3px);
            }

            /* navigation links*/
            #navbar li a {
                color: white;
                font-weight: 800;
                text-decoration: none;
                backdrop-filter: blur(3px);
            }

            /* navigation link hover */
            #navbar li a:hover {
                color: white;
                text-decoration: underline;
                background: rgba(0,0,0,0.50);
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                backdrop-filter: blur(3px);
            }

            #flex {
                display: flex;
            }

            /* sidebars */
            aside {
                background-color: white;
                text-align: center;
                width: 200px;
                padding: 10px;
                font-size: smaller;
                border-top: 5px solid #404040;
                border-left: 5px solid #404040;
                border-bottom: 5px solid #000000;
                border-right: 5px solid #000000;
                background: rgba(0,0,0,0.50);
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                backdrop-filter: blur(3px);
            }


            /* main box */
            main {
                border-top: 5px solid #404040;
                text-align: center;
                border-left: 5px solid #404040;
                border-bottom: 5px solid #000000;
                border-right: 5px solid #000000;
                background: rgba(0,0,0,0.50);
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                flex: 1;
                padding: 20px;
                backdrop-filter: blur(3px);
                order: 2;
            }

            /* ordering */

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background: rgba(0,0,0,1);
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                text-align: center;
                backdrop-filter: blur(3px);
            }

            h1,
            h2,
            h3 {
                color: white;
            }
            

            h1 {
                font-size: 25px;
            }

            /* bold text */
            strong {
                color: white;
            }

            /* boxes */
            .box {
                background-color:
                padding: 10px;
            }

            /* top bar */

            #topBar {
                width: 100%;
                height: 40px;
                padding: 10px;
                font-size: smaller;
                background: rgba(0,0,0,.5);
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                border-top: 5px solid #404040;
                border-left: 5px solid #404040;
                border-bottom: 5px solid #000000;
                border-right: 5px solid #000000;
                text-align: center;
                backdrop-filter: blur(3px);
            }


    */

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

                aside {
                    width: 100%;
                }


                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                    border-radius: 30px;
                    
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
            
                .littlegif {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    width: 100%;
                }
                
                .olliespin {
                  display: block;
                  margin-left: auto;
                  margin-right: auto;
                  max-width: 100%;
                  height: auto;
                }
                
          
                .column {
                  float: left;
                  width: 33.33%;
                  padding: 5px;
                }

                .row::after {
                  content: "";
                  clear: both;
                  display: table;
                }  
                
                  
            
        </style>