:root {
                --body-bg-image: url(https://buttercreamed.neocities.org/Subpages/starside.jpg);

                /* colors */
                --content: #feb3dc;
            }
            @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;
            }

            body {
                font-family: 'Nunito', sans-serif;
                overflow-y: scroll;
                overflow-x: scroll;
                margin: 0;
                background-color: #baf8df;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 65px;
                max-width: 900px
                color: #4b154f;
                background-image: var(--body-bg-image);
            }

            * {
                box-sizing: border-box;
            }

            /* below this line is CSS for the layout */

            #container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #4b154f;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: #13092D;
                /* navbar color */
                width: 100%;
            }

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

            #navbar li {
                padding-top: 10px;
            }
            /* navigation links*/
            #navbar li a {
                color: #ff98e3;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #64f5db;
                text-decoration: none;
            }
            #flex {
                display: flex;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #feb3dc;
                width: 200px;
                padding: 20px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
            }


            /* this is the color of the main content area,
    between the sidebars! */
}          main {
                background-color:  #f7ff92;
                flex: 1;
                padding: 20px;
                overflow: scroll;
                display: flex;
                order: 2;
            }

}
            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #feb3dc;
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #4b154f;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #4b154f;
            }

            .box {
                background-color: #6ecbba;
                border: 1px solid #4b154f;
                padding: 10px;
            }
            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #fbbb7c ;
            }

            @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;
                    
                    
#myBtn {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}
</style>
                 <script>
// Get the button
<button class="button button3">16px</button>
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
	mybutton.style.display = "block";
  } else {
	mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>