/***

THIS CODE HAS BEEN REVAMPED... AGAIN!

IF YOU WANT THE ORIGINAL CSS, GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_old/fakewp2.css

IF YOU WANT THE v2 CSS (i.e. NOT THE ORIGINAL BUT NOT THE CURRENT WIP REVAMP), GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_new/fakewp2_new.css

***/

@import "style-font.css";

html{
  --bg-color: #4236A6; /*medium purple*/
  --darker-color: #0F0F54; /*dark purple*/
  --lighter-color: #FDF9CB; /*light yellow*/
  --accent-color: #95A6EA; /*light purple*/
  --accent-color2: #EFB65D; /*dark yellow*/
  scrollbar-color: var(--lighter-color) var(--darker-color);
}

body {
  background: radial-gradient(var(--darker-color) 24%, transparent 21% ,transparent 79%, var(--accent-color) 80%);
  background-size: 2.75em 2.75em;
  background-color: var(--bg-color);
  color: white;
  font-family: Georgia, serif;
  font-size: 1em;
  }
  
/*Contains everything*/
.wrapper {
  width: 1150px;
  background: var(--darker-color); /*body bg*/
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border-left: 0px solid var(--darker-color);
  border-right: 0px solid var(--darker-color);  
  margin-bottom: -10px;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
}
  
/*Header and footer images*/
.header, #footer {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.1)), url("images/woag dude thats a huge snake.png"); /*This is the image in the header and footer. Replace it with your own!*/
  background-size:cover;
  }
    
#footer {
  height: 50px;
  }
  
#footer p {
  margin-top: 1%;
  font-size: 1rem;
}
  
.header img {
  border-top: 0px;
  }
  
h1, h2, h3 {
  margin-bottom: .5rem;
  }
  
h1, h2, h3, .page {
  font-family:Continent Transport Demo;
}
  
/*navbar container*/
.navbar {
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 5px;
  }
  
/*style for navbar links*/
.page {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  }
  
.page a:link, .page a:visited {
  color: white;
  text-decoration: none;
  }
  
.page a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/*dropdown menu*/
nav.dd-menu {
	display: block;
	background-color: transparent;
	text-decoration: none;
}

.dd-menu:hover > .dd {
	display: block;
}

.dd {
	display: none;
	position: absolute;
	margin-top: 1px;
	text-align: left;
  background-color: var(--lighter-color);
  z-index: 10;
  box-shadow: 5px 5px var(--accent-color);
}

.dd > a {
	display: block;
	padding: 10px;
	float: left;
	clear: both;
	min-width: 100px;
}

.dd-title {
	padding-bottom: 20px;
	z-index: 9;
}

.dd-title:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.dd a:link, .dd a:visited {
  color: var(--bg-color);
  text-decoration: underline;
}

.dd a:hover {
  color: var(--bg-color);
    text-decoration: underline;
    text-shadow: .5px .5px var(--darker-color);
}
/*end dropdown menu*/


/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main, .main2, .sidebar-right {
  display: inline-block;
  }
  
#sidebar-left, .sidebar-right {
  width: 200px;
  position: absolute;
  top: 0;
  }

#sidebar-left {
  margin-left: 10px;
  }
  
.main {
  margin-left: 220px;
  width: 710px;
  }
  
.main2 {
  margin-left: 220px;
  margin-right: 10px;
  width: auto;
  } 
  
.sidebar-right {
  margin-right: 10px;
  margin-left: 10px;
  }
  
/*Box used for individual sections in the sidebar, center column, etc.*/
.main-box {  
  padding: 5px 10px 0px 10px;
  background: var(--lighter-color);
  color: var(--darker-color); /*text color!!!*/
  border-top: 5px solid var(--accent-color); /*box borders top and bottom*/
  border-bottom: 5px solid var(--accent-color);
  margin: 10px 0px 15px 0px;
  }
  
/*Prevent overflow of large images in main text areas.*/
.main-box img {
  max-width: 100%;
  height: auto;
  }
  
  /*Box used for individual sections in the sidebar, center column, etc.*/
.outer-box {  
  padding: 5px 10px 5px 10px; 
  background: var(--accent-color);
  color: var(--darker-color); /*text color!!!*/
  border-top: 5px solid var(--lighter-color); /*box borders top and bottom*/
  border-bottom: 5px solid var(--lighter-color);
  margin: 10px 0px 15px 0px;
  }
  
/*Prevent overflow of large images in main text areas.*/
.outer-box img {
  max-width: 100%;
  height: auto;
  }
  
.scrollable {
  overflow-y: auto;
  max-height: 150px;
  border: 3.5px outset var(--accent-color);
  background: var(--lighter-color);
  margin-top: .8rem;
  margin-bottom: .5rem;
  padding: 0px 8px 0px 8px;
  scrollbar-color: var(--accent-color) transparent;
  scrollbar-width: thin;
}
  
.inner a:link, .inner a:visited {
  color: var(--bg-color);
  text-decoration: underline;
}

.inner a:hover {
  color: var(--bg-color);
    text-decoration: underline;
    text-shadow: .5px .5px var(--darker-color);
}

.inner p, li {
  margin-bottom:15px;
}
  
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main, .main2 {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  #sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main, .main2 {
    margin-left: 180px;
    width: 52vw;
    }
  }
  
/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  #sidebar-left, .main, .main2, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  #sidebar-left, .sidebar-right {
    font-size: 0.95em;
    }
  }