* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
@font-face {
  font-family: Yatra;
  src: url(/fonts/YatraOne-Regular.ttf);
}
body {
  font-family: Yatra;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url(/images//pexels-pixabay-326333.jpg);
}
main {
  width: 60vw;
  border: 4px solid rgb(32, 10, 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
  padding: 2vh;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  background-image: url(/images/Bamboo\ mat\ stock\ image_\ Image\ of\ style\,\ restaurant\,\ asia\ -\ 570775.jpeg);
}
.header {
  background-color: wheat;
  padding-inline: 2vw;
  border-radius: 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  h1 {
    text-align: center;
  }
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  background-color: wheat;
  width: 40vw;
  border-radius: 5px;
  padding: 2vw;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

  h3 {
    border-bottom: 4px solid;
    color: rgb(32, 10, 10);
  }
}
.colorContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
}
#colorBox {
  width: 20vw;
  height: 15vh;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
#colorOptions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2vw;
}
.colorOptionButton {
  width: 9vw;
  height: 8vh;
  border: none;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.status {
  width: 30vw;
  border: 3px solid rgb(32, 10, 10);
  color: rgb(32, 10, 10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
#score{
  color: red; 
  font-weight: bolder"
}
#newGameButton {
  padding: 20px;
  margin-top: 10px;
  background-color: green;
  color: white;
  font-family: Yatra;
  font-size: 1em;
  font-weight: bold;
  border: none;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.correct-guess {
  animation: correctEffect 0.5s ease-in-out;
}

@keyframes correctEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.wrong-guess {
  animation: wrongEffect 0.5s ease-in-out;
}

@keyframes wrongEffect {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

@media (width<=700px) {
  body {
    height: auto;
  }
  main {
    width: 95vw;
    border: 2px solid black;
    gap: 3vh;
    padding: 1vh;
    border-radius: 5px;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1vw;

    h1 {
      text-align: center;
      font-size: 1.6em;
    }
  }
  section {
    gap: 3vh;
    width: 90vw;
    padding: 10px;

    h3 {
      border-bottom: 3px solid;
      font-size: large;
    }
  }
  #colorBox {
    width: 80vw;
    height: 150px;
  }
  .status {
    width: 80vw;
    padding: 1vh;
    flex-direction: column-reverse;
  }
  #colorOptions {
    gap: 3vw;
  }
  .colorOptionButton {
    width: 25vw;
    height: 8vh;
  }
}

@media (height<=700px) {

    main{
        width: 95vw;
        height: 95vh;
    }
    .header {
        padding-inline: 2vw;
        border-radius: 5px;
        h1 {
          text-align: center;
          font-size: 1.5em;
        }
      }
    section{
        width: 80vw;
    }
    .colorContainer{
        flex-direction: row;
        gap: 10vw;
    }
    #colorBox {
        width: 30vw;
        height: 25vh;
      }
    #colorOptions {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        justify-content: center;
        flex-wrap: wrap;
        gap: 2vw;
      }
      .colorOptionButton {
        width: 10vw;
        height: 12vh;
      }
      .status {
        width: 55vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1vh;
      }
      #newGameButton {
        margin-top: 1vh;
        padding: 10px;
        font-size: 0.9em;
       
      }



}