@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
	box-sizing: border-box;
	margin: 0; padding: 0;
}	
html {
	/* font: clamp(0.9rem, 1.5vw, 0.98rem)/1.44 Georgia,serif; */
	/* background-color: #a7471f; */
	color: hsl(25,50%,5%);
}
body {
	width: min(90rem, 100%);
	margin: 0 auto;
	padding: 1em 0.8em;
	overflow-x: hidden;
}
/* ************************** BOOK MOBILE DISPLAY ********************* */
.bookmat {
	box-sizing: content-box;
	position: relative;
	display: flex;

}

.clickhere{
	position: absolute;
	top: 70%;
	left: 54%;
	transform: translate(-50%);
	height: 120px;
	z-index: 1;
}

.clickhere img{
	height: 100%;
	width: 100%;
}

.homelink{
	position: fixed;
	bottom: 0;
	left: 2%;
	
	height: 220px;
}

.homelink img{
	height: 100%;
	width: 100%;

}

.preface {
	margin: 2em 0.3rem;
	/* font: 0.9em/1.44 Georgia,serif; */
}

.preface h1{
	font-family: 'Caveat Brush', cursive;
	font-size: 3rem;
	color: #a7471f;
	text-shadow: 0px 3px 0px #b2a98f,
	0px 14px 10px rgba(0,0,0,0.15),
	0px 24px 2px rgba(0,0,0,0.1),
	0px 34px 30px rgba(0,0,0,0.1);
}

.preface ul{
	display: flex;
	flex-wrap: wrap;
	width: 70%;
	margin-top: 3rem;
}


.preface li{
	/* font-family: 'Caveat Brush', cursive; */
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	margin: 0.5rem;
	font-size: 1rem;
	width: fit-content;
	list-style: none;
	color: #fff;
	border: 2px solid #000000;
	background-color: #000000;
	padding: 0.3rem 0.7rem;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	
}

.book {
	position: relative;
	/* font: 0.8em/1.2 Georgia,serif; */
	/* background-color: hsl(20,50%,95%); */
	box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
	z-index: 3;
}



.book::before { 
	content: '‹';
	position: absolute;
	padding: 0 0.4em 0.13em;
	top: -0.07em; right:-0.2em;
	font-size: 12em;
	line-height: 1;
	color: hsla(20,50%,35%,0.2);
	transform: rotate(0deg);
	transition: transform 0.5s;
}

.pagetext{
	margin: auto 1.5rem;
	overflow: hidden;
}

.pagetext h2{
    font-family: 'Caveat Brush', cursive;
    font-size: 2.6rem;
	text-align: center;
}

.pagetext ul li img{
	height: 20px;
	margin-right: 0.3rem;

}

.pagetext h2 span{
    font-size: 1.2rem;
    color: #583c00;
}

.pagetext ul{
	margin-top: 1rem;
}


.pagetext ul li span{
    margin-right: 1rem;
    font-size: 1rem;

}

.pagetext ul li{
    list-style: none;
    text-align: left;
    margin-bottom: 1rem;
    font-size: 1.1rem;
	font-family: 'Old Standard TT', serif;
	
}

.lastpagetext{
	/* height: 100%;
	
	width: 100%; */
	margin: auto;
	display: block;
	position: relative;
}

 h3{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 6rem;
	font-family: 'Caveat Brush', cursive;
}

.jungle-activity{
    margin-left: 2rem;

}


.bookpage {	
	pointer-events: none;
	color: hsl(20,50%,15%);
	background-color: hsl(20,50%,95%);
	padding: 0.4em; margin-bottom: -2em; 
	line-height: 0;
	opacity:0; 
	transition: line-height 0.5s 0.6s, opacity 1s, margin-bottom 0.5s 0.6s;
	background-size: cover;
	overflow: hidden;
}


.arrownext{
	position: absolute;
	bottom: 5%;
	right: 0%;
}

.front.cover {
	margin-bottom:0; 
	line-height:1.2;
	opacity:1;
}
.bookpage p, .bookpage footer {
	padding: 0.3em 2em;
	hyphens: auto;
	text-align: justify;
}
.bookpage p {
	pointer-events: none;
}
.bookpage .booktitle {
	margin-top: 4rem;
	font-size: 2em;
	text-align: left;
	color: #000000;
	font-family: 'Caveat Brush', cursive;
}
.pagetext::first-letter {
	font-size: 2em;
}
.unrolled.book::before {
	transform: rotate(-90deg);
}
.unrolled.book>.bookpage {
	line-height:1.2;
	margin-bottom:0;
	opacity:1;
	transition: line-height 1s, opacity 0.5s 0.6s, margin-bottom 1s;
}
/* ************************** BOOK MOBILE RTL ********************* */
.rtl .bookpage .booktitle {
	text-align: right;
}
.rtl .book::before {
	left: -0.2em; right:auto;
	transform: rotate(180deg);
}
.rtl .unrolled.book::before {
	transform: rotate(270deg);
}

@media (min-width:700px) {
/* ************************** BOOK DESKTOP DISPLAY ********************* */
.bookmat {
	display: flex;
	align-items: center;
	/* min-height: 30rem; */
}
.preface {
	width: 80%;
	margin: 0 5%;
	pointer-events: none;
}
.book {
	counter-reset: pagecounter;
	position: absolute;
	pointer-events: none;
	top: 420px;
    bottom: 0;
    left: 60%;
	margin: auto;
	width: 800px;
	height: 500px;
	perspective: 175rem;
	transform: rotate(-15deg) scale(0.8) translate(-50% , -50%);
	transition:  1s 3s;
	background-color: transparent;
	box-shadow: none;
    
}




.opened.book {
	transform: rotate(0);
	transition: transform 3s;
    left: 50%;
    bottom:40%;
    transform: translate(-50%, -35%);
    transition: 2s;
}



.book::before { 
	content:none;
}
.bookpage { 
	counter-increment: pagecounter;
	position: absolute;
	top: 0.5em; bottom:0.5em;	
	margin: 0; padding:0;
	width: 50%;
	line-height: 1.2;
	opacity:1;
	backface-visibility: hidden;
	cursor: pointer;
	user-select: none;

	transform-style: preserve-3d;
	transition: transform 3s;
}
.back {
	transform-origin: 100% 0;
	transform: rotateY(180deg);
	left: 0;
}


.front {
	transform-origin: 0 0;
	transform: rotateY(0deg);
	right: 0;
}
.back.flipped {
	transform: rotateY(0deg);
}
.front.flipped {
	transform: rotateY(-180deg);
}



.clickable {
	pointer-events:all;
}
.cover, .lastpage {
	top: 0; bottom: 0;
	width:calc(50% + 0.5em);
	border-color: hsl(20,50%,25%);
	border-style: solid;
}
.front.cover { 
	pointer-events: all;
	right: -0.5em;
	border: none;
	margin-left: -0.1em;
	padding: 0.5em 0.25em;
	color: hsl(20,10%,80%);
	/* background-color: hsl(20,50%,25%); */
	box-shadow: rgba(0, 0, 0, 0.534) -5px 2px, rgba(49, 49, 49, 0.637) -10px 5px, rgba(46, 46, 46, 0.637) -15px 10px, rgba(46, 46, 46, 0.836) -20px 15px, rgb(0, 0, 0) -25px 20px;
	border-radius: 0 5px 5px 0;
	background-size: cover;
	background-position: center;
	overflow: visible;
}

.front.cover img{
	object-fit: cover;
	width: 100%;
	height: 100%;

 }
.back.cover {
	left:-0.5em;
	border-width: 0.5em 0 0.5em 0.5em;
	border-radius: 5px 0 0 5px;
	background-size: cover;
}
.lastpage {
	right:-0.5em;
	border-width: 0.5em 0.5em 0.5em 0;
	border-radius: 0 5px 5px 0;
}
.bookpage .booktitle {
	padding: 3em 0 0 1.5em;
}
.bookpage footer {
	position: absolute;
	bottom: 0;
	margin: 4em 2em;
	font-size: 0.9em;
}
/* .bookpage:nth-child(n+3)::before {
	content: counter(pagecounter); 
	display: block;
	padding: 1em 2em;
}
.bookpage:nth-child(odd)::before {
	text-align:right;
} */
/* ************************** BOOK DESKTOP RTL ********************* */
.bookmat.rtl {
	flex-direction: row-reverse;
}
.rtl .preface {
	text-align: right;
}
.rtl .book {
	transform: rotate(-20deg) scale(0.5);
}
.rtl .opened.book {
	transform: rotate(0);
}
.rtl .back {
	transform-origin: 0 0;
	transform: rotateY(-180deg);
	left: auto; right: 0;
}
.rtl .front {
	transform-origin: 100% 0;
	transform: rotateY(0deg);
	left: 0;
}
.rtl .back.flipped { 
	transform: rotateY(0deg);
}
.rtl .front.flipped {
	transform: rotateY(180deg);
}
.rtl .front.cover {
	margin-right: -0.1em;
	border-radius: 5px 0 0 5px;
	box-shadow: inset -3em 0 hsl(0,0%,0%);
}
.rtl .lastpage {
	left:-0.5em;
	border-width: 0.5em 0 0.5em 0.5em;
	border-radius: 5px 0 0 5px;
}
.rtl .back.cover {
	left: auto; right:-0.5em;
	border-width: 0.5em 0.5em 0.5em 0;
	border-radius: 0 5px 5px 0;
}
.rtl .bookpage:nth-child(even)::before {
	text-align:right;
}
.rtl .bookpage:nth-child(odd)::before {
	text-align:left;
}
.rtl .bookpage .booktitle {
	padding: 3em 1.5em 0 0;
}

}


.book-button{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
    z-index: 999;
}

.button--piyo{
    --main_color : #f4cf47 ;
    --sub_color1 : #f4e19c ;
    --sub_color2 : #ff8108 ;
    --base_color : #000 ;
    --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
    --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
    --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
}

.button{
    position : fixed ;
	bottom: 3%;
	left: 50%;
	transform: translate(-50% ,0);
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width: 247px;
    height: 48px;
    box-sizing : border-box ;
    text-decoration : none ;
    border : solid 3px #000 ;
    border-radius : 40px ;
    background : var(--main_color) ;
    font-family: 'Fredoka One', cursive;
}
.button::before{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    right : 20px ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 24px ;
    height : 24px ;
    background : var(--base_color) ; 
    transition : all ease .2s ;
}
.button__wrapper{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    position : relative ;
    z-index : 1 ; 
    width : 100% ;
    height : 100% ;
    border-radius : 40px ;
    overflow : hidden ;
}
.button__wrapper::before,
.button__wrapper::after{
    transition : all .5s ease ;
}

.button--piyo::before {
    clip-path: path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z');
}
.characterBox{
    position : absolute ;
    top : -54px ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    display : flex ;
    justify-content : space-between ;
    align-items : flex-end ;
    width : 180px ;
    height : 56px ;
}
.button__text{
    position : relative ;
    z-index : 3 ;
    font-size : 32px ;
    letter-spacing : 4px ;
    color : var(--base_color) ;
    transition : all .3s ease ;
}
.character{
    position : relative ;
    width : 56px ;
    height : 36px ;
    box-sizing : border-box ;
    border : solid 3px #000 ;
    background : var(--main_color) ;
    border-radius : var(--border_radius1) ;
    animation : sleep 1s ease infinite alternate ;
}
.character::before{
    content : '' ;
    position : absolute ;
    top : -12px ;
    left : 22px ;
    width : 12px ;
    height : 12px ;
    background : #000 ;
    clip-path : path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z') ;
}
.character__face{
    position : absolute ;
    z-index : 2 ;
    top : 15px ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 12px ;
    height : 6px ;
    background : var(--sub_color2) ;
    border-radius : 50% 50% 50% 50% / 78% 78% 22% 22% ;
    transition : .2s ;
}
.character__face::before,
.character__face::after{
    content : '' ;
    position : absolute ;
    top : -4px ;
    width : 8px ;
    height : 2px ;
    border-radius : 4px ;
    background : #000 ;
}
.character__face::before{
    left : -5px ;
}
.character__face::after{
    right : -5px ;
}

.button--piyo .button__wrapper::before,
.button--piyo .button__wrapper::after{
    content : '' ;
    position : absolute ;
    bottom : 0 ;
    width : 130px ;
    height : 38px ;
    background : var(--sub_color1) ;
    clip-path : path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z') ;
}
.button--piyo .button__wrapper::before{
    left : 0 ;
}
.button--piyo .button__wrapper::after{
    right : 0 ;
    transform : rotateY(180deg) ;
}

.button:hover .button__wrapper::before{
    transform : translateX(-12px) ;
}
.button:hover .button__wrapper::after{
    transform : rotateY(180deg) translateX(-12px) ;
}
.button:hover .button__text{
    letter-spacing : 6px ;
}
.button:hover::before{
    right : 14px ;
}
.button:hover .wakeup{
    animation : wakeup .2s ease ;
    animation-fill-mode : forwards ;
}
.button:hover .wakeup .character__face{
    top : 20px ;
}
.button:hover .wakeup .character__face::before,
.button:hover .wakeup .character__face::after{
    animation : eye 5s linear infinite ;
}
.button:hover .wakeup:nth-child(2) .character__face::before,
.button:hover .wakeup:nth-child(2) .character__face::after{
    animation : eye_2 5s linear infinite ;
}

@keyframes sleep{
    0%  {
        height : 36px ;
        border-radius : var(--border_radius1) ;
    }
    100%{
        height : 32px ;
        border-radius : var(--border_radius2) ;
    }
}
@keyframes wakeup{
    0%  {
        height : 32px ;
        border-radius : var(--border_radius2) ;
    }
    100%{
        height : 56px ;
        border-radius : var(--border_radius3) ;
    }
}
@keyframes eye {
    0%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    30%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    32%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    34%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    70%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    72%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    74%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    76%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    78%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    100%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
}
@keyframes eye_2 {
    0%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    10%{
        transform : translateX(0);
    }
    12%{
        transform : translateX(3px);
    }
    20%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    22%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    24%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    25%{
        transform : translateX(3px);
    }
    27%{
        transform : translateX(0);
    }
    74%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
        transform : translateX(0);
    }
    76%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
        transform : translateX(3px);
    }
    78%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    80%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    82%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    85%{
        transform : translateX(3px);
    }
    87%{
        transform : translateX(0);
    }
    100%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
        transform : translateX(0);
    }
}
@keyframes body_hoo{
    0%  {
        bottom : 2px ;
    }
    100%{
        bottom : 0 ;
    }
}
@keyframes body_hoo_wakeup{
    0%  {
        bottom : 2px ;
    }
    100%{
        bottom : 6px ;
    }
}
@keyframes face_pen{
    0%  {
        height : 14px ;
    }
    100%{
        height : 10px ;
    }
}
@keyframes face_pen_wakeup{
    0%  {
        height : 14px ;
    }
    100%{
        height : 28px ;
    }
}





/* pop up form */
 /* pop up form start */
    /*Dialog Styles*/
    #dialog {
        padding: 50px 100px;
  border: 2px solid black;
  box-shadow: 15px 15px 1px #f4cf47, 15px 15px 1px 2px black;
        background: #ffffff;
       
        animation: fadeIn 1s ease both;
      margin: auto;
      overflow: hidden;
      align-items: center;
      justify-items: center;
    
      
       
        &::backdrop {
            animation: fadeIn 1s ease both;
            background: #FFF7D4be;
            z-index: 2;
            backdrop-filter: blur(2px);
        
        
        
        }
        .x {
            filter: grayscale(1);
            border: none;
            background: none;
            position: absolute;
            top: 15px;
            right: 10px;
            transition: ease filter, transform 0.3s;
            cursor: pointer;
            transform-origin: center;
            &:hover {
                filter: grayscale(0);
                transform: scale(1.1);
            }
        }


        .formhead{
            text-align: center;
            font-size: 2rem;
            margin-bottom: 1rem;
        }
    

        .contact-input{
            display: block;
            width: 100%;
            font-size: 14pt;
            line-height: 28pt;
            font-family: "Fjalla One";
            margin-bottom: 28pt;
            border: none;
            border-bottom: 5px solid black;
            background: #f8f4e5;
            min-width: 250px;
            padding-left: 5px;
            outline: none;
            color: black;
          }
          
            .contact-input:focus {
            border-bottom: 5px solid #f4cf47;
          }
          
          .submit-buttom{
            display: block;
            margin: 0 auto;
            line-height: 28pt;
            padding: 0 20px;
            background: #f4cf47;
            letter-spacing: 2px;
            transition: 0.2s all ease-in-out;
            outline: none;
            border: 1px solid black;
            box-shadow: 3px 3px 1px 1px #95a4ff, 3px 3px 1px 2px black;
          }
          .submit-buttom:hover {
            background: black;
            color: white;
            border: 1px solid black;
          }
          
          ::selection {
            background: #f4cf47;
          }
          
           .contact-input:-webkit-autofill,
           .contact-input:-webkit-autofill:hover,
           .contact-input:-webkit-autofill:focus {
            border-bottom: 5px solid #95a4ff;
            -webkit-text-fill-color: #2A293E;
            -webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset;
            transition: background-color 5000s ease-in-out 0s;
          }



    }