/*
Theme Name: Spirits and Such
Theme URI: https://spiritsandsuch.com
Author: Chris Brailsford
Author URI: https://cabrailsford.com
Description: Reigen Arataka's site from Mob Psycho 100 season 2
Version: 1.48
License: GNU General Public License v2 or later
*/


/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
      background-image: url('Assets/repeatingbackground.jpg');
      background-position: top center;
      background-repeat: repeat;
      font-family: Georgia, "Times New Roman", serif;
      color: #000000;
      font-size: 16px;
      line-height: 1.5;
      cursor: default;
      cursor: url('Assets/dimple-cursor.cur'), default;
      cursor: url('Assets/dimple-cursor.cur') 32 32, default;
  }
  
  html, body {
      margin: 0;
  }
  
  h1, h2, h3 {
      font-family: "Comic Sans MS", "ChalkboardSE-Light", cursive, sans-serif;
      color: #dd22d5;
      font-weight: normal;
      word-break: break-word;
  }
  
  
  .screen-reader-text {
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      overflow: hidden;
      position: absolute !important;
      width: 1px;
      word-wrap: normal !important;
  }
  
  .site {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1em;
  }
  
  .site-header {
      text-align: center;
      margin-top: 16px;
      margin-top: 1rem;
  }
  
  .site img {
      max-width: 100%;
      height: auto;
  }
  
  .entry-title {
      margin-bottom: 0;
      font-size: 26px;
      font-size: 1.625rem;
      line-height: 1;
  }
  .entry-date {
      font-family: "Comic Sans MS", "ChalkboardSE-Light", cursive, sans-serif;
      font-size: 18px;
      font-size: 1.125rem;
  }
  
  .post,
  .guestbook {
      margin: 32px 0;
      margin: 2rem 0;
  }
  
  .blog .post:after,
  .type-guestbook:after,
  .type-guestbook:first-of-type:before,
  .blog .page-title:before {
      content: "";
      display: block;
      /*background-color: #00ffff;
      box-shadow: inset 0 0 5px 3px #0000ff;*/
      height: 15px;
      border-radius: 10px;
      background-image: url('Assets/rainbow-border.gif');
      background-size: 100% 15px;
      background-repeat: repeat-x;
      margin-top: 32px;
      margin-top: 2rem;
  }
  .type-guestbook:last-child:after,
  .type-guestbook:last-of-type:after {
      display: none;
  }
  .blog .page-title:before {
      margin-top: 0;
      margin-bottom: 32px;
      margin-bottom: 2rem;
  }
  
  .entry-title a {
      text-decoration: none;
  }
  
  .guestbook .entry-title,
  .entry-title a {
      color: #000000;
  }
  
  .entry-title a:hover,
  .entry-title a:focus {
      text-decoration: underline;
  }
  
  .single .entry-title,
  .page-title,
  .page .entry-title {
      font-size: 45px;
      font-size: 2.8125rem;
      line-height: 1;
  }
  .post-type-archive-guestbook .page-title,
  .page .entry-title {
      text-align: center;
  }
  
  .home-link {
      text-align: center;
      font-size: 20px;
      font-size: 1.25rem;
      margin-top: 32px;
      margin-top: 2rem;
  }
  .home-link:before,
  .home-link:after {
      content: "";
      display: block;
      /*background-color: #00ffff;
      box-shadow: inset 0 0 5px 3px #0000ff;*/
      background-image: url('Assets/rainbow-border.gif');
      background-size: 100% 15px;
      background-repeat: repeat-x;
      height: 15px;
      border-radius: 10px;
  }
  .home-link a {
      /*color: #0000ff;*/
      display: inline-block;
      margin: 16px 0;
      margin: 1rem 0;
  }
  .home-link img {
      width: 32px;
  }
  
  .home h1 {
      font-family: "Manaspace", "Comic Sans MS", "ChalkboardSE-Light", cursive, sans-serif;
      color: #000000;
      font-size: 38px;
      font-size: 2.375rem;
      line-height: 1.1;
  }
  .home h1 strong {
      font-weight: normal;
      color: #aa1210;
      text-transform: uppercase;
      font-size: 48px;
      font-size: 3rem;
  }
  .home h2 {
      color: #70cde2;
      font-size: 32px;
      font-size: 2rem;
      line-height: 1.2;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .home .site {
      text-align: center;
      max-width: 800px;
  }
  
  .home .site-main img {
      width: 400px;
  }
  .home .site-main img[alt="Reig"] {
      width: 500px;
  }
  
  .menu {
      margin: 0;
      padding: 0;
      list-style: none;
      display: block;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: center;
  }
  .menu li {
      font-size: 24px;
      font-size: 1.5rem;
      display: block;
      margin: 8px 0;
      margin: 0.5rem 0;
      /*margin: 0 32px;
      margin: 0 2rem;*/
  }
  .menu a {
      display: inline-block;
      margin: 0;
      /*color: #0000ff;*/
      /*font-size: 24px;
      font-size: 1.5rem;*/
  }
  .menu li.contact a:after,
  .menu li.sign-gb a:after,
  .menu li.splash a:after,
  .menu li.about a:after,
  .menu li.esperlol a:after,
  .menu li.aboutesper a:after {
      content: "";
      display: inline-block;
      background-repeat: no-repeat;
      margin-left: 10px;
  }
  .menu li.contact a:after {
      background-image: url('Assets/email.gif');
      width: 50px;
      height: 50px;
  }
  .menu li.sign-gb a:after {
      background-image: url('Assets/guestbook.gif');
      width: 148px;
      height: 62px;
  }
  .menu li.splash a:after {
      background-image: url('Assets/ghost.gif');
      width: 149px;
      height: 65px;
  }
  .menu li.about a:after {
    background-image: url('Assets/question-gif.gif');
    width: 50px;
    height: 50px;
  }
  .menu li.esperlol a:after {
    background-image: url('Assets/oops.gif');
    width: 50px;
    height: 50px;
  }   
  
  .counter {
      font-family: "Comic Sans MS", "ChalkboardSE-Light", cursive, sans-serif;
      margin: 16px 0;
      margin: 1rem 0;
      text-align: center;
      font-size: 24px;
      font-size: 1.5rem;
  }
  .num {
      font-family: "Cursed Timer", Consolas, "Liberation Mono", Menlo, Courier, monospace;
      background: #000000;
      color: #59e62f;
      padding: 0.25em;
      letter-spacing: 2px;
      border: inset;
  }
  
  
  /* Form inputs */
  input[type="text"],
  input[type="email"],
  textarea {
      max-width: 100%;
      border: 1px solid #aaaaaa;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 1.4;
      width: 100%;
      padding: 3px 5px;
      resize: none;
  }
  
  input[type="submit"] {
      background-color: #00b4b4;
      color: #ffffff;
      padding: 8px 12px;
      padding: 0.5rem 0.75rem;
      font-family: "Comic Sans MS", "ChalkboardSE-Light", cursive, sans-serif;
      text-transform: uppercase;
      cursor: pointer;
      border: outset;
  }
  
  /* ACF Overrides */
  .acf-form {
      margin: 0 auto;
  }
  .acf-form .acf-input input,
  .acf-form .acf-input textarea {
      border: 1px solid #aaaaaa;
  }
  .acf-fields>.acf-field {
      border-top: none !important;
  }
  .acf-fields.-left>.acf-field:before {
      display: none !important;
  }
  .acf-fields.-left>.acf-field {
      padding: 0 0 15px 0 !important;
      margin-bottom: 16px;
      margin-bottom: 1rem;
  }
  .acf-fields.-left>.acf-field>.acf-label,
  .acf-fields.-left>.acf-field>.acf-input {
      padding: 0 !important;
  }
  .acf-form-submit {
      text-align: right;
  }
  .acf-form-submit input[type="submit"] {
      background-color: #00b4b4;
      color: #ffffff;
      padding: 8px 12px;
      padding: 0.5rem 0.75rem;
      font-family: "Comic Sans MS", "ChalkboardSE-Light", cursive, sans-serif;
      text-transform: uppercase;
      cursor: pointer;
      border: outset;
  }
  .acf-field .acf-label label {
      font-weight: normal !important;
  }
  .acf-field .acf-label label:after {
      content: ":";
  }
  .acf-required {
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      overflow: hidden;
      position: absolute !important;
      width: 1px;
      word-wrap: normal !important;
  }
  
  /* Jetpack Overrides */
  .contact-form {
      margin: 0 auto;
  }
  .grunion-field-wrap {
      flex-wrap: nowrap;
      margin-bottom: 16px;
      margin-bottom: 1rem;
  }
  .contact-form .grunion-field-label {
      font-weight: normal;
  }
  .contact-form .grunion-field-label:after {
      content: ":";
      display: inline-block;
  }
  .contact-form .grunion-field-label span {
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      overflow: hidden;
      position: absolute !important;
      width: 1px;
      word-wrap: normal !important;
  }
  .contact-submit {
      text-align: right;
  }
  .contact-form .grunion-field-wrap input[type="text"],
  .contact-form .grunion-field-wrap input[type="email"],
  .contact-form .grunion-field-wrap textarea {
      width: 100%;
  }
  
  /* Alignment (for images) */
  .alignleft {
      display: inline;
      float: left;
      margin-right: 1.5em;
  }
  
  .alignright {
      display: inline;
      float: right;
      margin-left: 1.5em;
  }
  
  .aligncenter {
      clear: both;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  
  img.alignleft,
  img.alignright {
      float: none;
      margin: 0 auto 1.5em;
      display: block;
  }
  
  @media only screen and (min-width: 480px) {
      .home h1 strong {
          font-size: 76px;
          font-size: 4rem;
      }
      .home h2 {
          font-size: 42px;
          font-size: 2.625rem;
      }
  }
  @media only screen and (min-width: 640px) {
      .half_columns,
      .one_third_columns,
      .two_thirds_columns {
          display: flex;
          flex-wrap: wrap;
      }
  
      .col-1,
      .col-2 {
          padding: 0 16px;
          padding: 0 1rem;
      }
  
      .col-1 img,
      .col-2 img {
          width: 100%;
      }
  
      .half_columns .col-1,
      .half_columns .col-2,
      .half_columns .col-4,
      .half_columns .col-5 {
          width: 50%;
      }
  
      .one_third_columns .col-1,
      .two_third_columns .col-2 {
          width: 33.33%;
      }
      .one_third_columns .col-2,
      .two_third_columns .col-1 {
          width: 66.67%;
      }
  
      .menu {
          display: flex;
      }
      .menu li {
          display: inline-block;
          margin: 0;
      }
      .menu a {
          margin: 8px 32px;
          margin: 0.5rem 2rem;
      }
      .acf-form,
      .contact-form {
          max-width: 400px;
      }
      .grunion-field-wrap {
          display: flex;
      }
      .contact-form .grunion-field-label {
          width: 20%;
      }
      img.alignleft {
          display: inline;
          float: left;
          margin-right: 1.5em;
          margin-bottom: 0;
      }
  
      img.alignright {
          display: inline;
          float: right;
          margin-left: 1.5em;
          margin-bottom: 0;
      }
  }
  
  @font-face {
      font-family: 'Cursed Timer';
      src: url('Assets/cursedtimerulil-webfont.woff2') format('woff2'),
           url('Assets/cursedtimerulil-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  
  @font-face {
      font-family: 'Manaspace';
      src: url('Assets/manaspc-webfont.woff2') format('woff2'),
           url('Assets/manaspc-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }

  #espermain {
    text-align: center;
  }

  .menu li.aboutesper a:after {
    background-image: url('Assets/question-gif.gif');
    width: 50px;
    height: 50px;
}