body {
                font-family: 'Nunito', sans-serif;
                margin: 0;
                background-color: #08031A;
                /* actual background  */
                background-size: 65px;
                color: #cfff65;
                background-image: url('https://radiofish.neocities.org/radiofishbanner.png');background-attachment:fixed
            }

            * {
                box-sizing: border-box;
            }
            #container {
                max-width: 1100px;
                margin: 0 auto;
                /* this centers the entire page */
            }
            #container a {
              
                color: #00f5f5;
                font-weight: bold;
            }

            #header {
                width: 100%;
                background-color: #0005f5;
                height: 300px;
                background-image: url('https://radiofish.neocities.org/radiofisgbannerneo.png');
                background-size: 100%;
            }
            #navbar {
                height: 40px;
                background-color: #0005f5;
                /* navbar color */
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                border: 1px solid #ff2f00;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }
            #navbar li {
                padding-top: 10px;
            }

            #navbar li a {
                color: #a1ff00;
                /* 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: #00ffaa;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: transparent;
                width: 300px;
                padding: 10px;
                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: transparent;
                flex: 1;
                padding: 20px;
                order: 2;
                
            }
            #leftSidebar {
                order: 1;
                color: transparent;
            }

            #rightSidebar {
                order: 3;
                color: transparent;
            }

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

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

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #00ffaa;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #00105D;
                border: 1px solid #ff0084;
                padding: 10px;
                color: #FF2F00; /*this does text colour*/
                
            }
            .boxmain {
                background-color: #0000B0;
                border: 1px solid #ff0084;
                padding: 10px;
                color: #FFD200;
                
            }
            .boxmainheader {
                background-color: #004488;
                border: 1px solid #00dd84;
                padding: 5px;
                height: 50px;
                color: #FF2F00;
                
            }
            .boxtitleheader {
                background-color: #005555;
                border: 1px solid #00dd84;
                padding: 3px;
                color: #FF2F00;
                text-align: center;
                
            }


            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
                border: 1px solid #ff2f00;
            }


            /* BELOW THIS POINT IS 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: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }
                


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