@font-face {
    font-family: REDENSEK;
    src: url(https://gildedware.neocities.org/Page%20Assets/REDENSEK.TTF);
}

@font-face {
    font-family: Droid;
    src: url(https://gildedware.neocities.org/Page%20Assets/DroidSans.ttf);
}


:root {
  /* These variables exist so you can make quick and simple style changes without much CSS knowledge */
  
  /* applies to all areas */
  --font-family:Droid, sans-serif;
  --font-size:12px;
  --line-height:1.3em;
  --font-color:white;
  --link-text-decoration:none;
  
  /* main content (between sidebars) */
  --content-padding:25px;
  --content-bg-color:black;
  --link-color:#8DC1BD;
  
  /* header */
  --header-height:200px;
  --header-background: url('https://gildedware.neocities.org/Page%20Assets/banner.png');
  --header-margin-bottom:0px;
  
  /* sidebar */
  --sidebar-margin:10px;
  --sidebar-width:350px;
  --sidebar-padding:15px;
  --sidebar-bg-color:black;
  
  /* footer */
  --footer-height:300px;
 
  /* navbar */ 
  --navitems-alignment:center;
  --space-between-navitems:20px;
  --nav-bg-color:#000000;
  --font-size:12.5px;
  
  /* container */
  --container-width:1200px;
  
  /* 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:auto;
    --sidebar-overflow:auto;
  --background-color:#000000;
  
     
}

/* code edited from: https://aleclownes.com/2017/02/01/crt-display.html */
/* feel free to rip for your own website! it's not technically my code, after all */



/* Style the buttons */
.button {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-family:Redensek, sans-serif;
  font-size: 26pt;
  border-style: inset;
}

/* Add a light grey background on mouse-over */
.button:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.button:focus {
  background-color: #FAB615;
  color: white;
  
}



/* COLOR BLEED */
body {
  text-shadow:
  1px 0 1px rgba(0, 0, 0, 0),
  -1px 0 1px rgba(0, 0, 0, 0),
  0 0 1px
}
img {
  filter:
  drop-shadow(4px 0 2px rgba(0, 30, 255, 0))
  drop-shadow(-4px 0 2px rgba(255, 0, 80, 0))
}


html, body {
  margin:0;
  padding:0;
  background-image:url("https://gildedware.neocities.org/Page%20Assets/stars5.gif");
  font-family:var(--font-family);
  font-size:15px;
  line-height:var(--line-height);
  color:var(--font-color);
}
body a {
  color:var(--link-color);
  font-weight:bold;
  text-decoration:var(--link-text-decoration);
}
h1 {
  font-family:REDENSEK, sans-serif;
  font-size:60px;
  line-height: 40px;
}
h2 {
  font-family:REDENSEK, sans-serif;
  font-size:35px;
  line-height: 40px;
}
h3 {
  font-family:REDENSEK, sans-serif;
  font-size:25px;
}
#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:60%;
  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);
  background-color:var(--sidebar-bg-color);
  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 {
   --navitems-alignment:center;
  --space-between-navitems:30px;
  --navbar-margin-bottom:10px;
  --nav-bg-color:#000000;
}
#navbar-full {
  display:none;
}

/*Windows 95 Bar*/

#windows {
    width:var(--content-container);
      background-color: #FAB615;
      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;
}

#link-title
  width:200px; /* this should match the image height */
  height:200px; /* this should match the image width */
  margin-left:25px;
  margin-right:25px; /* this controls the gaps between the images */
  margin-bottom:75px; /* this controls the gaps between the images */
}

/*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);
  font-family:REDENSEK, sans-serif;
  font-size: 24px;
  border-style: inset;
  padding-left:1.2em;
  padding-right:1.2em;
  padding-bottom:0.3em;
}

.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;
}

/* Style the buttons */
.button {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-family:Redensek, sans-serif;
  font-size: 26pt;
  border-style: inset;
}

/* Add a light grey background on mouse-over */
.button:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.button:focus {
  background-color: #FAB615;
  color: white;
  
}

/*for thumbnails in Works and Characters*/
.thumbs { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:800px; /* this can be modified to make the gallery wider */
}

.thumbs img {
  width:130px; /* this sets the width for every image */
  height:130px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
}

/* this is the div which CROPS every image */
.thumbs > div {
border-style: inset;
  width:200px; /* this should match the image height */
  height:210px; /* this should match the image width */
  margin-left:25px;
  margin-right:25px; /* this controls the gaps between the images */
  margin-bottom:25px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.thumbs img:hover {
  transform:scale(1); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}

.mice {
  overflow: hidden;
  white-space: nowrap;
}

.scrolling {
  animation: marquee 2s linear infinite;
  display: inline-block;
  padding-right: 10px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100%);
  }

.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:800px; /* this can be modified to make the gallery wider */
}

.gallery img {
  width:300px; /* this sets the width for every image */
  height:276px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
}

/* this is the div which CROPS every image */
.gallery > div {
border-style: inset;
  width:300px; /* this should match the image height */
  height:300px; /* this should match the image width */
  margin-left:25px;
  margin-right:25px; /* this controls the gaps between the images */
  margin-bottom:75px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(3); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}
/* 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;
  }

}