/* Style Sheet */

  /*Root Variables
  Not useful for much right now; using images as placeholders and examples.*/
    :root {
      --header-image: url('https://gaily-novelry.neocities.org/Images/HoR%20Banner.jpg');
      --body-bg-image: url('https://gaily-novelry.neocities.org/Images/hor-bg-floral.jpg');

     /* colors */
      --content: #AC4650;
          }
          
    /* IF WE HAVE ANIMATIONS ON SITE;
    aside.animate {
    animation: 1s linear flash;
    }
    @media (prefers-reduced-motion) {
    aside.animate {
        animation: none;
    }
} */

/* Cursor (via https://www.cursors-4u.com) */ *
  {cursor: url(https://cur.cursors-4u.net/user/use-1/use109.cur), auto;}
  /*All Options:
  Dull Arrowhead: url(https://cur.cursors-4u.net/user/use-1/use3.cur)
  Vindictus: url(https://cur.cursors-4u.net/user/use-1/use109.cur)
  End Options*/

  /*Base para and links;*/
    @font-face {
    	font-family: 'Fondamento';
    	src: url('https://gaily-novelry.neocities.org/Fonts/Fondamento-Regular.ttf')  format('truetype');
    }

    @font-face {
    	font-family: 'IM Fell Great Primer';
    	src: url('https://gaily-novelry.neocities.org/Fonts/IM-Fell-Great-Primer-Regular.ttf')  format('truetype');
    }


    @font-face {
    	font-family: 'Floralia';
    	src: url('https://gaily-novelry.neocities.org/Fonts/Floralia.ttf')  format('truetype');
    }

    ::selection {
      background: #FFEDBA;
      color: #CE7232;
      }

   /* Base para and links; */
   /* Note to self for padding & margins; top, right, bottom, left. */
      a {
        position: relative;
        z-index: 2;
        color: #9C1C2B;
        font-weight: bold;
        text-decoration: underline;
        }
            
      a:hover {
        color: #BF6E73;
        font-weight: bold;
        }

      p {
        position: relative; z-index: 1;
        display: block;
        line-height: 1.65;
        font-size: 1EM;
        text-align: start;
        text-indent: 1.1EM;
        margin: 7px;
        padding: 0
        }

      ul {
        position: relative; z-index: 1;
        display: block;
        list-style: none;
        list-style-position: inside;
        line-height: 1.85;
        text-align: start;
        text-indent: 2px;
        margin: 10px;
        margin-left: 27px;
        padding: 0
        }

      ul li:before {
        content: '🙤   ';
        color: #722D2B;
        }

    /*Body Settings*/
      body {
        position: relative; z-index: 1;
        font-family: 'IM Fell Great Primer', serif;
        text-align: start;
        margin: 0;
        background-color: #FDFBDB;
        background-size: 65px;
        color: #451511;
        background-image: var(--body-bg-image);
        }

    * {
        box-sizing: border-box;
      }

    /* Layout CSS */
    /* Remember that #container wraps the entire website. */
    /* If you want something to be wider than the other elements, move its div outside the container. */
      #container {
        width: 95%;
        margin: 0 auto;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-image: url(https://gaily-novelry.neocities.org/Images/borderframe-hor.png) 66 repeat;
        }

    /* Non-Nav #container Links. */
      #container a {
        color: #8B2432;
        font-weight: bold;
        text-decoration: underline;
        }

      #container a:hover {
        color: #BF6E73;
        font-weight: bold;
        }

      #header {
        width: 100%;
        padding-top: 21.77%;
        background-color: #370D09;
        /* To put other images in the header, add it directly to the <div id="header"></div> element! */
        background-image: var(--header-image);
        background-size: 100%;
        }

    /* Navigation Bar Properties. */
      #navbar {
        height: auto;
        background-color: #370D09;
        width: 100%;
        }

      #navbar ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style-type: none;
        justify-content: space-evenly;
        font-size: 1.25EM;
        }

      #navbar li {
        margin-bottom: 7px;
        }

      #navbar li::after {
        content: '&';
        color: #370D09;
        }

    /* Navigation Link Default. */
      #navbar li a {
        color: #FCF0D5;
        font-family: 'Fondamento', cursive;
        font-weight: 700;
        text-decoration: none;
        text-shadow: 2px 2px #722D2B;
        }

    /* Navigation Link Hover. */
      #navbar li a:hover {
        color: #F2D185;
        }

    /* Body Anatomy. */
      #flex {
        display: flex;
        }

      aside {
        background-color: #722D2B;
        width: 200px;
        padding: 15px;
        font-size: smaller;
        color: #E2A28E;
        }

      main {
        background-color: #FDFBDB;
        background-image: url("https://gaily-novelry.neocities.org/Images/hor-tile.jpg");
        flex: 1;
        padding: 20px;
        order: 2;
        overflow: hidden;
        }

      #rightSidebar a {
        color: #B79D35;
        font-weight: bold;
        text-decoration: underline;
        }

      #rightSidebar a:hover {
        color: #F2D185;
        font-weight: bold;
        }

      #rightSidebar p {
        color: #E2A28E;
        }

      #rightSidebar h3 {
        color: #E2A28E;
        }

      #rightSidebar {
        order: 3;
        }

      footer {
        background-color: #370D09;
        color: #E2A28E;
        width: 100%;
        height: auto;
        padding: 10px;
        margin-bottom: -5px;
        text-align: center;
        }

      details {
        position: relative;
        z-index: 1;
        }

      details > summary {
          list-style-type: '❧  ';
      }
      
      details[open] > summary {
          list-style-type: '❦  ';
      }

      summary {
        position: relative;
        z-index: 1;
        font-weight: bold;
        text-indent: 1.1EM;
        font-size: 1.125EM;
        text-align: left;
        font-family: 'Fondamento', cursive;
        text-shadow: 2px 2px #FDF1D3;
        }

      summary:hover {
        color: #9C1C2B;
        }

/* If we want a table to wrap an image, add <div class="clearfix"></div> around the table. */
      .clearfix {
        overflow: auto;
        }

    /* Specialty classes. */

      .booklight:hover {
        filter: brightness(100%) sepia(95%) saturate(150%) hue-rotate(-80deg);
        }

      .booklightsepia:hover {
        filter: brightness(100%) sepia(95%) saturate(230%) hue-rotate(-40deg);
        }

      .center {
        position: relative;
        z-index: 2;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        text-indent: 0;
        }

      .centerfit {
        position: relative;
        z-index: 2;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        }

      .centerquart, .centerquartalt {
        position: relative;
        z-index: 2;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 75%;
        }

      .centerhalf, .centerhalfalt {
        position: relative;
        z-index: 2;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        }

      .cornerimg {
        display: block;
        float: left;
        padding: 0 10px 10px 0;
        position: absolute;
        z-index: 0;
        max-width: 50%;
        opacity: 0.08;
        overflow: hidden;
        }

      .cornerimgsb {
        display: block;
        float: right;
        right: 6.5%;
        padding: 0 0px 0px 0;
        position: absolute;
        z-index: 0;
        max-width: 175px;
        opacity: 0.07;
        transform: scaleX(-1);
        }

      .dropcap {
        position: relative;
        z-index: 1;
        float:left;
        font-family: "Fondamento", cursive;
        font-size: 3.75em;
        line-height: 0.8em;
        margin-right: 5px;
        margin-bottom: -15px;
        margin-top: 3px;
        }

      .dropco {
        /* Same as the base a but with 0 indent. */
        position: relative;
        z-index: 1;
        display: block;
        line-height: 1.65;
        text-align: start;
        text-indent: 0;
        margin: 7px;
        padding: 0
        }

      .errorbox {
        width: 500px;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #FAF3F1;
        border: 1px solid #FAF3F1;
        }

      .featimgl {
        position: relative;
        z-index: 2;
        float: left;
        padding: 0 10px 10px 0;
        }

      .featimgr {
        position: relative;
        z-index: 2;
        float: right;
        margin: 0 10px 10px 0;
        }

      .flat {
        position: relative;
        z-index: 1;
        display: block;
        text-indent: 0;
        }

      .flip {
        transform: scaleX(-1);
        }

      .flop {
        transform: scaleY(-1);
        }

      .flourish {
        width: auto;
        height: 22px;
        margin-top: 10px;
        }

      .footnote {
        font-size: 0.9EM;
        text-indent: 0;
        }

      .linklist {
        position: relative;
        z-index: 1;
        display: block;
        line-height: 1.85;
        text-align: center;
        text-indent: 0pt;
        margin: 7px;
        padding: 0
        }

      .quotebox {
        position: relative;
        z-index: 1;
        background-image: url("https://gaily-novelry.neocities.org/Images/quotepaper.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-origin: border-box;
        background-position: 50% 50%;
        width: 85%;
        height: auto;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 25px 35px 25px 30px;
        line-height: 2;
        color: #722D2B;
        }

      .quotebox p {
        position: relative;
        z-index: 2;
        margin-bottom: 12px;
        }

      .rainbowtext {
        position: relative;
        z-index: 1;
        background-image: linear-gradient(to right, #e91e63, #ffc107, #009688, #673ab7, #e91e63);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        }

      .storyfit {
        padding-left: 75px;
        padding-right: 75px;
        }

    /* Header Customization. */
      h1,
      h2,
      h3 {
        position: relative;
        z-index: 1;
        color: #9C1C2B;
        line-height: 1.65;
        margin: 7px;
        font-size: 1.125EM;
        text-align: center;
        font-family: 'Fondamento', cursive;
        }

      h3 {
        text-align: left;
        }

      h2 {
        font-size: 1.65EM;
        text-shadow: 2px 2px #FDF1D3;
        }

      .h2alt {
        color: #712C2A;
        text-shadow: 2px 2px #DEBC9E;
        }

      h1 {
        color: #722D2B;
        font-size: 2EM;
        text-shadow: 3px 3px #FDF1D3;
        }

      h1:before {
        content: '🙥  ';
        }

      h1:after {
        content: '  🙧';
        }

    /* COLUMN TABLE */
      div.col {
        text-align: start;
        table-layout: fixed;
        }

      .divTable.col {
        position: relative;
        z-index: 1;
        border: 0px;
        width: 100%;
        table-layout: fixed;
        }

      .divTableCell {
        position: relative;
        z-index: 1;
        border: 0px;
        padding: 7px 7px;
        max-width: 2%;
        }

section {
  display: table-row;
  }

    /* DivTable.com */
      .divTable{ display: table; }
      .divTableRow { display: table-row; }
      .divTableHeading { display: table-header-group;}
      .divTableCell, .divTableHead { display: table-cell;}
      .divTableHeading { display: table-header-group;}
      .divTableFoot { display: table-footer-group;}
      .divTableBody { display: table-row-group;}
      
    /* TABLE CODE:
      <div class="divTable col">
        <div class="divTableBody">
          <div class="divTableRow">
            <div class="divTableCell">
            </div>
            
            <div class="divTableCell">
            </div>
            
            <div class="divTableCell">
            </div>
          </div>
        </div>
      </div>
*/

    /* CSS Extra */
      #topBar {
        width: 100%;
        height: 30px;
        padding: 10px;
        font-size: smaller;
        background-color: #AD4751;
        }

    /* BELOW THIS POINT IS MEDIA QUERY */
    @media only screen and (max-width: 850px) {
      #flex {
        flex-wrap: wrap;
        }

      aside {
        width: 100%;
        }

    /* Item Responsiveness Order. */
      main {
        order: 2;
        }

      #rightSidebar {
        order: 1;
        }

      #navbar ul {
        flex-wrap: wrap;
          }
    
    /* Aesthetic Alterations. */
      .hidden-mobile {
        display: none;
        }
      
      #container {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-image: url(https://gaily-novelry.neocities.org/Images/borderframe-hor.png) 66 repeat; 
        }

      main p, li {
        font-size: 0.9EM;
        }

      footer {
        font-size: smaller;
        }

      .centerhalfalt, .centerquartalt {
        width: 95%;
        }

      .flourish {
        display: none;
        }

      .quotebox {
        background-image: url("https://gaily-novelry.neocities.org/Images/quotepaper.jpg");
        width: 99%;
        background-color: #DDBA9D;
        border-radius: 20px;
        background-repeat: repeat;
        background-position: top;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
        }

      .quotebox p {
        position: relative;
        z-index: 2;
        padding-left: 8px;
        padding-right: 8px;
        }

      h3 {
        font-size: 1.125EM;
        }

      h2 {
        font-size: 1.25EM;
        }

      h1 {
        font-size: 1.5EM;
        }

      .divTableCell {
        padding: 1px 1px;
        }

      .storyfit {
        padding-left: 20px;
        padding-right: 20px;
        }
    }

    @media only screen and (max-width: 1100px) {
        .flourish {
        display: none;
        }
    }

    @media only screen and (max-width: 1050px) {
        #navbar li {
          font-size: 0.75EM;
        }
    }

    @media only screen and (min-width: 850px) {
      .hidden-desktop {
        display: none;
        }
    }