:root {
  /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

  /* applies to all areas */
  --background-color: #000000;
  --font-color: #eeeeee;
  --font-family: Arial, sans-serif;
  --font-size: 14px;
  --line-height: 1.3em;

  /* container */
  --container-bg-color: #000000;
  --container-height: 100%;
  --container-overflow: auto;
  --container-width: 100%;

  /* footer */
  --footer-bg-color: #000000;
  --footer-height: 30px;

  /* header */
  --header-background: url("/images/layout/y2k/header.png");
  --header-bg-color: #000000;
  --header-border-color: #555555;
  --header-border-width: 1px;
  --header-border-style: solid;
  --header-height: 100px;
  --header-margin-bottom: 10px;

  /* links */
  --link-color: #B25CCF;
  --link-hover: #B25CCF;
  --link-hover-text-decoration: underline;
  --link-text-decoration: none;
  --link-visited: #702379;

  /* main content body (between sidebars) */
  --content-bg-color: #222222;
  --content-margin: 10px;
  --content-padding: 0px;

  /* main content borders */
  --wrapper-border-color: #555555;
  --wrapper-border-style: solid;
  --wrapper-border-width: 1px;

  /* main content headers */
  --content-header-bg-color: #555555;
  --content-header-margin: 0px;
  --content-header-padding: 10px;

  /* main content paragraphs */
  --content-div-margin: 0px;
  --content-div-padding: 10px;

  /* navbar */
  --navitems-alignment: center;
  --nav-bg-color: #000000;
  --navbar-margin-bottom: 10px;
  --space-between-navitems: 20px;
  
  /* controls the gap between the content and the footer */
  --row-gap: 5px;

  /* sidebar */
  --sidebar-bg-color: #000000;
  --sidebar-padding: 0px;
  --sidebar-width: 175px;

  /* sidebar headers */
  --sidebar-header-bg-color: #000000;
  --sidebar-header-border-bottom: 1px solid #555555;
  --sidebar-header-font-weight: lighter;
  --sidebar-header-margin: 0px;
  --sidebar-header-padding: 5px;

  /* sidebar divs */
  --sidebar-div-border-color: #555555;
  --sidebar-div-border-style: solid;
  --sidebar-div-border-width: 1px;
  --sidebar-div-margin: 10px;
  --sidebar-div-padding: 0px;

}

/* classes, ids, and tags */

html,
body {
  background-attachment: fixed;
  background-color: var(--background-color);
  background-position: center bottom;
  background-repeat: repeat;
  background-size: cover;
  color: var(--font-color);
  font-family: var(--font-family);
  font-size: var(--font-size);   
  height: 100vh;
  line-height: var(--line-height);
  margin: 0;
  padding: 0;
  width: 100vw;
}

/* container */

#main-container {
  background-color: var(--container-bg-color);
  height: var(--container-height);
  margin: 0 auto;
  max-width: var(--container-width);
  overflow: var(--container-overflow);
}

/* food gallery */

.food-div {
  border: 1px solid #555555;
  float: left;
  margin: 1% !important;
  max-width: 20%;
  text-align: center;
}

.food-img {
  border: 1px solid;
}

/* footer */

#footer {
  height: var(--footer-height);
  text-align: center;
  color: var(--font-color);
  background-color: var(--footer-bg-color);
}

.footer-wrapper {
  padding: 5px;
}

/* header */

#header-contained {
  background-color: var(--header-bg-color);
  background-image: var(--header-background);
  background-position: center center;
  border-bottom-color: var(--header-border-color);
  border-bottom-style: var(--header-border-style);
  border-bottom-width: var(--header-border-width);
  height: var(--header-height);
  margin-bottom: var(--header-margin-bottom);
}

/* images */

.float-images {
  overflow: hidden;
}

.float-image-left {
  margin-right: 15px;
  padding-right: 15px;
  float: left;
  width: 25%
}

.float-image-right {
  margin-left: 15px;
  padding-left: 15px;
  float: right;
  width: 25%
}

.icon {
  float: left;
  margin-right: 15px;
  padding-right: 15px;
}

.image-gallery {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

img {
  max-width: 100%;
  height: auto;
}

#img-hover:hover {
  text-decoration: none; 
}

/* links */

a {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: var(--link-text-decoration);
}

a:hover {
  color: var(--link-hover);
  text-decoration: var(--link-hover-text-decoration);
  text-shadow: 0 0 10px var(--link-hover), 0 0 20px var(--link-hover);
  transition: all .5s ease;
  -webkit-transition: all .5x ease;
}

a:visited {
  color: var(--link-visited);
}

/* main content body (between sidebars) */

#content-container {
  width: 60%;
  margin-bottom: var(--row-gap);
  background-color: var(--background-color);
}

.content-wrap {
  margin-top: var(--content-margin-top);
}

.flex {
  display: flex;
  margin-bottom: var(--row-gap);
}

.two-columns {
  column-count: 2;
}

.two-columns ul {
  margin: 0px;
}

.wrapper {
  background-color: var(--content-bg-color);
  border-color: var(--wrapper-border-color);
  border-style: var(--wrapper-border-style);
  border-width: var(--wrapper-border-width);
  margin: var(--content-margin);
  padding: var(--content-padding);
  text-align: left;
}

.wrapper-bottom-p {
  padding: 10px;
}

.wrapper div {
  margin: var(--content-div-margin);
  padding: var(--content-div-padding);
}

.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5, .wrapper h6 {
  background-color: var(--content-header-bg-color);
  margin: var(--content-header-margin);
  padding: var(--content-header-padding);
}

.wrapper p {
  margin: 0px;
}

.wrapper-top-p {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

/* navbar */

.nav {
  background-color: var(--nav-bg-color);
  margin-bottom: var(--navbar-margin-bottom);
  margin-left: 0;
  margin-top: 0;
  text-align: var(--navitems-alignment);
  padding-bottom: 1em;
  padding-top: 1em;
}

#navbar-contained {
  margin-bottom: var(--row-gap)
}

.nav li {
  display: inline-block;
  padding-right: var(--space-between-navitems);
}

/* sidebars */

#left-sidebar, #right-sidebar {
  background-color: var(--sidebar-bg-color);
  height: var(--sidebar-height);
  margin-bottom: var(--row-gap);
  overflow-x: var(--sidebar-overflow-x);
  overflow-y: var(--sidebar-overflow-y);
  text-align: center;
  width: var(--sidebar-width);
}

.sidebar-wrapper {
  height: var(--sidebar-height);
  padding: var(--sidebar-padding);
  overflow: var(--sidebar-overflow);
}

.sidebar-wrapper div {
  border-color: var(--sidebar-div-border-color);
  border-style: var(--sidebar-div-border-style);
  border-width: var(--sidebar-div-border-width);
  margin: var(--sidebar-div-margin);
  padding-left: var(--sidebar-div-padding);
  padding-right: var(--sidebar-div-padding);
}

.sidebar-wrapper h1, .sidebar-wrapper h2, .sidebar-wrapper h3, .sidebar-wrapper h4, .sidebar-wrapper h5, .sidebar-wrapper h6 {
  background-color: var(--sidebar-header-bg-color);
  margin: var(--sidebar-header-margin);
  padding: var(--sidebar-header-padding);
  font-weight: var(--sidebar-header-font-weight);
  border-bottom: var(--sidebar-header-border-bottom);
}

.sidebar-wrapper li {
  margin: 5px;
}

.sidebar-wrapper ul {
  display: block;
  list-style-type: none;
  padding: 0;
}

/* status.cafe */

#statuscafe {
  border: none;
}

/* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
@media only screen and (max-width: 800px) {
  #content-container {
    display: block;
    margin-bottom: 10px;
    order: 1;
  }

  .flex {
    flex-wrap: wrap;
  }

  #left-sidebar {
    display: block;
    order: 2;
    margin-bottom: 10px;
    margin-right: 0;
    width: 100%;
  }

  #right-sidebar {
    display: block;
    order: 3;
    margin-left: 0;
    width: 100%;
  }
}