/*=============================================================================================================================================*/
/*general styling elements*/

h1 {
  text-align: center;
}
/*
h2 {
  font-size: 18px;
}

p, li {
  line-height: 1.8;
  padding: 10px 15px 5px 15px;
}

h1, h2 {
  padding: 10px;
}
*/
a {
  text-decoration: none;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

.row {
  /*margin for main elements, excluding the dividers*/
  width: 95%;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  /* For tablets and desktops*/
  .row {
    width: 90%;
    margin: 0 auto;
  }
}

/*=============================================================================================================================================*/
/* buttons */

button {
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: block;
  min-width: 80vw;
  height: 50px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16px;
  margin: 1vh auto;
}

.buttonA {
  background-color: #2e0014;
  color: #fafafa;
}

.buttonA:hover,
.buttonB:hover {
  background-color: #318267;
}

.buttonB {
  background-color: #000f12;
  color: #fafafa;
}

@media only screen and (min-width: 768px) {
  /* For tablets */
  button {
    display: inline-block;
    min-width: 200px;
  }
}

/*=============================================================================================================================================*/
/*site structure*/

.row::after {
  /* float reset */
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  /* Default: mobile phones */
  float: left; /* Applies these CSS attributes to every class with the text "col-" */
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For tablets */

  /* Columns for responsive design on bigger devices. Percentage for one column: 100% / 12 columns = 8.33%. */

  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
  .col-s-9 {
    width: 75%;
  }
  .col-s-10 {
    width: 83.33%;
  }
  .col-s-11 {
    width: 91.66%;
  }
  .col-s-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  /* For desktops */

  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

/*=============================================================================================================================================*/

/* -Latest page- section */

#latest-preview {
  /* Latest page preview image */
  max-width: 90vw;
  border: 5px solid #2e0014;
}

.latest-container {
  background: #7c212d;
  height: auto;
}

.latest-img {
  text-align: center;
}

.latest-txt {
  font-family: creatorCredits, Helvetica, sans-serif;
  color: #fafafa;
}

.latest-txt h1 {
  text-align: left;
  font-size: 20vw;
  padding: 3vh 0 0 2vw;
}

.latest-txt a {
  color: #fafafa;
  font-size: 10vw;
  padding: 10px;
}

.latest-txt a:hover {
  color: #50a387;
}

.arrowButton {
  background: transparent url("../img/main/arrow2.svg") no-repeat center left;
  padding: 20% 0;
  background-size: contain;
}

.recent-pages {
  text-align: center;
  background: #660d28;
}

/*  .recent-pages h2 {
    font-family: creatorCredits, Helvetica, sans-serif; 
    font-size: 36px;
    color: #fafafa;
    text-align: left;
    padding: 2vh 5vw;
  }*/

.recent-pages img {
  width: 40vw;
  margin: 2vh 1vw;
  border: 3px solid #2e0014;
}

.recent-pages img:hover {
  border-color: #50a387;
}

@media only screen and (min-width: 768px) {
  /* Tablets */

  #latest-preview {
    /* Latest page preview image */
    width: 100%;
    border-width: 15px;
  }

  .latest-img {
    text-align: right;
  }

  .latest-txt {
    text-align: left;
  }

  .latest-txt h1 {
    font-size: 10vw;
  }

  .latest-txt a {
    font-size: 5vw;
  }

  .arrowButton {
    background: transparent url("../img/main/arrow2.svg") no-repeat center left;
    padding: 20% 0;
    background-size: contain;
  }

  .recent-pages img {
    width: 20vw;
  }
}

@media only screen and (min-width: 1200px) {
  /* Desktops */
  .latest-txt {
    margin-top: 5vh;
  }

  .latest-txt h1 {
    font-size: 10vw;
  }

  .latest-txt a {
    font-size: 3vw;
  }

  .arrowButton {
    background: transparent url("../img/main/arrow.svg") no-repeat center left;
    padding: 15vh 0;
    background-size: 60%;
  }

  .recent-pages img {
    width: 15vw;
    margin: 2vh 3vw;
  }
}

/*=============================================================================================================================================*/
/* divider for sections */
.divider {
  background: #050505;
  color: #fafafa;
  text-align: center;
  font-family: creatorCredits;
}

.divider h1 {
  font-size: 30px;
  padding: 10px;
}

/*=============================================================================================================================================*/
/* story section */
#story-text {
  /* background color for story section */
  background: #22383a;
  padding-top: 2vh;
}

.text-block p {
  font-size: 20px;
  line-height: 1.8;
  padding: 5px 0;
}

.text-quote {
  margin: 2vh 0;
}

.text-block {
  /* Container for Paragraph blocks of text */
  color: #e3e3e3;
  text-align: center;
}

.text-quote {
  /* Container for quote texts */
  background: #7c212d;
  color: #eb9275;
  font-size: 20px;
  line-height: 1.8;
}

.text-quote h2 {
  padding: 10px 15px;
}

.text-quote ul {
  padding: 5px 15px;
}

.text-quote li {
  padding: 5px 20px;
  list-style-type: disc;
  list-style-position: inside;
}

.text-quote i {
  font-size: 30px;
  padding: 2vh 2vw;
}

.btn {
  text-align: center;
  padding: 1vh 0;
}

.text-container {
  /*background: #660D28;*/
  background: #22383a;
  padding: 2vh 5vw;
}

.text-container a {
  font-weight: bold;
  color: #38ad80;
}

.text-container a:hover {
  color: #91e8cb;
}

@media only screen and (min-width: 768px) {
  /* Tablets */
  .divider h1 {
    font-size: 5vw;
  }

  .text-block p {
    line-height: 1.5;
    font-size: 18px;
  }

  .text-block {
    text-align: left;
  }

  .text-quote {
    /* Container for quote texts */
    font-size: 16px;
    line-height: 1.5;
  }
}

@media only screen and (min-width: 1200px) {
  /* Desktops */
  .divider h1 {
    font-size: 2vw;
  }

  .text-block p {
    font-size: 16px;
  }

  .text-quote i {
    padding: 2vh 1vw;
  }
}

/*=============================================================================================================================================*/
/* Patreon Tiers section */
#tiers {
  background: #22383a; /* background color for tiers section */
  color: #e3e3e3;
  text-align: center;
}

#tiers li {
  padding: 5px;
  line-height: 1.5;
}

.btn-block {
  /* Container for buttons */
  text-align: center;
  background: #7c212d;
  padding: 1vh;
}

/*=============================================================================================================================================*/

/* footer {
  background: #1F0005;
  color: #FAFAFA;
  text-align: right;
  padding: 20px 10px;
} */

/*=============================================================================================================================================*/
/*=============================================================================================================================================*/