/*================================= 1 Reset Css ( #res ) =================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{text-decoration:none;outline:0;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#D46300;transition:all 0.5s ease 0s;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #ababab;margin:50px auto; padding:0}

/*================================= 2 Font Face ( #face ) =================================*/
@font-face {
    font-family: 'Super-Cottage';
    src: url('../fonts/Super-Cottage.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Public Sans", sans-serif;
}

/*================================= 3  Inputs ( #input ) =================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {color:#343434; font-style:normal;}
:-moz-placeholder {color:#343434; font-style:normal;}
::-moz-placeholder {color:#343434; font-style:normal;}
:-ms-input-placeholder {color: #343434; font-style:normal;}
button::-moz-focus-inner {border: 0}
:focus {outline:none;border-color: var(--primary_color) !important;}
::-moz-focus-inner {border:0;}

ul{list-style:none; margin:0; padding:0;}
li{list-style:none;}
img{max-width: 100%;}

.main{background-image: url('../images/coloring-game/coloring-book-bg.jpg');background-size: cover;background-repeat: no-repeat;height: 100vh;padding: 40px;background-position: bottom;overflow-y: auto;}
.main_wrapper{max-width: 1360px;display: flex;justify-content: center;align-items: center;height: 100%;width: 80%;background-color: #fff;margin-right: auto;margin-left: auto;box-shadow: 6px 5px 16px rgba(0, 0, 0, 0.36);position: relative;right: 70px;}

#parentContainer{display: flex;align-items: center;}
.logo{max-width: 640px;margin: -10% auto 30px;display: block;}
.bird_img{position: absolute;width: 340px;left: 0;filter: brightness(0.9) contrast(1.5);}
.tree_img{position: absolute;bottom: 0;right: 70px;}
.play_btn{position: absolute;right: 0;left: 0;margin: 0 auto 20px;bottom: 10%;max-width: 150px;cursor: pointer;transition: transform 0.3s ease;}
.play_btn:hover {transform: scale(1.1);}

.sunlight {position: absolute;top: 0;right: 0%;transform: translateX(-50%);width: 300px;height: 300px;background: white;border-radius: 50%;filter: blur(50px);opacity: 0.9;animation: sunlightPulse 5s infinite ease-in-out;pointer-events: none;}
@keyframes sunlightPulse {
    0%, 100% {opacity: 0.9;transform: translateX(-50%) scale(0.5);}
    50% {opacity: 1;transform: translateX(-50%) scale(1.2);}
}

.tap{position: absolute;top: 0;left: -60px;pointer-events: none;}
.u_pin{position: absolute;right: -20px;bottom: -27px;pointer-events: none;}
.coloring_img{margin: 0 auto;padding: 30px;display: inline-block;height: 100%;width: 100%;}

.stationary_box{position: fixed;right: 0;height: 80%;width: 220px;top: 50%;transform: translateY(-50%);}
.color_wrapper{position: relative;height: 93%;right: 0;overflow-y: auto;top: 50%;transform: translateY(-50%);
    background-image: -webkit-linear-gradient(-170deg, rgb(249, 194, 235) 0%, rgb(136 180 255) 100%);
    border-radius: 25px 0 0 25px;overflow-x: hidden;
    box-shadow: inset 0.9px 0.9px 0.9px 0 rgba(255,255,255,0.5), inset -0.9px -0.9px 0.9px 0 rgba(0,0,0,0.5);
    transform-origin: right center;
    animation: slideInRight 0.3s ease-out forwards;
    animation-delay: 0.5s;
}
@keyframes slideInRight {
    0% {right: -40px;opacity: 0;}
    100% {right: 0;opacity: 1;}
}
.glitter_wrapper{position: absolute;overflow-y: auto;top: 50%;transform: translateY(-50%);left: 60px;width: 100%;height: 93%;background-image: -webkit-linear-gradient(-170deg, rgb(255 255 255) 0%, rgb(187 212 255) 100%);border-radius: 25px 0 0 25px;box-shadow: inset 0.9px 0.9px 0.9px 0 rgba(255,255,255,0.5), inset -0.9px -0.9px 0.9px 0 rgba(0,0,0,0.5);overflow-x: hidden;transform-origin: right center;animation: slideInLeft 0.3s ease-out forwards;}
@keyframes slideInLeft {
    0% {left: 100%;opacity: 0;}
    100% {left: 60;opacity: 1;}
}

.crayons{position: absolute;top: 20px;width: 100%;left: 20px;height: 100%;}
.crayons li:not(:first-child){display: inline-flex;margin-top: -3px;}
.crayons li:last-child{margin-bottom: 20px;}
.crayons li{filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));}
@keyframes slideInFromRight {
    from {transform: translateX(100%);opacity: 0;}
    to {transform: translateX(0%);opacity: 1;}}
  
.img-slide-in {animation: slideInFromRight 0.4s ease-out;}

.crayons.brush li{margin: 2px 0;}
.crayons li.selected{filter: drop-shadow(4px 6px 5px rgba(0,0,0,0.5));margin-left: -10px;}

.crayons li:nth-child(2) img{filter: hue-rotate(323deg) saturate(22);}
.crayons li:nth-child(3) img{filter: hue-rotate(321deg) saturate(66);}
.crayons li:nth-child(4) img{filter: hue-rotate(315deg) saturate(50);}
.crayons li:nth-child(5) img{filter: hue-rotate(189deg) saturate(9) brightness(1) sepia(0%);}
.crayons li:nth-child(6) img{filter: hue-rotate(190deg) saturate(15);}
.crayons li:nth-child(7) img{filter: hue-rotate(175deg) saturate(6) brightness(50);}
.crayons li:nth-child(8) img{filter: hue-rotate(174deg) saturate(45);}
.crayons li:nth-child(9) img{filter: hue-rotate(143deg) saturate(2.9) contrast(1.2) brightness(1.1);}
.crayons li:nth-child(10) img{filter: hue-rotate(80deg) saturate(10);}
.crayons li:nth-child(11) img{filter: hue-rotate(80deg) saturate(0.3) brightness(6.5);}
.crayons li:nth-child(12) img{filter: hue-rotate(32deg) saturate(1.9) contrast(0.6) brightness(0.9);}
.crayons li:nth-child(13) img{filter: hue-rotate(15deg) saturate(1.3);}
.crayons li:nth-child(14) img{filter: hue-rotate(30deg) saturate(1) brightness(1.8);}
.crayons li:nth-child(15) img{filter: hue-rotate(30deg) saturate(1);}
.crayons li:nth-child(16) img{filter: hue-rotate(90deg) saturate(0.3);}
.crayons li:nth-child(17) img{filter: hue-rotate(125deg) saturate(0.3) brightness(2.0);}
.crayons li:nth-child(18) img{filter: hue-rotate(172deg) saturate(10) brightness(1.8) contrast(0.5);}
.crayons li:nth-child(19) img{filter: hue-rotate(143deg) saturate(0.4) brightness(7.9);}
.crayons li:nth-child(20) img{filter: hue-rotate(143deg) saturate(0.4) brightness(8.9);}
.crayons li:nth-child(21) img{filter: hue-rotate(0deg) saturate(0) brightness(0);}
.crayons li:nth-child(22) img{filter: hue-rotate(0deg) saturate(0) brightness(15);}
.crayons li:nth-child(23) img{filter: hue-rotate(0deg) saturate(0) brightness(5);}

.glitter_wrapper .crayons li:nth-child(8) img{filter: hue-rotate(174deg) saturate(50) contrast(0.9);}
.glitter_wrapper .crayons li:nth-child(9) img{filter: hue-rotate(143deg) saturate(1.9) contrast(1.2) brightness(1.1);}
.crayons.brush li:nth-child(9) img{filter: hue-rotate(179deg) saturate(82.9) contrast(5.2) brightness(5.1);}
.crayons.brush li:nth-child(19) img{filter: hue-rotate(131deg) saturate(0.5) brightness(16.9) contrast(0.9);}
.crayons.brush li:nth-child(20) img{filter: hue-rotate(131deg) saturate(0.5) brightness(14.9) contrast(1.9);}
.crayons.brush li:nth-child(22) img{filter: hue-rotate(0deg) saturate(0) brightness(15) contrast(2.5);}


.action_btn{position: absolute;height: 100%;right: 0;top: 50%;transform: translateY(-50%);pointer-events: none;}
.action_btn.pointer_auto .action_btn_wrapper{pointer-events: all;}
.color-box{height: 100%;filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.8));opacity: .87;margin-right: -1px;}
.action_btn_wrapper{position: absolute;top: 0;right: 10px;padding: 10px 0;display: inline-flex;flex-direction: column;align-items: flex-start;gap: 10px;height: 100%;overflow-y: auto;justify-content: space-around;scrollbar-width: none;-ms-overflow-style: none;}
.action_btn_wrapper > p{display: flex;align-items: center;justify-content: center;transition: all 0.5s ease;border-radius: 50%; border: 2px inset transparent;cursor: pointer;}
.action_btn_wrapper p:hover{border-color: #fff;}
.action_btn_wrapper::-webkit-scrollbar {display: none;}
.action_btn_wrapper p.active_tool{border-color: #fff;}


.pattern_wrapper{position: fixed;padding: 10px;background-color: #513DA6;border-radius: 10px;height: 100%;overflow-y: auto;top: 0;text-align: center;z-index: 2;margin-bottom: 20px;right: calc(100% + 20px);visibility: hidden;opacity: 0;transition: all 0.5s ease;}
.pattern_arrow{width: 0px;height: 0px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #513DA6;position: fixed;top: 40px;right: calc(100% + 10px);visibility: hidden;opacity: 0;transition: all 0.5s ease;}
.pattern_wrapper div {display: inline-block;overflow: hidden;border-radius: 10px;width: 180px;height: 180px;border-radius: 10px;border: 3px solid #fff;margin: 5px;cursor: pointer;}
.pattern_wrapper div img{transition: all 0.5s ease;height: 100%;object-fit: cover;}
.pattern_wrapper div:hover img{transform: scale(1.2);}
.pattern_wrapper::-webkit-scrollbar {display: none;}
.pattern_wrapper.active{visibility: visible;opacity: 1;}
.pattern_wrapper.active + .pattern_arrow{visibility: visible;opacity: 1;}

#fullscreen{position: absolute;top: 2%;right: 2%;cursor: pointer;width: 60px;}
.expand_icon, .compress_icon{display: none;}
.expand .expand_icon{display: block;}
.compress .compress_icon{display: block;}

.top_button{position: fixed;top: 10px;left: 10px;display: flex;gap: 10px;z-index: 99;}
.top_button img{width: 40px;cursor: pointer;}


/* main_page */

.middle_page{display: none; position: fixed;width: 100%;height: 100%;top: 0;left: 0;padding: 40px;overflow-y: auto;}
.middle_page .top_button{top: 20px;left: 20px;}
h1{font-family: MarkoOne-Regular;font-size: 86px;text-align: center;color: #2c759d;margin-bottom: 30px;text-shadow: 0 9.36px 8.896px #0a3b4f52, 0 -2px 1px #dff5ff;}

.bg-element{position: fixed;animation: float 4s ease-in-out infinite alternate;}
.bg-element.one{bottom: 10%;left: 10%;animation-delay: 0s;}
.bg-element.two{bottom: 30%;right: 35%;animation-delay: 1s;}
.bg-element.three{top: 40%;left: 35%;animation-delay: 2s;}

@keyframes float {
    0% {transform: translate(0px, 0px);}
    25% {transform: translate(3px, -2px);}
    50% {transform: translate(-2px, 3px);}
    75% {transform: translate(2px, -3px);}
    100% {transform: translate(-3px, 2px);}
  }
.coloring_images{display: flex;flex-wrap: wrap;max-width: 1360px;margin: 0 auto;padding: 16px;justify-content: center;gap: 20px 50px;}
.coloring_images a{cursor: pointer;text-align: center;flex: 0 0 25%;max-height: 240px;position: relative;display: flex;align-items: center;justify-content: center;z-index: 1;}
.coloring_images a:after{content: '';position: absolute;height: 100%;width: 100%;left: 0;top: 0;z-index: -1;background-image: url(../images/coloring-game/level_board.png);background-repeat: no-repeat;background-size: contain;background-position: center;}
.coloring_images a img{transition: all 0.5s ease;height: 60%;}
.coloring_images a:hover{transform: scale(1.1);}
.coloring_images a.selected::before{content: '';background-image: url(../images/coloring-game/rainbow.png);position: absolute;width: 123px;height: 107px;right: -20px;top: -20px;background-size: contain;background-repeat: no-repeat;pointer-events: none;animation: wiggleScale 3s ease-in-out infinite;transform-origin: center center;}
@keyframes wiggleScale {
    0% {transform: rotate(0deg) scale(1);}
    25% {transform: rotate(2deg) scale(1.02);}
    50% {transform: rotate(-2deg) scale(0.98);}
    75% {transform: rotate(1.5deg) scale(1.01);}
    100% {transform: rotate(0deg) scale(1);}
  }

#childContainer{display: none;background-image: url(../images/coloring-game/inner-page-bg.jpg);}

@media (min-width:1920px){
    h1{margin-bottom: 60px;}
    .stationary_box{width: 260px;}
    .main_wrapper{right: 30px;}
}
@media (max-width:1560px) {
    #muteButton img{width: 35px;}
    .stationary_box{width: 230px;height: 70%;}
    h1{font-size: 55px;}
}

@media (max-width:1280px) and (min-width:1024px) {
    .main{padding: 60px;}
    .main_wrapper{right: 100px;}
    .tap{width: 120px;}
    .crayons.brush li img{width: 150px;}
    .logo{margin-top: -30%;max-width: 530px;}
    .bird_img{bottom: 170px;}
    .tree_img{right: 0;width: 250px;}
    .sunlight{width: 260px;height: 260px;}
    .coloring_images a{max-height: 170px;}
    .coloring_images a.selected::before{width: 93px;height: 77px;right: -10px;}
}

@media (max-width:1023px) and (min-width:768px){
    .logo{max-width: 340px;}
    h1{font-size: 45px;}
    .coloring_images{gap: 20px 30px;}
    .coloring_images a{flex: 0 0 25%;max-height: 110px;}
    .coloring_images a.selected::before{width: 73px;height: 67px;right: -10px;}
    .main_wrapper{gap: 30px;}
    .stationary_box{width: 150px;height: 80%;}
    .glitter_wrapper{left: 50px;}
    .crayons{left: 15px;}
    .crayons.brush li img{width: 120px;}
   
    .action_btn{align-self: flex-start;}
    .pattern_wrapper div{width: 100px;height: 100px;}
    .pattern_arrow{top: 30px;}
    .expand_icon, .compress_icon{width: 45px;}
    #muteButton{top: 10px;right: 10px;}
    #muteButton img{width: 30px;}
    .top_button img{width: 25px;}
    #fullscreen{width: 30px;}
    .tap{width: 70px;left: -40px;}
    .u_pin{width: 50px;bottom: -25px;}
    .action_btn_wrapper{width: 40px;right: 0;}
    .action_btn_wrapper > p img{width: 100%;height: 100%;}
    .color_wrapper, .glitter_wrapper{border-radius: 15px 0 0 15px;}
}

@media (max-width: 767px){
    .logo{max-width: 270px;margin-bottom: 0;}
    .bg-element{width: 50px;}
    .bg-element.one{bottom: 10%;left: 10%;}
    .bg-element.two{bottom: 20%;right: 15%;}
    .bg-element.three{top: 40%;left: 35%;}
    .coloring_images{gap: 20px;}
    
    .coloring_images a.selected::before{width: 73px;height: 67px;}
    .main_wrapper{gap: 30px;}
    .stationary_box{width: 130px;height: 80%;}
    .glitter_wrapper{left: 50px;}
    .crayons{left: 15px;}
    .crayons.brush li img{width: 90px;}
   
    .pattern_wrapper div{width: 70px;height: 70px;}
    .pattern_arrow{top: 30px;}
    h1{font-size: 33px;}
    .expand_icon, .compress_icon{width: 26px;}
    .middle_page .top_button {top: 15px;left: 15px;}
    #muteButton{top: 10px;right: 10px;}
    #muteButton img{width: 25px;}
    .coloring_img{padding: 20px;}
    .top_button img{width: 25px;}
    #fullscreen{width: 30px;}
    .tap{width: 70px;left: -40px;}
    .u_pin{width: 50px;bottom: -25px;}
    .action_btn_wrapper{width: 40px;right: 0;}
    .action_btn_wrapper > p img{width: 100%;height: 100%;}
    .color_wrapper, .glitter_wrapper{border-radius: 15px 0 0 15px;}
}
@media (height: 540px) and (width: 720px){
    .stationary_box {
        width: 150px;
        height: 70%;
    } 
}
@media (max-width: 1024px) and (orientation:portrait){
    .logo{margin-top: -70%;max-width: 510px;}
    .sunlight{width: 240px;height: 240px;}
    .tree_img{right: 0;width: 260px;}
    .play_btn{bottom: 20%;}
}
@media (max-width: 1023px) and (orientation:portrait){
    .coloring_images a {flex: 0 0 40%;max-height: 170px;}
}
@media (max-width: 767px) and (orientation:portrait){
    #parentContainer{align-items: flex-start;background-position: bottom right;}
    .logo{margin-top: 10%;width: 100%;}
    .tree_img{right: 0;width: 130px;}
    .play_btn{max-width: 90px;bottom: 20%;}
    .bird_img{bottom: 40%;width: 210px;}
    .sunlight{width: 180px;height: 180px;left: 0;}
    .coloring_images a{flex: 0 0 83%;max-height: 120px;max-width: 210px;}
    .coloring_images a.selected::before{right: 0;}
}
@media (max-width: 1023px) and (orientation:landscape){
    .tree_img{width: 120px;}
    .play_btn{max-width: 80px;}
    .bird_img{width: 180px;}
    .sunlight{width: 100px;height: 100px;}
    .logo{margin-top: -20%;}
    .coloring_images a{max-height: 130px;}
    .coloring_images a.selected::before{right: 0;}
    
}
@media (max-width: 767px) and (orientation:landscape){
    .coloring_images a{flex: 0 0 35%;max-height: 130px;}
    .coloring_images a img{height: 65%;}
}
@media (width:882px) and (height:344px){
    .stationary_box {width: 140px;height: 80%;}
}
.rotate-message {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px;border-radius: 10px;z-index: 1000;text-align: center;font-size: 18px;line-height: 25px;}
.portrait .main_wrapper { transform: rotate(90deg); transform-origin: center;width: 100vh;height: 100vw;}
.portrait .stationary_box,.portrait .action_btn,.portrait .color_wrapper,.portrait #fullscreen,.portrait .main_wrapper, .portrait #childContainer .top_button{display: none;}
.portrait .main{overflow: hidden;}
.pattern_wrapper { display: none;}
.pattern_wrapper.active {display: block;}
.hide-on-print {display: none !important;}
.hidden {visibility: hidden;}

@media print {
    @page {size: landscape;}
    .main_wrapper {margin: 0 auto;}
    .hide-on-print {display: none !important;}
}