/*================================= 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: Bahnshrift;
    src: url(../fonts/BAHNSCHRIFT.woff);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Bahnshrift;
}

/*================================= 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: #343434 !important;}
::-moz-focus-inner {border:0;}

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

.main{background-image: url(../Images/memory-game/main-page-bg.svg);background-repeat: no-repeat;background-size: cover;height: 100vh;overflow: hidden;background-position: center bottom;padding: 60px;position: relative;}
.volume_btn{position: absolute;top: 30px;right: 30px;cursor: pointer;}
.level_wrapper div img:active, .volume_btn:active, .btn_wrapper img:active {transform: skewY(5deg) scale(0.8);}

.logo{max-width: 500px;margin: 40px auto 60px;display: block;}
.bird{position: absolute;left: 150px;bottom: 80px;max-width: 150px;z-index: 1;}
.tree{position: absolute;left: -70px;bottom: -10px;max-width: 356px;}

.level_wrapper{max-width: 500px;display: flex;align-items: center;justify-content: center;gap: 30px 60px;margin: 0 auto;flex-wrap: wrap;padding-top: 40px;}
.level_wrapper div{position: relative;cursor: pointer;}
.level_wrapper div img{width: 62px;height: auto;}
.level_wrapper .unlock::after{content: '';position: absolute;width: 60px;height: 80px;background-image: url(../images/memory-game/unlock.svg);left: 0;top: 0;background-repeat: no-repeat;}
.level_wrapper .unlock img{opacity: 0;}

.main_game{background-image: url(../Images/memory-game/game-bg.jpg);background-repeat: no-repeat;height: 100svh;height: 100dvh;padding: 60px;background-size: cover;background-position: left bottom;display: flex;align-items: center;}
.btn_wrapper{position: absolute;top: 30px;left: 0;width: 100%;display: flex;justify-content: space-between;padding: 0 15px;}
.btn_wrapper img{cursor: pointer;margin-right: 15px;}

.tag_wrapper{display: flex;gap: 30px;}
.tag_wrapper div{width: 200px;background: linear-gradient(180deg, #DE8807 0%, #E9B022 100.13%);border-radius: 100px;padding: 0 7px 13px;box-shadow: 0 8px 0 #aa7313;align-self: center;}
.tag_wrapper p{color: #324701;background: linear-gradient(180deg, #AFEC03 0%, #A4DF03 21.44%, #87BE05 60.69%, #649706 99.95%);box-shadow: 0 8px 0 #324701;padding: 5px 10px;border-radius: 100px;margin-top: -5px;font-size: 20px;text-transform: uppercase;font-weight: 600;position: relative;overflow: hidden;}
.tag_wrapper p::after{content: '';position: absolute;top: 0;left: 0;height: 50%;width: 100%;background-color: rgba(255, 255, 255, 0.2);pointer-events: none;}
.tag_wrapper p::before{content: '';position: absolute;width: 18px;height: 5px;border-radius: 50%;background-color: #fff;right: 5%;top: 10%;}
.tag_wrapper p span{color: #fff;display: inline-block;margin-left: 10px;}

.card_wrapper{display: grid;grid-template-columns: repeat(6, 1fr);gap: 10px;max-width: 1350px;margin: 0 auto;overflow: hidden;}

.card {width: 200px;height: 200px;position: relative;-webkit-perspective: 1000;border-radius: 30px;}
.card::after{content: '';position: absolute;bottom: -4px;left: 0;width: 100%;height: 8px;background-color: #7cb3bf;mix-blend-mode: multiply;opacity: 0.36;border-radius: 50%;z-index: 3;pointer-events: none;}
.card.flip .back{ transform: rotateY(0deg);z-index: 10;}
.card.flip .front{ transform: rotateY(180deg);z-index: -1;}
.card .back, .card .front {position: relative;-webkit-transition: all 1s cubic-bezier(0.5, 1, 0.5, 1);transition: all 1s cubic-bezier(0.5, 1.3, 0.5, 1.3);transform-style: preserve-3d;border-radius: 30px;}
.card .back {position: absolute;left: 0;top: 0;bottom: 0;width: 100%;z-index: -1;transform: rotateY(-180deg) translateZ(0);height: 100%;}
.card .back img{width: 100%;height: 100%;border-radius: 30px;}
.card .front {z-index: 10;width: 200px;height: 200px;background-image: url(../Images/memory-game/card-overlay.png);text-align: right;background-size: cover;background-repeat: no-repeat;background-position: center;box-shadow: 3px 4px 5px rgba(5, 75, 93, 0.4);}
.card .front .content {width: 35px;height: auto;animation: rotate 2s linear infinite;}
.card.shake{ animation: shake 0.35s ease-in-out;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-13px)}40%{transform:translateX(13px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}

#childContainer{display: none;}

@keyframes rotate{
    0%{transform: translate3d(-30px, -10px, 50px) rotate(0);}
    30%{transform: translate3d(-30px, -10px, 50px) rotate(5deg);}
    40%{transform: translate3d(-30px, -10px, 50px) rotate(10deg);}
    70%{transform: translate3d(-30px, -10px, 50px) rotate(-5deg);}
    80%{transform: translate3d(-30px, -10px, 50px) rotate(-10deg);}
    100%{transform: translate3d(-30px, -10px, 50px) rotate(0);}
}


.popup{position: absolute;width: 100%;top: 0;left: 0;height: 100vh;background-color: rgba(0, 0, 0, 0.7);display: flex;align-items: center;padding: 20px;}
.popup_wrapper{background-image: url(../images/memory-game/game-bg.jpg);background-repeat: no-repeat;background-size: cover;padding: 10px;max-width: 550px;margin: 0 auto;text-align: center;border-radius: 30px;}
.popup_wrapper div{font-size: 30px;color: #000;background-color: #fff;border-radius: 30px;line-height: 30px;padding: 50px;}
.popup_wrapper span{background-image: url(../images/memory-game/card-overlay.png);padding: 10px 15px;display: inline-block;border-radius: 10px;color: #000;font-weight: 600;margin: 20px 10px 0;font-size: 20px;background-size: cover;transition: all 0.5s ease;cursor: pointer;}
.popup_wrapper span:hover{transform: scale(1.1);}
@media (min-width: 1024px) and (max-width:1280px){
  .main{display: flex;flex-flow: column;justify-content: center;}
  .bird{left: 70px;bottom: 60px;}
}
@media (min-width:1920px) {
  .logo{max-width: 550px;margin: 0px auto 100px;}
  .bird{left: 170px;}
  .level_wrapper{max-width: 620px;gap: 60px;}
  .level_wrapper div{flex: 0 0 auto;}
  .level_wrapper div img{width: 92px;}
  .level_wrapper .unlock::after{width: 92px;height: 120px;}
}
@media (max-width:1360px) {
    .card{width: 160px;height: 160px;}
    .card .front{width: 160px;height: 160px;}
    .card .front .content{width: 32px;margin-right: -10px;}
    .tree{display: none;}
}

@media (max-width:1180px) {
    .card{width: 130px;height: 130px;}
    .card .front{width: 130px;height: 130px;}
    .card .back, .card .front, .card .back img{border-radius: 15px;}
}

@media (max-width:1023px) {
    .main{padding: 60px 20px;background-position: 20%;overflow: hidden;}
    .volume_btn{width: 40px;height: auto;}
    .logo{max-width: 400px;margin: 20px auto;}
    .level_wrapper{gap: 30px 40px;}
    .main_game{padding: 20px;}
    .card .front .content{width: 25px;margin-right: -20px;}
    .btn_wrapper{top: 20px;}
    .tag_wrapper p{font-size: 15px;}
    .tag_wrapper div{padding: 0 5px 11px;box-shadow: 0 5px 0 #aa7313;}
    .btn_wrapper img{width: 35px;height: auto;}
    .popup_wrapper div{font-size: 25px;}
}
@media (max-width:1023px) and (orientation: landscape) {
  .bird{left: 100px;bottom: -6px;max-width: 90px;}
  .level_wrapper div img{width: 42px;}
  .level_wrapper .unlock::after{width: 40px;height: 60px;}
}
@media (max-width:1023px) and (orientation: portrait) {
    .main{padding: 100px 20px;}   
    .level_wrapper{height: 30%;}
}

@media (max-width:880px) {
    .card{width: 80px;height: 80px;}
    .card .front{width: 80px;height: 80px;}
    
}

@media (max-width:767px) {
    .main{padding: 50px 20px;}
    .logo{max-width: 340px;}
    .bird{left: 30px;bottom: 0;max-width: 80px;}
    .level_wrapper{gap: 20px;padding-top: 20px;}
    .btn_wrapper img{width: 30px;height: auto;margin-right: 10px;}
    .card .front .content{width: 20px;margin-right: -25px;margin-top: 5px;}
}

@media (max-width:440px) {
    .logo{max-width: 280px;}
}
@media (max-width:440px) and (orientation: portrait) {
    .main{padding: 100px 20px;}
    .bird{left: 10px;bottom: 50px;max-width: 110px;}
    .level_wrapper{height: 50%;flex-wrap: wrap;gap: 0 30px;padding-top: 100px;}
    .level_wrapper .unlock::after{width: 40px;height: 60px;}
    .level_wrapper div img{width: 42px;}
}

@media (min-height: 1024px){
  .main{display: flex;flex-flow: column;justify-content: center;}
}

@media (width: 882px) and (height: 344px){
  .level_wrapper{padding-top: 20px;}
  .level_wrapper div img{width: 42px;}
  .level_wrapper .unlock::after{width: 40px;height: 80px;}
  .logo{max-width: 320px;}
  .main{background-position: bottom;}
}
.portrait .btn_wrapper, .portrait .card_wrapper, .portrait .card {display: none;}
.rotate-message {display: none;}
.landscape .rotate-message {display: none;}
.hide {display: none;}
.portrait .rotate-message {display: block;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;font-family: "Public Sans", sans-serif;}