/* custom font using @font-face */
@font-face {
  font-family: 'LuckiestGuy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./LuckiestGuy.ttf) format('woff2');
  src: url(https://fonts.gstatic.com/s/luckiestguy/v22/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body, * {
    box-sizing: border-box;
    font-family: 'LuckiestGuy';
}

html {
    font-size: 16px;
}


/* Styling for the landing section */
.landing {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.skip-button {
  width: fit-content;
  position: absolute;
  /* right: 5rem; */
  right: 5%;
  bottom: 5%;
  background-color: #A7C780;
  color: #FFFFDE;
  font-size: 22px;
  padding: 14px 26px;
  cursor: pointer;
  border-radius: 16px;
  place-content: center;
  text-align: center;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}
.skip-button:active {
  transform: scale(0.95);
}

/* Styling for individual landing elements */
#magnify, #word, #safari {
  position: absolute;
  transform-origin: center;
  z-index: 2;
}

.landing{ 
  visibility:visible;
}

#magnify {
  top: 30%;
  left: 62%;
  transform: translate(-80%, -75%);
  scale: 0.5;
  opacity: 0;
}

#word {
  top: 30%;
  left: 30%;
  transform: translate(-70%, -50%);
  scale: 0.7;
  opacity: 0;
}

#safari {
  top: 50%;
  left: 50%;
  transform: translate(-10%, 30%);
  scale: 1;
  opacity: 0;
}



/* Styling for background image */
#bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; 
}




/* /////////////////////////////////////////////////////////////// */

#logo {
  position: absolute;
  width: 30%;
  top: 15%;
  left: 5%;
}

#instructions{
  position: absolute;
  width: 50%;
  top: 17%;
  left: 42%;

}

body, html {
  margin: 0;
  overflow:  hidden;
  padding: 0;
  font-family: 'LuckiestGuy';
  background: rgb(255,255,221);
  background: linear-gradient(0deg, rgba(255,255,221,0.9222524947478992) 39%, rgba(162,196,120,0.7597875087535014) 67%);
}

/* Styling for main container */
main {
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: 'LuckiestGuy';

}

.intro {
    padding: 20px;
}

.sect {
  display: absolute;
  gap: 10px;
  align-items: center;
  height: 100vh;

}

/* Styling for individual puzzle images */
.puzzleStyle {
  position: absolute;
  margin-right: 10%;
  top: 60%;
  left: 5%;
  width: 20%;
  border: #000000 5px solid;
  margin-right: 2%;
}


#obj0{
  left: 5%;
}
#obj1{
  left: 28%;
}
#obj2{
  left: 52%;
}
#obj3{
  left: 75%;
}

.puzzleStyle:hover{
  scale: 1.1;
  
}

/* Styling for hidden scenes and board */
.sect1, .sect2, .sect3, .sect4, .board,.scoreStyle,#playAgainBtn {
  visibility: hidden;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
}

/* Styling for individual scenes */
.sect1, .sect2, .sect3, .sect4 {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  position: fixed !important;
  overflow: hidden !important;
}

/* Styling for scene images */
.sect1 #scene1,
.sect2 #scene2,
.sect3 #scene3,
.sect4 #scene4 {
  width: 80%;
  border: #000000 5px solid;
}

/* Boards, and score */
.board, .scoreStyle {
    visibility: hidden;
}


.boardLeft {
  position: fixed;
  top: calc(100vh - 25vh); /* 50% of the viewport height - half of the board height */
  left: calc(50% - 30%); /* 50% of the viewport width - half of the board width */
  width: 60%;
  display: flex;
  z-index: 1;
  justify-content: center;
  align-items: center;
  background-color: #395c68;
  border: #000000 4px solid;
  overflow: hidden;

}

.boardRight {
  padding-left: 2%;
}


#item0, #item1, #item2, #item3, #item4, #item5 {
    height: 100px;
    margin: 1px;
    border-radius: 0.5rem;
}

.buttons {
  background-color: #ffffff;
  color: #4F4F4F;
  font-family: 'Luckiest Guy';
  font-size: 22px;
  padding: 8px;
  margin: 10px 5px;
  cursor: pointer;
  width: 170px;
  /* height: 10%; */
  text-align: center;
}

.buttons:hover {
  background-color: #666666;
  color: #ffffff;
}

/* .scoreStyle {
    width: 7rem;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.087), 0 5px 10px 0 rgba(0, 0, 0, 0.068);
} */

/* #score {
    font-size: 1rem;
} */

.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #395C68;
    border: 2px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    z-index: 1000;
  }
  
  .popup-content {
    font-family: 'Luckiest Guy';
    font-size: 25px;
    color: #FFFFFF;
  }
  
  .popup-content p {
    margin: 10px 0;
  }
  
  .popup-content button {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .popup-content button:hover {
    scale: 1.1;
  }
  .popup-content button:active {
    scale: 1.1;
  }




  @media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .sect {
        display: flex;
        align-items: center;
        justify-content: center;
    }

  

    .logo h1 {
        font-size: 1.5rem;
    }

    #item0, #item1, #item2, #item3, #item4, #item5 {
        width: 7rem;
        height: 7rem;
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 16px 20px;
        background: radial-gradient(circle, rgba(183, 183, 183, 0.81) 0%, rgba(5, 208, 208, 0.636) 100%);
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.087), 0 5px 10px 0 rgba(0, 0, 0, 0.068);
    }

    .boardLeft {
        margin-top: -75px;
        width: 90%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .boardRight {
        margin-top: 0px;
        z-index: 1;
    }


    #obj0, #obj1, #obj2, #obj3, #obj4 {
        width: 40%;
        padding: 1rem;
    }

}