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

/*================================= 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/complete-the-picture/main-page-bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: bottom center;position: relative;height: 100vh;overflow: auto;padding: 30px;display: flex;flex-flow: column;justify-content: center;}
.volume_btn{position: absolute;top: 20px;right: 20px;cursor: pointer;}

.logo{margin: 40px auto;display: block;width: 480px;}
.ship{position: fixed;bottom: 0;left: 50px;width: 250px;animation: bob 3s infinite;}
@keyframes bob {
    0%, 100% {
        transform: rotate(0deg) translateY(6px);
    }
    50% {
        transform: rotate(-5deg) translateY(-6px);
    }
}

.level_wrapper{max-width: 750px;display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;margin: 0 auto;}
.level_wrapper li{border-image: url(../Images/complete-the-picture/board.png) 65 92 / 74px;display: inline-block;padding: 20px 20px 20px 17px;position: relative;cursor: pointer;}
.level_wrapper li:hover, .volume_btn:hover, .btn_wrapper img:hover, .next:hover{transform: scale(1.1);}
.level_wrapper img{width: 180px;border-radius: 15px;}
.star_wrapper{position: absolute;bottom: -10px;right: 0;left: 0;text-align: center;}
.star_wrapper img{width: 70px;}
.star_wrapper img:first-child, .star_wrapper img:last-child{width: 50px;}
.star_wrapper img:first-child{transform: rotate(-20deg);}
.star_wrapper img:last-child{transform: rotate(20deg);}

.main_game{background-image: url(../Images/complete-the-picture/game-bg.jpg);background-repeat: no-repeat;background-size: cover;height: 100vh;overflow: hidden;padding: 30px;position: relative;background-position: bottom;display: grid;align-items: center;}
.btn_wrapper{position: absolute;top: 20px;right: 20px;}
.btn_wrapper img{cursor: pointer;}

.game_board{display: flex;align-items: center;justify-content: space-around;}
.game_board ul{border-image: url(../Images/complete-the-picture/board.png) 111 127 / 74px;width: 960px;padding: 30px;display: flex;flex-wrap: wrap;}
.game_board li img{width: 300px;height: 100%;border-radius: 15px;cursor: pointer;}
.moves_wrapper{align-self: flex-end;}
.moves_wrapper span{font-size: 70px;color: #0c7ba1;text-shadow: 0 0.025em 0.0375em #0c7ba1, 0 0 0 white;-webkit-text-stroke: 0.025em #0c7ba1;-webkit-text-fill-color: transparent;text-align: center;display: flex;flex-flow: column;}
.moves_wrapper p{font-size: 120px;}

.small_board{width: 300px;border-image: url(../Images/complete-the-picture/board.png) 65 92 / 74px;padding: 20px 20px 20px 17px;transform: skewX(-4deg);}
.small_board img{border-radius: 15px;}
.popup.hide{display: none;opacity: 0;}
.popup{position: fixed;width: 100%;height: 100vh;top: 0;left: 0;right: 0;margin: 0 auto;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.7);z-index: 99;opacity: 1;transition: all 0.5s ease;flex-flow: column;gap: 30px;overflow: auto;}
.next{animation: popout 1s ease-in-out 0.3s;cursor: pointer;}
.badge{width: 500px;animation: popout 1s ease-in-out 0.3s;}
@keyframes popout{0%{transform:scale(0.5) rotate(-20deg);opacity:0}50%{transform:scale(1.1) rotate(10deg);opacity:1}75%{transform:scale(0.9) rotate(-5deg)}100%{transform:scale(1) rotate(0deg)}}

@media (max-width: 1600px){
    .game_board ul{width: 803px;}
    .game_board li img{width: 250px;}
    .moves_wrapper span{font-size: 55px;}
    .moves_wrapper p{font-size: 100px;}
}
@media (max-width: 1240px){
    .ship{width: 200px;left: 20px;}
    .game_board ul {width: 664px;}
    .game_board li img {width: 200px;}
    .small_board{width: 240px;}
    .moves_wrapper span{font-size: 50px;}
    .moves_wrapper p {font-size: 80px;}
}
@media (max-width: 1023px){
    .main{justify-content: flex-start;}
    .ship{width: 100px;left: 30px;}
    .logo{width: 320px;margin: 10px auto 30px;}
    .btn_wrapper img, .volume_btn{width: 30px;}
    .level_wrapper{max-width: 600px;}
    .level_wrapper img{width: 210px;}
    .star_wrapper{bottom: 0;}
    .star_wrapper img{width: 40px;}
    .star_wrapper img:first-child, .star_wrapper img:last-child{width: 30px;}
    .main_game{padding: 10px;}
    .game_board ul{width: 448px;}
    .game_board li img {width: 120px;border-radius: 7px;}
    .moves_wrapper span {font-size: 30px;}
    .moves_wrapper p {font-size: 50px;}
    .small_board{width: 160px;}
    .game_board {height: calc(100vh - 0px);}
    .badge{width: 240px;}
    .next{width: 35px;}
}
@media (max-width: 767px){
    .level_wrapper > img {width: 160px;}
}
.portrait .main_game {display: none;}
.landscape .main_game {display: block;}
.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;}