@font-face {
  font-family: OpenSans;
  src: url("OpenSans-SemiBold.ttf");
}
/* ♡☆★ */
@font-face {
  font-family: GamjaFlower;
  src: url("GamjaFlower-Latin.woff2");
}


* {
    padding: 0; margin: 0;
    box-sizing: border-box;
}


body {
    font-family: OpenSans, sans-serif;
    font-weight: 200;
    background-color: #dcba84;
    background-image: url(wallpapers/default.webp);
    background-size: cover;
}

h1, h2, h3 {
    text-align: center;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--TextColor);
    transition: color 0.3s;
    &:hover {
        color: salmon;
    }
}

img {
    max-width: 100%;
}


/*  IMAGE STYLING   */

.flexbox {
    display: flex;
    flex-flow: row wrap;
    gap: 7px;
    justify-content: space-around;
    margin: 0 auto;
    & .polaroid { min-width: 20%; max-width: 31%;}  /* Currydex change BGs */
    & .clickable {transition: all 0.3s; & img { cursor: pointer;}}
    & .clickable:hover {transform: translateY(-5px); box-shadow: 4px 5px 5px 0px #c6bd95bf;}
}

.polaroid {
    border-radius: 3px;
    background-color: #fafafa;
    border: 5px solid #fafafa;
    outline: 1px solid #8b877e;
    box-shadow: 4px 0px 5px 0px #c6bd95bf;
}

.sticker {
    max-width: 50%; height: auto;
    /* border: 1px solid blue; */
    position: relative;
    float: left;
    & .front {
        position: absolute;
        top: 2.5%; left: 0;
        width: 95%; height: 95%;
    }
    & .back {
        filter: contrast(0) sepia(50);
    }
}

.itemgrid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    & a:hover {
        border-radius: 20px;
        background-color: #b2aa99;
        transition: background-color 0.35s;
    }
}

/* different img sizes for different items */
.cookingberries a { width: 60px; }
.curryingredients a { width: 85px; }
.tropicalberries { padding: 10px; gap: 10px; & a { width: 53px; }}

/* Right page > item descriptions */
.desc-wrapper {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
}

.sandwich-wrapper {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    & .item-desc {
        & :nth-child(3) {
            font-size: 0.81rem;
        }
        & :nth-child(1) .back {
            filter: contrast(0) sepia(50) brightness(120%);
        }
    }
}

.item-desc {
    display: grid;
    grid-template-columns: 7.8dvw 20dvw;
    grid-template-rows: 25% 75%;
    column-gap: 20px;
    & :nth-child(1) {
        position: relative;
        grid-column: 1; grid-row: 1/3;
        & .front { position: absolute; top: 0; left: -3px; width: 95%; height: 95%; }
        & .back { filter: contrast(0) sepia(50); }
    }
    & :nth-child(2) {
        color: #504320;
        grid-column: 2; grid-row: 1;
        font-size: 1.1rem;
    }
    & :nth-child(3) {
        grid-column: 2; grid-row: 2;
        font-size: 0.9rem;
    }
    & .spicy {--Highlight1: #ff6a19; --Highlight2: #ff6a19;}
    & .dry {--Highlight1: #a7c9fa; --Highlight2: #a7c9fa;}
    & .sweet {--Highlight1: #ffa7b6; --Highlight2: #ffa7b6;}
    & .sour {--Highlight1: #fbd78b; --Highlight2: #fbd78b;}
    & .bitter {--Highlight1: #a3d6a1; --Highlight2: #a3d6a1;}
    & .balanced {--Highlight1: #ffffff; --Highlight2: #ffffff;} 
}

.berryname {
    font-size: 0.85rem;
    background: linear-gradient(120deg, var(--Highlight1, rgba(0,0,0,0) ) 0%, var(--Highlight1, rgba(0,0,0,0)) 50%, var(--Highlight2, rgba(0,0,0,0)) 50% , var(--Highlight2, rgba(0,0,0,0)) 100%);
    background-repeat: no-repeat;
    background-size: 70% 10%;
    background-position: 0 30%;
}

/*  TEXT STYLINGS   */

.centered {
  & h1 {
    font-size: 1.8rem;
    display: flex;
    width: 90%; margin: 0 auto 1em auto;
    justify-content: center;align-items: center;text-align: center;
  }
  & h1:before, h1:after {
      content: '';
      border-top: 2px solid;
      margin: 0 20px 0 0; flex: 1 0 20px;
  }
  
  & h1:after { margin: 0 0 0 20px;}
}

/*    Ingredient to right, text to left    */
.right-ingredients {
    display: flex; flex-flow: row nowrap;
    justify-content: center;align-items: center; margin: 1em auto 0 auto;
    & img {max-height: 2.5dvw; margin-bottom: 10px;}
    & p {margin-left: 30px; width: 80%; font-size: 0.95em;}
}


.tapered-border {
    width: 80%; margin: -3px auto; height: 2px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #c8c6ae 25%, #c8c6ae 85%, rgba(255, 255, 255, 0) 100%);
}

.handwritten {
    font-family: GamjaFlower, sans-serif;
    font-size: 1.4rem;
}

.book-table {
  display: grid;
  grid-template-columns: 30% 1fr 10%;
  gap: 0.8rem; 
  margin-bottom: 5em;
  & span::after {
    content: '';
    display: inline-block;
    background-color: #85663a;
    width: 100%; height: 1px;
    margin-bottom: 0.3em;
  }
  & .chapter a {text-decoration: none;}
  & .pageno {text-align: center;}
}

/* IMAGE CAROUSEL FOR DISPLAYING DISH VARIATIONS */
.curry {
    display: flex; justify-content: center;
    & img {height: 45dvh;}
}


.carousel {
    width: 100%; height: 30dvh;
    text-align: center;
    & img {
        height: 30dvh; 
    }
    & ul {
        width: 100%; height: 100%;
        display: flex; gap: 0;
        align-items: center;
        overflow-x: scroll; scrollbar-width: none; 
        scroll-snap-type: x mandatory;
        anchor-name: --my-carousel;
        & li {
            flex: 0 0 100%;
            list-style-type: none;
            scroll-snap-align: center;
        }
    }
    & ul::scroll-button(*) {
        position: absolute;
        position-anchor: --my-carousel;
        border: 0;
        font-size: 2rem;
        background: none;
        color: #d5c19b;
        opacity: 1;
        cursor: pointer;
    }
    & ul::scroll-button(*):hover, ul::scroll-button(*):focus {opacity: 1;}
    & ul::scroll-button(*):active { translate: 1px 1px;}
    & ul::scroll-button(*):disabled {opacity: 0;cursor: unset;}
    & ul::scroll-button(left) {
        content: "◄";
        right: calc(anchor(left) - 2dvw);
        bottom: calc(anchor(top) - 20dvh);
    }
    & ul::scroll-button(right) {
        content: "►";
        left: calc(anchor(right) - 3dvw);
        bottom: calc(anchor(top) - 20dvh);
    }
} 

.carousel-curry {
    height: 45dvh;
    & img {
        height: 40dvh;
        margin-left: 0%;
    }
    & ul::scroll-button(left) {
        content: "◄";
        right: calc(anchor(left) - 3dvw);
        bottom: calc(anchor(top) - 25dvh);
    }
    & ul::scroll-button(right) {
        content: "►";
        left: calc(anchor(right) - 3dvw);
        bottom: calc(anchor(top) - 25dvh);
    }
}
.flexbox-paldea {
    display: flex;
    flex-flow: row wrap;
    & .item {
        display: flex;
        flex-flow: column nowrap;
        width: 100; height: 50%;
    }
}

/*  BASE CLASS FOR BOOK PAGES   */

.book-wrapper {
    display: grid;
    width: 80dvw; height: 100dvh; margin: auto;
    grid-template-columns: 80dvw;
    grid-template-rows: 1dvh 59dvh 15dvh 3dvh;
    z-index: 1;
    & .currydex {
        grid-column: 1/2;
        grid-row: 1/3;
        z-index: 2;
    }
    & .cover{
        grid-column: 1/2;
        grid-row: 2/4;
        z-index: 1;
    }
}

.bookmark {
    z-index: 2;
    position: absolute;
    text-align: center;
    & a {    
        text-decoration: none;
    }
}

.bookmark1 {
    font-size: 2rem;
    left: 7dvw; top: 10dvh;
    width: 8dvw; height: 8dvh;
    text-align: right;
    background: #7fdb99;    
    background: linear-gradient(90deg,#66ba7e 0%, #7fdb99 30%, #9ef0b5 60%, #d9e8dd 100%);
    border: 1px solid #489f61;
    & a {padding-right: 15px;}
}

.bookmark2 {
    font-size: 1.6rem;
    left: 7dvw; top: 20dvh;
    width: 8dvw; height: 8dvh;
    text-align: right;
    background: #ffac68; 
}


/* --- EG. <div "book-wrapper"> <main class="book-pages [+ page style]">  ---  */

main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    overflow-x: hidden; 
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
    gap: 25%;
    & section {
        width: 80dvw;
        display: flex; flex-flow: row nowrap; justify-content: space-between;
        /* not sure why specifically 8dvw centers the pages 
        when snapping to them, but I'm not complaining. */
        gap: 5dvw;
        scroll-snap-align: center;
        & .page-left, .page-right {
            overflow-y: hidden;
            position: relative;
            width: 30dvw;
            /* background-color: red; */
            & .pagenumber {   /* page numbers at corners */
                position: absolute; bottom: 0; width: 30px; height: 30px;
                display: block; text-decoration: none;
                transition: all 0.3s;
            }
            & .noflip:hover {   /* add to first & last page numbers */
                background-color: rgba(0,0,0,0);
                cursor: default;
            }
        }
        & .page-left .pagenumber {left: 0;}
        & .page-right .pagenumber { right: 0;}
    }
}


/* --- EG. <main "book-pages"><section id><page-left><page-right> ---  */

.book-pages {
    --BG: none;
    --FontColor: #695a32;

    width: 70dvw; height: 85dvh;
    background-color: #feefda;
    color: var(--FontColor, #695a32);
    padding: 2em 3em; margin: 3dvh auto;
    font-size: 1rem; line-height: 1.6rem;
    background: var(--BG);
    border: 2px solid #85663a;
}

/*  BASE CLASS FOR BOOK COVER   */

.cover {
    width: 75dvw; height: 87dvh;
    background-color: #a8461f;
    margin: 3dvh auto;
    border-radius: 16px;
    border: 2px solid #4a3e26;
    background: linear-gradient(90deg,#ce5619 0%, #9d4726 20%, #69290d 20%, #7b331b 21%, #8e3912 40%, #8e3912 69%, #7b331b 79%, #69290d 80%, #ab4628 80%, #ce5619 100%);
    box-shadow: inset 0 40px 50px -30px #d99958;
}

/*  CURRYDEX ROUNDED PAPER   */
.currydex {
    --BG: linear-gradient(90deg,#fbe9d1 0%, #fdf9ed 20%, #fbe9d1 48%, #bba283 49%, #e8d4af 49%, #dcc39a 50%, #fbe9d1 54%, #fdf9ed 62%, #fdf9ed 85%, #fbe9d1 100%);
    border-radius: 5px;
    box-shadow: inset 0 0 25px #bba283;
    & .pagenumber {   /* page numbers at corners */
        border-radius: 100%;
        text-align: center; 
        padding: 3px;
    }
    & .pagenumber:hover {
        color: #000;
        background-color: salmon;
    }
}

/*  MOBILE VIEW   */

/* @media (prefers-color-scheme: dark) {
  body {
    background-color: #1b1b1b;
  }
  .currydex {
    color: white;
    border: 2px solid #434343;
    box-shadow: inset 0 0 40px #3c3c3c;
    background: linear-gradient(90deg,#545454 0%, rgba(94, 94, 94, 1) 20%, rgba(77, 77, 77, 1) 48%, rgba(64, 64, 64, 1) 49%, rgba(54, 54, 54, 1) 49%, rgba(64, 64, 64, 1) 50%, rgba(94, 94, 94, 1) 59%, rgba(84, 84, 84, 1) 75%, rgba(84, 84, 84, 1) 85%, rgba(84, 84, 84, 1) 100%);  
    }
    .cover {
        box-shadow: inset 0 0 40px #69290d;
        border: 2px solid #111111;
    }
} */