:root {
  --header-image: url('assets/images/gifs/stars.gif');
  --body-bg-image: url('assets/images/backgrounds/nebula.png');
  --container-bg: url('assets/images/gifs/bigger_stars.gif'); /* This is the background for the containers. */
  --peri: #7D81DD; /*Just a nice periwinkle.*/
  --lightperi: #AAA4FF; /*Same periwinkle as Clara's starscheme base.*/
  --darkperi: #3D42A7; /*A periwinkle grabbed from a mosiac of Charlie's reference.*/
  --gold: #FFB05B; /*The base color of Charlie's gold*/
  --lightgold: #FDFF93; /*the light color of Charlie's gold.*/
  --blue1: #000038; /*Base starscheme.*/
  --blue2: #08082E; /*Light starscheme*/
  --blue3: #C6EAEA; /*Brightest starscheme.*/
  --softpink: #FAA8CA; /*Just a nice pink.*/
  --pink: #F85A6C; /*A more reddish, deeper blush-pink*/
  --black: #000010; /*Just the color black... or is it?*/
  --slate: #6D6D95; /*a nice slate color.*/
  --softblue: #28288B; /*a dark blue that may be easier on the eyes.*/
  --notwhite: #E3D3D7; /*A pinkish off-white.*/
  --latte: #FFF8E7; /* "Cosmic Latte," the average color of galaxies in the universe. */
  --awful: #FF00DD; /*A good, horrible, garish magenta used as a placeholder.*/
  --red: #F43545;
  --construct-yellow: #FFE900;
  }

/*Fonts*/
@font-face {
  font-family: Lexend;
  src: url('/assets/images/fonts/lexend/Lexend-VariableFont_wght.ttf');
}

@font-face {
  font-family: Limelight;
  src: url('/assets/images/fonts/limelight/Limelight-Regular.ttf');
}

body {
  font-family: 'Lexend', sans-serif;
  margin: 0;
  background-color: var(--black);
  background-size: 250vh;
  background-repeat: repeat;
  color: var(--latte);
  background-image: var(--body-bg-image);
}

* {
  box-sizing: border-box;
}

/* Layout CSS */

/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than the other elements, you will need to move that div outside of the container */

#container {
  max-width: 1100px;
  margin: 0 auto; /* This centers the entire page */
  padding: 7px;
}

  /* the area below is for all links on your page EXCEPT for the navigation */
  #container a {
    color: var(--softpink);
    font-weight: bold;
    text-decoration:none;
  }

/* --- */

#header_logo {
  display: block;
  margin:auto;
  max-width: 450px;
  max-height: 140px;
  content: url(assets/images/title/website_logo.png);
  padding: 14px;
}
  
  #header_logo:hover {
    display: block;
    margin:auto;
    max-width: 450px;
    max-height: 140px;
    content: url(assets/images/title/website_glowgo.gif);
    padding: 14px;
  }

/* navigation section!! */
#navbar {
  background-image: var(--container-bg);
  width: 100%;
  padding: 7px;
  border-radius: 7px;
  flex: 1;  
}

  #navbar ul {
    display: flex;
    padding: 0; /*Leave this.*/
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
  }
  
  #navbar li {
    padding:10px;
  }

    /* navigation links*/
    #navbar li a {
      color: var(--gold);
      text-decoration: none;
      transition:0.5s;
    }
    /* navigation link when a link is hovered over */
    #navbar li a:hover {
      color: var(--lightgold);
      text-decoration: none;
      text-shadow: 2px 2px 24px var(--pink)
      mix-blend-mode: plus-lighter;
    }

      #navbar li a-here{
        color: var(--pink);
        text-decoration: none;
        transition:0.5s;
      }
      #navbar li a-here:hover{
        color: var(--peri);
        text-decoration: none;
        text-shadow: 2px 2px 24px var(--softpink)
        mix-blend-mode: plus-lighter;
      }
      
      /* --- */
      
      #navbar li a-wip{
        color: var(--red);
        text-decoration: none;
        transition:0.5s;
        cursor: not-allowed;
      }
      #navbar li a-wip:hover{
        color: var(--red);
        text-decoration: line-through;
        text-shadow: 2px 2px 24px var(--softpink)
        mix-blend-mode: plus-lighter;
        cursor: not-allowed
      }

/* --- */

#flex {
  display: flex;
  margin: 24px;
}

sidenav {
  color: var(--gold);
  display: block;
  border-radius: 7px;
  background-color: var(--darkperi);
  padding: 24px;
}

  sidenav h4 {
    text-align: center;
  }

  sidenav li {
    list-style: '✦  ';
    padding: 3.5px;
  }
  
    sidenav li a {
      color: var(--softpink);
      text-decoration: none;
    }

      /* navigation link when a link is hovered over */
      sidenav li a:hover {
        color: var(--lightgold);
        text-decoration: bold;
        text-shadow: 2px 2px 24px var(--pink)
        transition:0.5s;
      }

/* --- */

/* --- */

main {
  background-color: var(--blue1);
  border-radius: 20px;
  flex: 1;
  margin: 0 14px 0 14px;
  padding: 24px;
  max-width: 900px;
  overflow: hidden;
  order:2
}

/* --- */

#notfound {
  max-width: 500px;
  margin: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%) }
}

#notfound img {
  width: 256px;
  height: 256px;
}

.notfound {
  width: 256px;
  height: 256px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- */

/*ORDER*/
/* if you're using both sidebars, the "order" value tells the CSS the order in which to display them. left sidebar is 1, content is 2, and right sidebar is 3! */

.Left-SideNavigation {
  order: 1;
}

#leftSidebar {
  padding: 24px;
  max-width: 240px;
  overflow:auto;
  order:1
}

  aside {
    background-image: var(--container-bg);
    position:relative;
    border-radius: 14px;
    font-size: smaller;
    box-shadow: 7px 7px 24px var(--blue1);
  }

.Right-Sidebar {
  order: 3;
}

#rightSidebar {
  padding: 24px;
  max-width: 240px;
  overflow:auto;
  order:3
}


  .updatebox {
    height: 240px;
    background-color: var(--darkperi);
    border-radius: 14px;
    padding: 7px;
    overflow:auto;
    overflow-y: scroll;
    box-sizing: border-box;
    order:3
  }
  
  .update {
    padding: 7px;
    padding-left: 21px;
    padding-right: 21px;
    height: auto;
    width: auto;
    background-image: url('/assets/images/gui/idiot-box.png');
    border-radius: 30px;
    margin: 7px;
    font-size: 14px;
    order:3
  }


#footer {
  display: flex;
  flex-shrink: 0;
  text-align: center; /* text for footer */
  border-radius: 24px 24px 0 0;
  background-image: var(--container-bg); /* background image for footer*/
  max-height: 100vh;
  max-width: 1100px;
  padding: 0px;
  font-size: 70%;
  margin: 0 auto;
  overflow: hidden;
}


ul-footer {
  display: grid;
  border-radius: 24px;
  background-color:var(--awful);
  list-style: none;
  color: var(--peri);
  text-align: center;
  margin: 0 auto;
  float: left;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 3.5px;
  line-height: 24px;
  order:1;
  height: auto;
  width: auto;
}

  ul-footer li {
    color: #fff;
    padding:0
  }

ul-media {
  display: grid;
  border-radius: 24px;
  width:112px;
  height:64px;
  list-style: none;
  color:var(--pink);
  margin:0 auto;
  float: right;
  left: 0;
  right: 0;
  bottom: 0;
  overflow:hidden;
  padding: 7px;
  background-color:var(--construct-yellow);
  order:2;
  height: auto;
  width: auto;
}

  ul-media li {
    color: #fff;
    padding: 0px;
    top: 50%;
    left: 50%;
  }
  

            h1,
            h2,
            h3 {
                color: var(--gold);
                font-family: 'Limelight', sans-serif;
            }

            h1 {
                font-size: 24px;
            }

            strong {
                color: (var--gold);
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #13092D;
                border: 1px solid #ED64F5;
                padding: 10px;
            }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: var(--awful);
            }


            /* 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%;
                }
                
                #header {
                  max-width: 1000px }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
      
                main {
                    order: 2;
                    display:flex;
                }

                #leftSidebar {
                    order: 3;
                    display:flex;
                }

                #rightSidebar {
                    order: 2;
                    display:flex;
                }
                
                #footer {
                    order: 1;
                    display:flex;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
            
/*   ✦  end of CSS for home page/provided by sadgrl   ✦   */
/* Begining custom cursor from https://www.cursors-4u.com... */
* {cursor: url(https://cur.cursors-4u.net/nature/nat-7/nat602.cur), auto;} 
/* End custom cursor. */

/*Following is for the update box.*/
/*Example: <div class="update">text goes here ~✦</div>*/

/*I don't know HOW or WHY this finally worked, but this is for the scrollbar.*/
* {
    scrollbar-color:var(--gold) transparent;
    /*The first variable (color) is for the scrollbar twinkie itself. The second variable (also a color) is the color of the track.*/
    scrollbar-width:thin;
    border-radius: 0px;
}

::-webkit-scrollbar{
    width: 20px;
    height: 20px;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb{
    background: var(--pink);
    border: 3.5px var(--softpink);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--softpink);
    border-radius: 0px
}

::-webkit-scrollbar-track{
    background: var(--pink);
    border-radius: 0px;
    box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}
/*End of scrollbar CSS*/