@charset "UTF-8";

html, body * {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

/* body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
   
    background-image: url(https://k-pawan.com/game/images/bkgg.jpg);
} */

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;

}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://k-pawan.com/game/images/bkgg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3; /* Adjust the opacity as needed */
    z-index: -1;
}








/* for mobile */

@media screen and (max-width: 768px) {
    body {
        /* background-color: rgba(255, 255, 255, 0.9);  */
        background-color: #ede6e6;

    }
    .sect1, .sect2, .sect3, .sect4, .board,.scoreStyle{
        visibility: hidden;
    }
    
    
    .h1{
        color: #008fbe;
        font-size: 7vw;
        text-align: center;
        margin:  2.5rem auto 2.5rem auto;
        font-weight: 900;
    }
    .sect {
        background-color: rgba(163, 163, 163, 0.7); 
         margin: 0 auto;
         height: auto;
         width: 80%;
         /* display: flex; */
         justify-content: space-between;
    }
    .one {
         /* display: flex;
         flex-direction: column; */
         justify-content: space-between;
         margin: 0 auto;
         width: 100%;
         height: auto;
    }
    .two {
         /* display: flex;
         flex-direction: column; */
         justify-content: space-between;
         margin: 0 auto;
         width: 100%;
         height: auto;
    }
    
    .puzzleStyle{
        margin: 1rem;
    }
    .puzzleStyle:hover{
        opacity: 1;
        scale: 1.05;
    }
    
    
    /* now the actual puzzle */
    #scene1, #scene2, #scene3, #scene4 {
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        width: 90vw;
    }
    
    
    /* now the boards */
    .board{
        display: flex;
        flex-direction: row;
        background-color: #008fbe;
        width: 65vw;
        margin: 0 auto;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -5%);
        height: 10vh;
        width: 85vw;
    }
    .boardleft{
        display: flex;
        align-items: center;
        justify-content: center;
        margin:  0 auto;
        height: 10vh;
        width: 70vw;
        text-align: center;
        z-index: 1000;
    }
    .boardright{
        /* margin: 2rem auto auto auto; */
        padding: auto;
        font-size: 3.8vw;
        text-align: center;
        background-color: #efabae;
        width: 15vw;
        height: 10vh;
    
    
        padding-top: .5rem;
    }
    .boardleft h2{
        font-size: 3.5vw;
        padding-top: 1.5rem;
        width: 11.66vw;
        height: 10vh;
        color: white;
        vertical-align: text-bottom;
        text-align: center;
    }
    .boardstyle{
        border: .1rem solid white;
        height: 10vh;
        width: 11.66vw;
        padding: 0.3rem;
        background-color: rgb(169, 213, 242) ;
        cursor: pointer;
    }
    
    .clock{
     border-radius: 0.2rem ;
     display: flex;
     position: absolute;
     top: 33%;
     left: 20%;
     font-size: 5vw;
     width: 8rem;
     text-align: center;
     background-color: #efabae;
    }
    
    .scoreStyle{
        border-radius: 0.2rem ;
        display: flex;
        position: absolute;
        top: 33%;
        left: 55%;
        font-size: 5vw;
        width: auto;
        text-align: center;
        background-color: #a7d59c;
      }
    
      #gameOverScreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    #gameOverScreen h2 {
        position: absolute;
        text-align: center;
        font-size: 5vw;
        left: 30%;
        top: 35%;
        color: #008fbe;
        
        margin: 0;
    }
    
    #gamenotOverScreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    #gamenotOverScreen h2 {
        position: absolute;
        text-align: center;
        font-size: 5vw;
        left: 15%;
        top: 35%;
        color: rgb(0, 32, 190);
        
        margin: 0;
    }
    
    
    #intro {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    /* intro */
    
    #intro img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    
    #instrucc img {
      position: absolute;
      right: 0.1rem;
      top: 0.1rem;
      height: 3rem;
      width: auto;
      cursor: pointer;
    }
    #instrucimgg {
      position: absolute;
      left: 0;
      top: 0;
      background-color: white;
      height: 100vh;
      width: 100vw;
    }
    #teera{
      position: absolute;
      right: 1rem;
      top: 1rem;
      background-color: white;
      height: 7vh;
      width: 7vw;
    }
    
    #skip{
        display: block;
        position: absolute;
        bottom: 4rem;
        right: 42.5%;
        font-size: 1.2rem;
        color: blue;
        text-align: center;
        background-color: white;
        border: white;
        opacity: 0.5;
        transition: .2s ease-in;
        border-radius: 1rem;
    
    
    }
    #skip:hover{
        opacity: 1;
        background-color: skyblue;
        color: white;
    }
    
        .st0{fill:#F1EFF0;}
        .st1{fill:#008FBE;}
        .st2{fill:#42717C;}
}







/* for tablet */
@media screen and (min-width: 769px){
    body {
        background-color: #ede6e6;

    }
    .sect1, .sect2, .sect3, .sect4, .board,.scoreStyle{
        visibility: hidden;
    }
    
    
    .h1{
        color: #008fbe;
        font-size: 5vw;
        text-align: center;
        margin:  2.5rem auto 2.5rem auto;
        font-weight: 900;
    }
    .h2{
        color: #407589;
        font-size: 5vw;
        text-align: center;
        margin:  2.5rem auto 2.5rem auto;
        font-weight: 900;
    }
    .sect {
        background-color: rgba(163, 163, 163, 0.7); 

         margin: 0 auto;
         height: auto;
         width: 80%;
         display: flex;
         justify-content: space-between;
    }
    .one {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin: 0 auto;
         width: 50%;
         height: auto;
    }
    .two {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin: 0 auto;
         width: 50%;
         height: auto;
    }
    
    .puzzleStyle{
        margin: 1rem;
        transition: .3s ease-in-out;
    }
    .puzzleStyle:hover{
        opacity: 1;
        transform: scale(1.01);
    }
    
    
    /* now the actual puzzle */
    #scene1, #scene2, #scene3, #scene4 {
        position: absolute;
        top: 1%;
        left: 50%;
        transform: translate(-50%, 0);
        height: auto;
        width: 65vw;
    }
    
    
    /* now the boards */
    .board{
        display: flex;
        flex-direction: row;
        background-color: #008fbe;
        width: 65vw;
        margin: 0 auto;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, -5%);
        height: 20vh;
        width: 65vw;
    }
    .boardleft{
        display: flex;
        align-items: center;
        justify-content: center;
        margin:  0 auto;
        height: 20vh;
        width: 55vw;
        text-align: center;
        z-index: 1000;
    }
    .boardright{
        /* margin: 2rem auto auto auto; */
        padding: auto;
        font-size: 1.5vw;
        text-align: center;
        background-color: #efabae;
        width: 10vw;
        height: 20vh;
    
    
        padding-top: 2rem;
    }
    .boardleft h2{
        font-size: 2vw;
        padding: 0.9rem;
        width: 9.1vw;
        height: 20vh;
        color: white;
        vertical-align: text-bottom;
        padding: 3rem;
        text-align: center;
    }
    .boardstyle{
        border: .1rem solid white;
        height: 20vh;
        width: 9.1vw;
        padding: 0.3rem;
        background-color: rgb(169, 213, 242) ;
        cursor: pointer;
    }
    
    .count img{
       
        position: absolute;
        top: 2rem;
        right: 5rem;
    
    }
    /* #countdown{
        position: absolute;
        font-size: 2vw;
        text-align: center;
        top: 6rem;
        left: 0;
        background-color: #efabae;
        width: 10vw;
        border-radius: 0 1rem 1rem 0;
    
    }
    
    .scoreStyle{
        border-radius: 0 1rem 1rem 0;
       
        display: flex;
        position: absolute;
        top: 3rem;
        left: 0;
        font-size: 2vw;
        width: 10vw;
        text-align: center;
        background-color: #a7d59c;
      } */
      .clock{
        border-radius: 0.2rem ;
        display: flex;
        position: absolute;
        top: 68%;
        left: 30%;
        font-size: 2.5vw;
        width: 8rem;
        text-align: center;
        background-color: #efabae;
       }
       
       .scoreStyle{
           border-radius: 0.2rem ;
           display: flex;
           position: absolute;
           top: 68%;
           right: 30%;
           font-size: 2.5vw;
           width: auto;
           text-align: center;
           background-color: #a7d59c;
         }

/*          
         .clock{
            display: flex;
            position: absolute;
            top: 68%;
            left: 30%;
            font-size: 2vw;
            width: 12rem;
            text-align: center;
            background-color: #efabae;
           }
           
           .scoreStyle{
               border-radius: 0.2rem ;
               display: flex;
               position: absolute;
               top: 68%;
               right: 30%;
               font-size: 2vw;
               width: 12rem;
               text-align: left;
               background-color: #a7d59c;
             }  */


    
      #gameOverScreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    #gameOverScreen h2 {
        position: absolute;
        text-align: center;
        font-size: 5vw;
        left: 30%;
        top: 35%;
        color: #008fbe;
        
        margin: 0;
    }
    
    #gamenotOverScreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    #gamenotOverScreen h2 {
        position: absolute;
        text-align: center;
        font-size: 5vw;
        left: 15%;
        top: 35%;
        color: rgb(0, 32, 190);
        
        margin: 0;
    }
    
    
    #intro {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    /* intro */
    
    #intro img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    
    #instrucc img {
      position: absolute;
      right: 0.1rem;
      top: 0.1rem;
      height: 3rem;
      width: auto;
      cursor: pointer;
    }
    #instrucimgg {
      position: absolute;
      left: 0;
      top: 0;
      background-color: white;
      height: 100vh;
      width: 100vw;
    }
    #teera{
      position: absolute;
      right: 1rem;
      top: 1rem;
      background-color: white;
      height: 7vh;
      width: 7vw;
    }
    
    #skip{
        display: block;
        position: absolute;
        top: 2rem;
        right: 3rem;
        font-size: 1.2rem;
        color: blue;
        text-align: center;
        background-color: white;
        border: white;
        opacity: 0.5;
        transition: .2s ease-in;
        border-radius: 1rem;
    
    
    }
    #skip:hover{
        opacity: 1;
        background-color: skyblue;
        color: white;
    }
    
        .st0{fill:#F1EFF0;}
        .st1{fill:#008FBE;}
        .st2{fill:#42717C;}
}




/* for desktop */
@media screen and (min-width: 1025px) {

    body {
        /* background-color: rgba(255, 255, 255, 0.9);  */
        background-color: #ede6e6; 

    }
    .sect1, .sect2, .sect3, .sect4, .board,.scoreStyle{
        visibility: hidden;
    }
    
    
    .h1{
        color: #008fbe;
        font-size: 5vw;
        text-align: center;
        margin:  2.5rem auto 2.5rem auto;
        font-weight: 900;
    }
    .sect {
         background-color: rgba(163, 163, 163, 0.7);
         margin: 0 auto;
         height: auto;
         width: 80%;
         display: flex;
         justify-content: space-between;
    }
    .one {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin: 0 auto;
         width: 50%;
         height: auto;
    }
    .two {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin: 0 auto;
         width: 50%;
         height: auto;
    }
    
    .puzzleStyle{
        margin: 1rem;
    }
    .puzzleStyle:hover{
        opacity: 1;
        scale: 1.05;
    }
    
    
    /* now the actual puzzle */
    #scene1, #scene2, #scene3, #scene4 {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        height: auto;
        width: 65vw;
    }
    
    
    /* now the boards */
    .board{
        display: flex;
        flex-direction: row;
        background-color: #008fbe;
        width: 65vw;
        margin: 0 auto;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, -5%);
        height: 20vh;
        width: 65vw;
    }
    .boardleft{
        display: flex;
        align-items: center;
        justify-content: center;
        margin:  0 auto;
        height: 20vh;
        width: 55vw;
        text-align: center;
        z-index: 1000;
    }
    .boardright{
        /* margin: 2rem auto auto auto; */
        padding: auto;
        font-size: 2.5vw;
        text-align: center;
        background-color: #efabae;
        cursor: pointer;
        width: 10vw;
        height: 20vh;
        padding-top: 2rem;
    }

    #btn1 {
        position: relative;
        transition: transform 0.1s;
        text-decoration: none;
    }
    
    #btn1:hover {
        color: white;
        transform: scale(0.9);
        text-decoration: none;
        /* -webkit-text-stroke: .1rem  black; */
    }
    
    #btn1::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 0.09rem;
        background-color: black;
        width: 0%;
        transition: width 0.3s ease;
        text-decoration: underline;
    }
    
    #btn1:hover::after {
        width: 80%;
        text-decoration: none;
    }
    #btn0 {
        position: relative;
        transition: transform 0.1s;
        text-decoration: none;
    }
    
    #btn0:hover {
        color: white;
        transform: scale(0.9);
        text-decoration: none;
        /* -webkit-text-stroke: .1rem  black; */
    }
    
    #btn0::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 0.09rem;
        background-color: black;
        width: 0%;
        transition: width 0.3s ease;
        text-decoration: underline;
    }
    
    #btn0:hover::after {
        width: 80%;
        text-decoration: none;
    }
    

    .boardleft h2{
        font-size: 2vw;
        padding: 1.9rem;
        width: 9.1vw;
        height: 20vh;
        color: white;
        vertical-align: text-bottom;
        text-align: center;
    }
    .boardstyle{
        border: .1rem solid white;
        height: 20vh;
        width: 9.1vw;
        padding: 0.3rem;
        background-color: rgb(169, 213, 242) ;
        cursor: pointer;
    }
    
    .count img{
       
        position: absolute;
        top: 2rem;
        right: 5rem;
    
    }
    /* #clock{
        position: absolute;
        font-size: 2vw;
        text-align: center;
        top: 6rem;
        left: 0;
        background-color: #efabae;
        width: 10vw;
        border-radius: 0 1rem 1rem 0;
    
    }
    
    .scoreStyle{
        border-radius: 0 1rem 1rem 0;
       
        display: flex;
        position: absolute;
        top: 3rem;
        left: 0;
        font-size: 2vw;
        width: 10vw;
        text-align: center;
        background-color: #a7d59c;
      } */
      .clock{
        /* border-radius: 0.2rem ; */
        display: flex;
        position: absolute;
        top: 68%;
        left: 30%;
        font-size: 2vw;
        width: 12rem;
        text-align: center;
        background-color: #efabae;
       }
       
       .scoreStyle{
           border-radius: 0.2rem ;
           display: flex;
           position: absolute;
           top: 68%;
           right: 30%;
           font-size: 2vw;
           width: 12rem;
           text-align: left;
           background-color: #a7d59c;
         }
    
      #gameOverScreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    #gameOverScreen h2 {
        position: absolute;
        text-align: center;
        font-size: 5vw;
        left: 30%;
        top: 35%;
        color: #008fbe;
        
        margin: 0;
    }
    
    #gamenotOverScreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    #gamenotOverScreen h2 {
        position: absolute;
        text-align: center;
        font-size: 5vw;
        left: 15%;
        top: 35%;
        color: rgb(0, 32, 190);
        
        margin: 0;
    }
    
    
    #intro {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
    }
    
    
    
    
    /* intro */
    
    #intro img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    
    #instrucc img {
      position: absolute;
      right: 0.1rem;
      top: 0.1rem;
      height: 3rem;
      width: auto;
      cursor: pointer;
    }
    #instrucimgg {
      position: absolute;
      left: 0;
      top: 0;
      background-color: white;
      height: 100vh;
      width: 100vw;
    }
    #teera{
      position: absolute;
      right: 1rem;
      top: 1rem;
      background-color: white;
      height: 7vh;
      width: 7vw;
    }
    
    #skip{
        display: block;
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
        color: blue;
        text-align: center;
        background-color: white;
        border: white;
        opacity: 0.5;
        transition: .2s ease-in;
        border-radius: 1rem;
        width: 20vw;
    
    }

 


    #skip:hover{
        opacity: 1;
        background-color: skyblue;
        color: white;
    }
    
        .st0{fill:#F1EFF0;}
        .st1{fill:#008FBE;}
        .st2{fill:#42717C;}
    
    }