/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: #000000;
  color: black;
  font-family: Verdana;
  background-image:url('pic/techback.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 400px;
  background-attachment: fixed;
}

@font-face {
    font-family: 'monadregular';
    src: url('monad-webfont.woff2') format('woff2'),
         url('monad-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

	h1 {
  font-size: 35px;
  font-family: 'monadregular';
  font-weight: normal;
  font-style: normal;
  text-align:center;
  }
  
  h2 {
  font-size: 25px;
  font-family: 'monadregular';
  font-weight: normal;
  font-style: normal;
  text-align:center;
  color: #b30000;
  }
  
  h3 {
  font-size: 18px;
  font-family: 'monadregular';
  font-weight: normal;
  font-style: normal;
  }

/* unvisited link */
a:link {
  color: #b30000;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #b30000;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #ff6666;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: #b30000;
  text-decoration: none;
}

#main-container {
  max-width:1200px;
  margin:0 auto;
  background-color:#ffffff;
  border:solid black 5px;
}
.flex {
  display:flex;
  margin-bottom:0px;
}
.content-wrap {
  margin-top:0px;
}

.parent {
  display: inline-flex;
}

.child {
  margin: 20px;
}

#page-content {
  width:90%;
  margin-bottom:0px;
  background-color:#ffffff;
  overflow-y:auto;
}

#sidebar {
  width:350px;
  margin-right:10px;
  margin-bottom:0px;
  overflow:hidden;
}

#sidebar2 {
  width:90px;
  margin-left:10px;
  margin-bottom:0px;
  overflow:hidden;
}

#header {
  height:250px;
  margin-bottom:0px;

}

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Works on Firefox */
* {
  scrollbar-color: #ff6666 #660000;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  background: #660000;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #E6AAAA; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff6666; 
}

#headermobile {
  height:100px;
  margin-bottom:0px;

}

.post_media_photo {
 margin-left:30px;  
}


/* 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 (min-width: 800px) {
  .small {
    max-width: 60%;
    height: auto;
  }
  
  #headermobile {
  display: none;
  }
  
#menuToggle
{
  display: none !important;
  }

    div#hidepc {
    display: none; !important;
  }  
  
  
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}
 
    @media only screen and (max-width: 800px) {
  .flex {
    flex-wrap:wrap;
  }
  #sidebar {
    width:0px;
    display: none;
    order:3;
    margin-right:0;
    height:0px;
  }

  #sidebar2 {
   display: none;
  }
        
  #page-content {
    width:100%;
    display: block;
    order:2;
  }

  #header {
  display: none;
  }

#footer {
  display: none;
}

#navbar {
  display: none;
}  

#credits {
  display: none;
}

 #menuToggle
  {
    width:100%;
    display: block;
    order:1;
  }
  
  img#hidemobile {
    display: none;
  } 
  
    div#hidemobile {
    display: none;
  }
  
    table#hidemobile {
    display: none;
  }
  
}

.sidebar-wrapper {
  padding:0px;
  height:100%;
  overflow:hidden;
}


#navbar {
  margin-bottom:0px;
}

#space200 {
	height: 200px;
	overflow: hidden;
	position: static;
}

#space300 {
	height: 300px;
	overflow: hidden;
	position: static;
}

#space400 {
	height: 400px;
	overflow: hidden;
	position: static;
}

#space500 {
	height: 500px;
	overflow: hidden;
	position: static;
}

#spaceart {
	height: 50px;
	overflow: hidden;
	position: static;
	opacity: 0.6;
}


/* Node Float */

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.node {
	width: 150px;
	height: 200px;
	position: static;
	left: 500px;
	overflow: hidden;
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
	img { width: 100%; height: auto; }
}

/* Responsive Images */

.responsive {
  max-width: 100%;
  height: auto;
}

/* Boxes */

.articlebox {
    border: 3px solid #b30000;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 22px;
    background-color:#ffffff;
    width: 200px;
    height: 250px;
    overflow: hidden;
    }

.storybox {
    border: 3px solid #b30000;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 22px;
    background-color:#ffffff;
    max-width: 90%;
    overflow: hidden;
    }
    
.membox {
    border: 3px solid #b30000;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 1px;
    background-color:#ffffff;
    max-width: 96%;
    overflow: hidden;
    }
    
    
.blogbox {
    border: 3px solid #b30000;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 22px;
    background-color:#ffffff;
    width: 550px;
    overflow: hidden;
    margin-bottom: 50px;
    }
    
    .teabox {
    border: 3px solid #b30000;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 22px;
    background-color:#ffffff;
    width: 80%;
    overflow: hidden;
    font-size: 12px;
    }
    

 /* Buttons */   
a.button{
 display:inline-block;
 padding:0.3em 1.2em;
 margin:0 0.1em 0.1em 0;
 border:0.16em solid rgba(255,255,255,0);
 border-radius:2em;
 box-sizing: border-box;
 text-decoration:none;
 font-family: 'heart_warmingregular';
 font-weight:300;
 color:#000000;
 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
 text-align:center;
 transition: all 0.2s;
}

a.button:hover{
 border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
 a.button{
 display:block;
 margin:0.2em auto;
 }
} 

 /* Gallery */ 

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

div.castgallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 320px;
}

div.castgallery:hover {
  border: 1px solid #777;
}

div.castgallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

 /* Table of Contents */ 
#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 10px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

 /* Table of Contents */ 
.pagination {
  display: inline-block;
}

.pagination a {
  color: #b30000;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #b30000;
}

.pagination a.active {
  background-color: #ffffff;
  color: #b30000;
  border: 1px solid #b30000;
}

.pagination a:hover:not(.active) {background-color: #E6AAAA;}


 /* Blog Style */ 
 
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

 
/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #f1e3c9;
  color: #151515; 
  outline-color: #a9a9a9;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  max-width:1200px;
}

 .footer-wrapper {
                padding: 5px;
            }

 
  /*
 * Hamburger Menu 
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */



#menuToggle
{
  display: block;
  position: relative;
  top: 40px;
  left: 20px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Dropdown Menu */
.dropbtn {
  background-color: #b30000;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  margin-bottom: 10px;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #b30000;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 40px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fcc9c9;
  min-width: 160px;
  height: 200px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ff6666;}

.show {display: block;}