/*
Theme Name: Fantasy Game
Theme URI: https://wordpress.org/themes/fantasygame/
Version: 0.1
Text Domain: fantasygame
Tested up to: 5.4.2
Requires PHP: 7.3.18
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: A theme inspired by Fantasy role playing adventure games and the books that come with such games. Developed by http://jrpg.com/
Author: July Vachev
Author URI: http://jrpg.com/
Tags: blog, entertainment, one-column, block-styles, custom-logo, custom-menu, featured-images, full-width-template
*/

/* -------------------------------------------------------------------------- */

/*	CONTENTS */

/*	0. Partial CSS Reset */
/*	1. Header / Main Menu */
/*	2. Default Element Styling */
/*	3. Blocks and Styling Within Blocks */
/*	4. Styling for elements on specific pages */
/*	5. Overrides to default WordPress styling */
/* 6. Screen Reader Classes*/
/*	7. Comments */
/*	8. Screen size adjustments */

/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	0. Partial CSS Reset */

/* -------------------------------------------------------------------------- */


html,
body {
   border: none;
   margin: 0;
   padding: 0;
}


blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
   border: none;
   font-size: inherit;
   line-height: inherit;
   margin: 0;
   padding: 0;
   text-align: inherit;
}

blockquote::before,
blockquote::after {
   content: "";
}



/* -------------------------------------------------------------------------- */

/*	1. Header / Main Menu */

/* -------------------------------------------------------------------------- */

body {
   margin: auto;
   width: 70%;
   font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
}

body *{
   z-index: auto;
}

body a:hover {
   text-shadow: 0px 0px 8px #b86a6a;
}

header {
   margin-bottom: 25px;
   padding-top: 25px;
}

header ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

header li {
   float: right;
}

header li a {
   display: block;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
   color: #922610;
   font-size: 1.4em;
   line-height: 1.2em;
   letter-spacing: 1px;
   font-variant: small-caps;
   font-weight: bold;
}


#header-menu{
   padding: 10px 0px 10px;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.header-logo {
   display: flex;
}

.header-logo img {
   height: 100%;
   max-width: 30vw;
   margin: 0 0 0 3%;
}

.header-menu {
   display: flex;
   position: absolute;
   right: 16%;
   max-width: 40%;
}

.header-menu ul {
   list-style: none;
}
/* -------------------------------------------------------------------------- */

/*	2. Default Element Styling */

/* -------------------------------------------------------------------------- */

p {
   text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   display: block;
   font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
   color: #922610;
   line-height: 1.2em;
   font-variant: small-caps;
   letter-spacing: 1px;
   font-weight: bold;
}

ul {
   color: #7A200D;
   list-style-image: url('potion.png');
   font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
   padding-left: 20px;
   line-height: 1.2em;
   line-height: 200%;
}

ol {
   color: #7A200D;
   font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
   padding-left: 20px;
   line-height: 1.2em;
}

blockquote {
  background: #f5e5c9;
  border-left: 10px solid #7A200D;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #7A200D;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote:after {
  color: #7A200D;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
   font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
   display: inline;
   letter-spacing: 1px;
   text-align: inherit;
}

footer {
   display: block;
   position: absolute;
}

footer a {
   text-decoration: none;
   color: #922610;
}

/* -------------------------------------------------------------------------- */

/*	3. Blocks and Styling Within Blocks */

/* -------------------------------------------------------------------------- */

.stat-block {
   text-align: inherit;
   display: block;
   vertical-align: top;
   background: #FDF1DC;
   padding: 20px;
   box-shadow: 0px 0px 1.5em 0px #867453;
}

.stat-block img{
   margin: auto;
   display:block;
   width: 85%;
}

.stat-block a {
   font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
   color: #922610;
   letter-spacing: 1px;
   text-decoration: none;
}

.stat-block h1 {
   margin: .5em 0 .5em 0;
   font-size: 1.9em;
}

.stat-block h2 {
   margin: .5em 0 .5em 0;
   font-size: 1.5em;
}

.stat-block h3 {
   margin: .5em 0 .5em 0;
   font-size: 1.3em;
}

.stat-block h4 {
   margin: .5em 0 .5em 0;
   font-size: 1.1em;
}

.stat-block h5 {
   margin: .5em 0 .5em 0;
   font-size: 1em;
}

.stat-block h6 {
   margin: .5em 0 .5em 0;
   font-size: .85em;
}

.orange-border {
   display: block;
   position: relative;
   overflow: hidden;
   background: #E69A28;
   border: 1px solid #000;
   height: 5px;
   padding: 0 10px 0;
   margin: 0;
   box-sizing: initial;
   z-index: 2;
}

.tapered-rule {
   display: block;
   width: 100%;
   height: 5px;
   border: none;
   margin-bottom: 5px;
   color: #922610;
   fill: #922610;
   stroke: #922610;
}

.block {
   height: 90px;
}

/* -------------------------------------------------------------------------- */

/*	4. Styling for elements on specific pages */

/* -------------------------------------------------------------------------- */

.single p,
.page p {
   display: block;
   margin-bottom: 20px;
   color: #922610;
   font-size: 13.5px;
   line-height: 1.2em;
}

.archive p {
   text-align: justify;
   display: inline;
   margin-bottom: 20px;
   color: #922610;
   font-size: 13.5px;
   line-height: 1.2em;
}

.big-left {
   width: 70%;
   float: left;
}

.small-right {
   width: 25%;
   float: right;
}

.small-right img{
   height: 166px;
   width: 166px;
   margin-top: 6px;
}

.small-right li{
   font-size: 0.9em;
   line-height: 1.4em;
}

.blog-entry{
   margin-top: 2%;
   width: 100%;
   overflow:auto;
}

.container {
   display: flex;
   justify-content: space-between;
}

#previous-post {
   float: left;
   font-size: 1.2em;
}

#next-post {
   float: right;
   font-size: 1.2em;
}

/* -------------------------------------------------------------------------- */

/*	5. Overrides to default WordPress styling */

/* -------------------------------------------------------------------------- */

.alignright {
   float: right;
}

.alignleft {
   float: left;
}

.wp-block-separator.is-style-wide {
   border-top: 1px solid #7A200D;
}

.wp-block-separator.is-style-dots:before {
   font-size: 30px;
   color: #7A200D;
}

.wp-block-table {
   display: contents;
}

.wp-block-calendar {
   display: contents;
}

.wp-block-image {
   display: flow-root;
}

.wp-block-image img {
   margin: inherit;
   height: 100%;
}

figcaption {
   text-align: center;
   color: #7A200D;
   margin: auto;
}

.wp-block-verse {
   color: #7A200D;
}

.wp-block-gallery {
   display: block;
}

.gallery-caption {
   display: block;
}

.block-gallery-caption {
   display: block;
}

.aligncenter iframe{
   display: block;
   margin: auto;
}

.wp-block-file {
   margin-top: 1.5em;
}

.current {
   color: #922610;
   font-size: 1.3em;
   font-weight: 600;
}

#reply-title {
   margin: 1em 0 1em 0;
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

.wp-caption {
   /*This is added only because it's required.
   The functionality is covered by figcaption.*/
}

.wp-caption-text {
   /*This is added only because it's required.
   This functionality is also covered by figcaption.*/
}

.sticky {
   /*This is added only because it's required.
   This theme does not yet support "sticky" functionality for posts, pages or elements.*/
}

/* -------------------------------------------------------------------------- */

/* 6. Screen Reader Classes */

/* -------------------------------------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

/* -------------------------------------------------------------------------- */

/*	6. Comments */

/* -------------------------------------------------------------------------- */

.commentlist .bypostauthor {
   background-color: #ede0ca;
}


.comment-form-comment label{
   display: block;
}

.comment-body {
   margin-bottom: 20px;
   padding: 10px;
}

.comment-body::after {
   content: "~~~~~~~~~";
   margin:auto;
}

.comment-body ul {
   style: none;
}

.vcard {
   margin-bottom: 10px;
}

.vcard img {
   height: 50px;
   width: 50px;
   float: left;
   margin-right: 20px;
}


/* -------------------------------------------------------------------------- */

/*	7. Screen size adjustments */

/* -------------------------------------------------------------------------- */

@media only screen and (max-width: 700px) {
   iframe {
      width: 350px;
      height: 197px;
   }
}

@media only screen and (max-width: 768px) {
   body {
      width: 90%;
   }

   .header-menu {
      max-width: 50%;
      right: 7%;
   }

   .header-logo img {
      max-width: 30vw;
   }

   .header-logo h1 {
      font-size: 0.85em;
   }

   header li a {
      padding: 0px 2px;
      font-size: 1.1em;
      line-height: 1.2em;
   }

   header li a::after {
      content: "|";
   }

   header li a::before {
      content: "|";
   }

   .stat-block h1 {
      font-size: 1.4em;
   }

   .small-right img {
      display: none;
   }

   .blog-entry .big-left{
      width: 100%;
   }

   .container {
      display: block;
      justify-content: none;
   }

   .big-left {
      float: none;
      width: 100%;
   }

   .small-right {
      float: none;
      width: 100%;
      margin-top: 40px;
   }

}

@media screen and (min-width: 768px) {
   body {
      width: 80%;
   }

   .header-menu {
      max-width: 50%;
      right: 11%;
   }

   .header-logo img {
      max-width: 30vw;
   }

   .header-logo h1 {
      font-size: 1em;
   }

   header li a {
      padding: 5px 6px 0 6px;
      font-size: 1.1em;
      line-height: 1.1em;
   }

   .stat-block h1 {
      font-size: 1.5em;
   }

   .small-right img {
      display: none;
   }

   .blog-entry .big-left{
      width: 100%;
   }

   .container {
      display: block;
      justify-content: none;
   }

   .big-left {
      float: none;
      width: 100%;
   }

   .small-right {
      float: none;
      width: 100%;
      margin-top: 40px;
   }

}

@media screen and (min-width: 992px) {
   body {
      width: 80%;
   }

   .header-menu {
      max-width: 50%;
      right: 11%;
   }

   .header-logo img {
      max-width: 30vw;
   }

   header li a {
      padding: 5px 6px 0 6px;
      font-size: 1.2em;
      line-height: 1.2em;
   }

   .stat-block h1 {
      font-size: 1.6em;
   }

   .small-right img {
      display: block;
   }

   .blog-entry .big-left{
      width: 70%;
   }

   .container {
      display: flex;
      justify-content: space-between;
   }

   .big-left {
      width: 70%;
      float: left;
   }

   .small-right {
      width: 25%;
      float: right;
      margin-top: 0;
   }

}


@media screen and (min-width: 1200px) {
   body {
      width: 70%;
   }

   .header-menu {
      right: 16%;
      max-width: 40%;
   }

   .header-logo img {
      max-width: 30vw;
   }

   header li a {
      padding: 5px 16px 0 16px;
      font-size: 1.4em;
      line-height: 1.2em;
   }

   .stat-block h1 {
      font-size: 1.9em;
   }

   .small-right img {
      display: block;
   }

   .blog-entry .big-left{
      width: 70%;
   }

   .container {
      display: flex;
      justify-content: space-between;
   }

   .big-left {
      width: 70%;
      float: left;
   }

   .small-right {
      width: 25%;
      float: right;
      margin-top: 0;
   }

}