:root {
    /* ===== BUTTON COLOR PALETTE ===== */
    --btn-forest: #263b2b;
    --btn-moss: #526b43;
    --btn-sage: #87966a;
    --btn-parchment: #c9bd96;
    --btn-earth: #79543b;
  
    /* ===== BUTTON DETAILS ===== */
    --btn-text: #f5efd9;
    --btn-border: #202a20;
    --btn-radius: 3px;
    --btn-padding: 8px 14px;
    --btn-speed: 0.3s;
  }
  
  
  /*minor styling*/

  /* ==== FONT'S ==== */
  @font-face {
    font-family: 'alagard';
    src: url(alagard.ttf);  }

    @font-face{
    font-family:'GothicPixels';
    src: url(GothicPixels.ttf);}

    .dotgothic16-regular {
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
}
/*end*/

/*== SCROLL BAR STYLING ===*/
   .left-page::-webkit-scrollbar{
    width: 10px;
    border-radius: 8px;
   }

   .right-page::-webkit-scrollbar{
    width: 10px;
    border-radius: 8px;
   }
   .left-page::-webkit-scrollbar-thumb{
    background-color: rgba(237, 234, 224, 0);
   }

   .right-page::-webkit-scrollbar-thumb{
    background-color: rgba(130, 109, 78, 0.764);
    border: 1px outset rgba(67, 57, 43, 0.876);
    border-radius: 8px;
  }
   .right-page::-webkit-scrollbar-track{
    border: left 3px rgb(139, 118, 94);
   }
   h1, h2{
    font-family: 'GothicPixels';
    color: #263b2b;
   }

   h3, h4, u{
    font-family: 'alagard';
    color: #87966a;
   }
   
   hr{
    border: 1px solid rgb(124, 101, 85);
   }

   p{
    font-family: 'DotGothic16', sans-serif;
    font-size: 13px;
   }

   a{
    color: #202a20;
   }

   a:hover{
    color: #87966a;
   }
      
  /* =====  BUTTON STYLING  ===== */
  .button {
    --btn-color: var(--btn-forest);
    --btn-next: var(--btn-moss);
    display: inline-block;
    padding: var(--btn-padding);
    width: 70px;
    color: var(--btn-text);
    background: linear-gradient(
      135deg,
      var(--btn-color),
      var(--btn-next)
    );

    border: 2px outset var(--btn-border);
    border-radius: var(--btn-radius);
  
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  
    background-size: 160% 160%;
    background-position: 0% 50%;
  
    transition:
      background-position var(--btn-speed) ease,
      filter var(--btn-speed) ease,
      box-shadow var(--btn-speed) ease;
  }
  
  /* Hover effect */
  .button:hover {
    background-position: 100% 50%;
    filter: brightness(1.2);
    box-shadow: 0 3px 6px #0004;
  }
  
  /* Pressed effect */
  .button:active {
    border-style: inset;
    filter: brightness(0.9);
    box-shadow: inset 1px 1px 3px #0005;
  }
  
  /* Keyboard accessibility */
  .button:focus-visible {
    outline: 2px dashed var(--btn-sage);
    outline-offset: 3px;
  }

  
  /* ===== AUTOMATIC PALETTE ROTATION ===== */

  .button-palette > .button:nth-child(5n + 1) {
    --btn-color: var(--btn-forest);
    --btn-next: var(--btn-moss);
  }
  
  .button-palette > .button:nth-child(5n + 2) {
    --btn-color: var(--btn-moss);
    --btn-next: var(--btn-sage);
  }
  
  .button-palette > .button:nth-child(5n + 3) {
    --btn-color: var(--btn-sage);
    --btn-next: var(--btn-parchment);
  }
  
  .button-palette > .button:nth-child(5n + 4) {
    --btn-color: var(--btn-parchment);
    --btn-next: var(--btn-earth);
  }
  
  .button-palette > .button:nth-child(5n + 5) {
    --btn-color: var(--btn-earth);
    --btn-next: var(--btn-forest);
  }
/*end of button styling*/
   


    html{
        background-image: url(recipecollectionbg.jpeg);
        background-size: 400px;
        color: rgb(124, 101, 85);
    }

    header{
      background: url(https://i.pinimg.com/1200x/38/f1/74/38f174a48d43a948339360e2dc684b63.jpg);
      background-size: 89px;
      height: 93px;
      width: 985px;
      border: ridge 3px rgb(132, 139, 113);
      box-sizing: border-box;
      margin: auto;
      text-align: center;
      
    }

    header h1{
      font-size: 40px;
      color: rgb(237, 234, 224);
      text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.713);
    }

    nav{
        display: flex;
        flex-direction: column;
        gap: 5px;
        position:absolute;
        top:200px;
        right: 150px;
        z-index:4;
    }

    .recipe-book{
        background-color: rgb(237, 234, 224);
        width: 950px;
        border: 8px double rgb(139, 118, 94);
        border-radius: 15px;
        height: 700px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .left-page{
        border-right: solid 2px rgba(130, 109, 78, 0.395);
        box-shadow: inset -12px 0 30px -10px rgba(111, 96, 74, 0.437);
        padding: 20px;
        overflow-y: scroll;
    }

    .right-page{
        padding: 20px;
        border-left: solid 2px rgba(130, 109, 78, 0.395);
        box-shadow: inset 12px 0 30px -10px rgba(111, 96, 74, 0.437);
        overflow-y: scroll;
    }

    .ingredients ul{
      font-family: 'DotGothic16', sans-serif;
      font-size: 12px;
      color: #67793b;
    }

    .instructions{
      font-family: 'DotGothic16', sans-serif;
      font-size: 14px;
      color: #49392f;
    }



/* ===== MOBILE RECIPE BOOK LAYOUT ===== */

@media (max-width: 650px) {

  /* Keep the page from creating horizontal overflow */
  * {
      box-sizing: border-box;
  }

  body {
      margin: 0;
      padding: 10px 0 20px;
  }

  /* Turn the category buttons into a wrapping menu */
  header{
    background: url(https://i.pinimg.com/1200x/38/f1/74/38f174a48d43a948339360e2dc684b63.jpg);
    background-size: 83px;
    width: calc(100% - 23px);
    border: rgb(132, 139, 113) ridge 3px;
  }

  header h1{
    font-size: 30px;

  }
  nav {
      position: static;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin: 10px auto 18px;
      padding: 0 10px;
      width: 100%;
      background-image: url();
  }

  /* Let buttons fit the available space */
  .button {
      width: auto;
      min-width: 70px;
      padding: 8px 10px;
      font-size: 12px;
  }

  /* Make the book fit the phone screen */
  .recipe-book {
      width: calc(100% - 20px);
      height: auto;
      min-height: 0;
      margin: 0 auto;
      grid-template-columns: minmax(0, 1fr);
      border-width: 5px;
      border-radius: 10px;
  }

  /* First page: remove the vertical book spine */
  .left-page {
      min-width: 0;
      border-right: none;
      border-bottom: 2px solid rgba(130, 109, 78, 0.395);
      box-shadow: inset 0 -10px 20px -15px
          rgba(111, 96, 74, 0.437);
      padding: 16px;
      overflow-y: hidden;
  }

  /* Second page: place it underneath the first */
  .right-page {
      min-width: 0;
      border-left: none;
      box-shadow: inset 0 8px 20px -15px
          rgba(111, 96, 74, 0.437);
      padding: 16px;
      overflow-y: visible;
  }

  /* Make text comfortable to read */
  p {
      font-size: 13px;
      line-height: 1.7;
      overflow-wrap: anywhere;
  }

  .ingredients ul {
      font-size: 12px;
      line-height: 1.7;
      padding-left: 20px;
  }

  .instructions {
      font-size: 13px;
      line-height: 1.7;
  }

  /* Prevent large headings from crowding the screen */
  h1 {
      font-size: 1.5rem;
      overflow-wrap: anywhere;
  }

  h2 {
      font-size: 1.3rem;
  }

  h3, h4 {
      overflow-wrap: anywhere;
  }

  /* Avoid hover effects sticking on touch devices */
  .button:active {
      transform: translateY(1px);
  }
}