/* this is how the computer knows to make it the right shapes and colors
remember to add closing brackets and semicolons! this is based on javascript :painsmile: */

/* ------------------------------------ color schemes ------------------------------------ */

/* :TODO: figure out the color schemes and put together some gradients */

html, html.light {
  color-scheme: light;
  /* colors get variable names here */
  
  --bg: #ffffff;
  --text: #000000;
  --accent: #00ffff;
}

html.dark {
  color-scheme: dark;
  /* same variable names defined with other colors here */
  
  --bg: #000000;
  --text: #ffffff;
  --accent: #ff0000;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    /* copy-paste the dark mode definitions into here */
    
    --bg: #000000;
    --text: #ffffff;
    --accent: #ff0000;
  }
}

/* u could add additional color schemes here */

/* ------------------------------------ basic text styling ------------------------------------ */

body {
  transition: background-color 0.2s, color 0.2s;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Comic Sans MS", sans-serif;
}
h1 {
  font-size: medium;
  margin: 0;
  padding: 0 5px;
}

div {
  box-sizing: border-box;
}

/* ------------------------------------ upper/outer page structure ------------------------------------ */

#container {
  max-width: 1000px;
  margin: 0 auto;
}
#navbar {
  height: 40px;
  width: 100%;
  /* background-color: var(--blueD); */
}

/* ------------------------------------ page content structure ------------------------------------ */

.flex { /* flexes go below headerframe etc */
  display: flex;
}
main {
  /* between the sidebars; this is where content goes */
  /* background-color: var(--pinkD); */
  width: 100%;
  order: 2;
  border: 1px solid var(--text);
  border-radius: 10px 10px 0 0;
  margin: 0 5px;
}
  main p {
    margin: auto 5px;
  }
aside {
  /* styles any sidebar, whether it's left or right.
     for individual sidebars see the #leftSidebar and #rightSidebar sections */
  /* background-color: var(--blueD); */
  width: 200px;
  font-size: smaller;
  border: 1px solid var(--text);
}
  aside p {
    margin: auto 5px;
  }
  #left-sidebar {
    order: 1;
  }
  #right-sidebar {
    order: 3;
  }

/* ------------------------------------ extras and goodies ------------------------------------ */

/*
:TODO: learn css animation? apparently it exists and means things can still look smooth with javascript disabled
maybe use animation in general sparingly tho, sometimes things being animated can be bad. use for screenwide things tho
*/

.sticky-div {
  display: table;
  overflow: auto;
  height: 100%;
}
  .foot-sticky { /* makes a thing stick to the bottom of a .sticky-div */
    display: table-row;
    vertical-align: bottom;
    height: 1px;
      /* :TODO: figure out why this is set to 1 pixel; does it still work with text in it?
      we might be better off setting it to a row-flowing flexbox and setting flex-grow: 0 */
  }

/* ------------------------------------ screen width media query ------------------------------------ */

/*
mostly used for the sake of mobile screens; allows things to display better.
should go underneath everything else to make sure it works correctly.
*/

@media only screen and (max-width: 900px) {
  /* make the max-width here be the container's max-width minus 100 */
  
  .flex {
    flex-wrap: wrap;
  }
  main {
    order: 1;
  }
  aside {
    width: 100%;
  }
  
  #leftSidebar {
    /* :TODO: need to figure out how to turn these into collapsible menus
    those are nice and make it so much more intuitive */
    order: 2;
    height: auto;
  }
  #rightSidebar {
    order: 3;
    height: auto;
  }
}