/***

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

***/

body {
	color: #C0C0C0;
	font-family: "Comic Sans MS", cursive;
	font-size: 0.875em;
	background-image: url('Background_Empty.png');
	background-color: #32b5ff;
	background-position: center;
	background-repeat: repeat;
	margin-bottom: 10px;
  }
  
center {
  text-align: center;
  }

.Center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
  
/*Contains everything*/
.wrapper {
  width: 1150px;
  background: #8f8f8f;
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border-left: 0px solid #12282f;
  border-right: 0px solid #12282f;  
  margin-bottom: -10px;
  box-shadow: 
  0 0 0 2px #C0C0C0,
  0 0 0 4px #0000c8;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
	position: relative;
}
  
/*Header and footer images*/
.header{
  height: 200px;
  overflow: hidden;
  
  background-size:cover;
  }
  
  
.footer {
  height: 25px;
  }
  
.header img {
	border-top: 0px;
  }
  
  
/*Big title at the top of the page.*/  
.title {
  padding: 15px 10px 10px 20px;
  }
  
/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0;
  margin: 0;
  }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  }
  
/*Div style for individual links.*/
.link {
  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;
  border: 0px solid red;
  }
  
.link a {
  color: white;
  text-decoration: none;
  }

/*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, .sidebar-right {
  display: inline-block;
  }
  
.sidebar-left, .sidebar-right {
	width: 200px;
	position: absolute;
	top: 238px;
	left: 1525px;
	height: 178px;
  }

.sidebar-left {
  margin-left: 10px;
  }
  
.main {
  margin-left: 220px;
  width: 710px;
  }
  
.sidebar-right {
  margin-right: 10px;
  margin-left: 10px;
  }
  
  .button {
  background-color: #C0C0C0; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
  
  
/*Box used for individual sections in the sidebar, center column, etc.*/
.box {  
  padding: 5px 10px 0px 10px;
  background: #C0C0C0;
  color: #12282f;
  border-top: 5px solid #0202ad;
  border-bottom: 5px solid #187b9b;
  margin: 10px 0px 15px 0px;
  }
  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }
  
/*/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  
  }
  
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media(max-width : 1570px ){
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    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, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  .sidebar-left, .sidebar-right {
    font-size: 0.95em;
    }
  }

.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.imageOverlay{
	position: relative;
	height:auto;
	width: auto;
	top:-5px;
  	display: inline;
	z-index: 2;
	overflow: hidden;
	
}
*/

.myBtn {
}

.vidBanner {
	
border-left: 2px solid #FFFFFF;
border-right: 2px solid #808080;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
background-image:url('VidBanner.png');
}

.vid {
	
border-left: 2px solid #FFFFFF;
border-right: 2px solid #808080;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
	
}
.basic container {
	float: none;
}

.content {
	padding: 10px 0;
	width: 60%;
	float: left;
	right: 0px;
}
.container {
	width: 960px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.content1 {
	width: 960px;
	float: left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.footer {
	padding: 10px 0;
	background-color: #AAAAAA;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
.header {
}
.sidebar1 {	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.sidebar2 {	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding: 10px 0;
}
ul.nav {	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
.container .footer {
	color: #000;
}
a,
a:visited {
    color: #6138ff;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

header,
body > section,
footer {
    padding: 5px;
}

nav {
    margin: 10px;
    clear: both;
}

footer {
    clear: both;
    font-size: 0.7em;
    padding-top: 30px;
}

/* Gallery Pages */

#photos {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#photos figure {
    margin: 10px;
    max-width: min-content;
}

#photos img {
    border: 3px ridge #c3c3c3;
    /* Enable this for pixel art!! */
    /* image-rendering: pixelated; */
}

#photos img:hover {
    border-color: #ffda00;
}

#photos span {
    text-align: center;
    display: block;
}

#photos figcaption {
    padding: 10px 0px;
}

.page-links {
    text-align: center;
}

.page-links ul {
    padding: 0px 5px;
    margin: 10px 0px;
    display: inline-block;
}
.page-links li {
    list-style: none;
    display: inline;
    margin: 0px 3px;
}

/* Mobile Styling */

@media (max-width: 800px) {
    body {
        padding: 10px;
    }

    #photos figure {
        width: 95%;
        max-width: unset;
    }

    #photos img {
        width: 100%;
    }
}

/* Styling for JavaScript viewer (if enabled) */

#js-viewer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.612);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#js-viewer img {
    max-width: 95%;
    max-height: 80%;
    height: auto;
    width: auto;
    border: 3px ridge #c3c3c3;
}

#js-viewer span {
    margin-top: 10px;
}

#js-viewer span button {
    border-radius: 0px;
    border: 2px outset #cecece;
    background-color: #e2e2e2;
    cursor: pointer;
}

#js-viewer span button:hover {
    border: 2px inset #cecece;
    background-color: #b8b8b8;
}