/* 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/ghostbackground2.png');
}


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

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #00a4d2 #e4f0f7;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #e4f0f7;
}

*::-webkit-scrollbar-thumb {
  background-color: #00a4d2;
  border-radius: 20px;
  border: 3px solid #e4f0f7;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #54729c;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #00a4d2;
}  


	h1 {
  font-size: 35px;
  font-family: 'heart_warmingregular';
  font-weight: normal;
  font-style: normal;
  text-align:center;
  color: #54729c;
  }
  
  h2 {
  font-size: 25px;
  font-family: 'heart_warmingregular';
  font-weight: normal;
  font-style: normal;
  text-align:center;
  color: #54729c;
  margin: 0;
  }
  
  h3 {
  font-size: 18px;
  font-family: 'heart_warmingregular';
  font-weight: normal;
  font-style: normal;
  }

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

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

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

/* selected link */
a:active {
  color: #54729c;
  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;
}

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

#page-content-guestbook {
  width:60%;
  margin-bottom:0px;
  background-color:#ffffff;
 overflow-y:hidden;
 height:900px;
}
#sidebar {
  width:270px;
  margin-right:10px;
  margin-bottom:0px;
  overflow:hidden;
  background-color:#ffffff;
}
#sidebar2 {
  width:270px;
  margin-left:10px;
  margin-bottom:0px;
  overflow:hidden;
  background-color:#e4f0f7;
}

#credits {
  height:30px;
  width: 100%;
}

#topic-box {
 background-color:#bae8f2;
 overflow-y:auto;
}

#highlight-box {
 background-color:#bae8f2;
 overflow-y:auto;
}

.footer-wrapper {
  padding:0px;
}

.parent {
  display: inline-flex;
  margin-bottom: 0px;
}

.child {
  margin-left: 200px;
  display: flex;
	align-items: center;
}

.child2 {
  margin-right: 10px;
}

.wp-block-quote {
  background-color:#e4f0f7;
}

/* Responsive Images */
.responsive {
  max-width: 100%;
  height: auto;
}


@media only screen and (min-width: 800px) {

#menuToggle
{
  display: none !important;
  }

#hidepc {
    display: none !important;
  }  

#mobilecredits {
 display: none !important;
}

#mobiletop {
 display: none !important;
}

}  
   
/* 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: 800px) {
  .flex {
    flex-wrap:wrap;
  }
  
    div#hidemobile {
    display: none;
  } 
  
  #sidebar {
    display: none !important;
  }

  #sidebar2 {
    display: none !important;
  }
        
  #page-content {
    width:100%;
    display:block;
    order:1;
  }
    #page-content-guestbook {
    width:100%;
    display:block;
    order:1;
  }
  
  #header {
  display: none;
}

  #headermicro {
  display: none;
}


#footer {
  display: none;
}

#navbar {
  display: none;
}  

#credits {
  display: none;
}

#space100 {
  display: none;
}

#space200 {
  display: none;
}

#space300 {
  display: none;
}

#space400 {
  display: none;
}

#space500 {
  display: none;
}

#topic-box {
  display: none;
}

#mobilecredits {
 width:100%;
 height: 120px;
 display:block;
 order:2;
}
  
}

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

#header {
  height:200px;
  margin-bottom:0px;
  background-image:url('pic/wrenheader.jpg');
  border:solid black 3px;
}

#headermicro {
  height:230px;
  margin-bottom:0px;
  background-image:url('pic/wrenwhimheader.jpg');
  border:solid black 3px;
}

#navbar {
  margin-bottom:0px;
}

#space100 {
	height: 100px;
	overflow: hidden;
	position: static;
}

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

/* Boxes */


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

.introbox {
    border: 3px solid #54729c;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 22px;
    background-color:#ffffff;
    width: 230px;
    overflow: hidden;
    margin: 0 auto 50px;
    }
    
.bluebox {
    border: 2px solid #54729c;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 22px;
    background-color:#bcdde0;
    width: 80%;
    overflow: hidden;
    margin: 0 auto 10px;
    }

 /* 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: #3c5c96;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #3c5c96;
}

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

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


 /* Blog Style */ 
 
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}
 
/*#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;
  padding: 0 5% 10px 5%;
}
 
 
 /*
 * 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: #54729c;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #73ded5;
}


#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: #000;
  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: #000;
}

/*
 * 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: #e4f0f7;
  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;
}


.accordion {
  background-color: #e4f0f7;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  border-style: groove;
  border-color: #54729c;
  margin-bottom: 15px;
}

.active, .accordion:hover {
  background-color: #73ded5; 
}

.panel {
  padding: 0 10px;
  display: none;
  background-color: #e4f0f7;
  overflow: hidden;
  margin-bottom: 25px;
  border-color: #54729c;
  border-style: groove;
  border-width: 0 4px 4px 4px;
  margin-top: -15px;
}

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

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: white;
}