:root {
  /* These variables exist so you can make quick and simple style changes without much CSS knowledge */
  
  /* applies to all areas */
  --font-family:sans-serif;
  --font-size:14px;
  --line-height:1.3em;
  --font-color:black;
  --link-color:#08838A;
  --link-text-decoration:none;
  
  /* main content (between sidebars) */
  --content-padding:25px;
  --content-bg-color:#ffffff;
  
  /* header */
  --header-height:200px;
  --header-background: url('https://petzcape.neocities.org/Page%20Assets/petzcape.gif');
  --header-margin-bottom:0px;
  
  /* sidebar */
  --sidebar-margin:10px;
  --sidebar-width:300px;
  --sidebar-padding:15px;
  --sidebar-bg-color:#ffffff;
  
  /* footer */
  --footer-height:300px;
 
  /* navbar */ 
  --navitems-alignment:center;
  --space-between-navitems:30px;
  --navbar-margin-bottom:10px;
  --nav-bg-color:#000000;
  
  /* container */
  --container-width:1000px;
  
  /* controls the gap between the content and the footer */
  --row-gap:5px;
  
  
  /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */
  --sidebar-height:50%;
  --sidebar-overflow:auto;
  
  --background-color:#000000;
  
     
}


html, body {
  margin:0;
  padding:0;
  background-image:url("https://petzcape.neocities.org/Page%20Assets/BACKGROUNDanimatedchangingcolorstars.gif");
  font-family:var(--font-family);
  font-size:var(--font-size);
  line-height:var(--line-height);
  color:var(--font-color);
}
body a {
  color:var(--link-color);
  font-weight:bold;
  text-decoration:var(--link-text-decoration);
}
#main-container {
  max-width:var(--container-width);
  margin:0 auto;
  background-color:var(--container-bg-color);
}
.flex {
  display:flex;
  margin-bottom:var(--row-gap);
}
.content-wrap {
  margin-top:var(--content-margin-top);
}
#content-container {
  width:100%;
  margin-bottom:var(--row-gap);
  background-color:var(--content-bg-color);
  border-style: inset;
}
#left-sidebar {
  width:var(--sidebar-width);
  margin-right:var(--sidebar-margin);
  margin-bottom:var(--row-gap);
  height:var(--sidebar-height);
  overflow:var(--sidebar-overflow);
  border-style: inset;
}
#right-sidebar {
  width:var(--sidebar-width);
  margin-left:var(--sidebar-margin);
  margin-bottom:var(--row-gap);
  height:var(--sidebar-height);
  overflow:var(--sidebar-overflow);
  background-color:var(--sidebar-bg-color);
  border-style: inset;
}
#header-contained {
  height:var(--header-height);
  margin-bottom:var(--header-margin-bottom);
  background-image:var(--header-background);
  background-position:center center;
  border-style: inset;
}
#footer {
  height:var(--footer-height);
  text-align:center;
  color:var(--font-color);
  background-color:var(--footer-bg-color);
}
#header-full {
  display:none;
  height:var(--header-height);
  margin-bottom:var(--header-margin-bottom);
  background-image:var(--header-background);
  background-position:center center;
  border-style: inset;
}
#navbar-contained {
  margin-bottom:var(--row-gap)
}
#navbar-full {
  display:none;
}

/*Windows 95 Bar*/

#windows {
    width:var(--content-container);
      background-color: #08838A;
      margin: 2px;
      color: #fff;
      background-image: url('https://gildedware.neocities.org/Page%20Assets/window%20buttons.png');
      background-repeat: no-repeat;
      background-position: top right;
      padding: 10px 10px 10px 10px;
      font-size: 12px;
}

/*Grid CSS*/

.grid-container {
  display: grid;
  grid-template-columns: 450px 450px;
  grid-template-rows: 450px 450px;
  grid-gap: 17px;
  background-color: #fff;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0px 0;
  font-size: 12px;
  border-style: inset;
}


.nav {
  margin-left:0;
  text-align:var(--navitems-alignment);
  margin-top:0;
  margin-bottom:var(--navbar-margin-bottom);
  padding-top:1em;
  padding-bottom:1em;
  background-color:var(--nav-bg-color);
  border-style: inset;
  
}
.nav li {
  display:inline-block;
  padding-right:var(--space-between-navitems);
  border-style: inset;
  padding-left:2em;
}
.nav li a {
}
.wrapper {
  padding:var(--content-padding);
  padding-top:var(--sidebar-padding);
}
.sidebar-wrapper {
  padding:var(--sidebar-padding);
  height:var(--sidebar-height);
  overflow:var(--sidebar-overflow);
}
.footer-wrapper {
  padding:5px;
}

/* 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: 1000px) {
  .flex {
    flex-wrap:wrap;
  }
  #left-sidebar {
    width:50%;
    display:block;
    order:2;
    margin-right:0;
    
  }

  #right-sidebar {
    width:50%;
    display:block;
    order:3;
    margin-left:0;
  }
  #content-container {
    width:50%;
    display:block;
    order:1;
  }