@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Syne:wght@400..800&display=swap");

body {
  background: linear-gradient(#01021f, #0c115a, #3d1562);
  color: white;
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0 100px;
}

h1,
h2 {
  font-family: "Syne", sans-serif;
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

/* ---------nav----------- */

@keyframes nav-load {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

#logo-img {
  width: 90px;
  margin-right: 28px; /* space between logo and links */
  animation: list-item-load 500ms ease-in-out 300ms forwards;
  transform: scale(0);
}

.navbar-cont {
  /* max-width: 1200px; limit max width for better readability */
  display: flex;
  position: fixed;
  top: 0;
  z-index: 1000; /* ensure navbar is above other content */
  align-items: center;
  justify-content: space-between; /* logo left, links right */
  background-color: rgba(157, 164, 189, 0.2);
  backdrop-filter: blur(10px); /* subtle blur for a frosted glass effect */
  border-top: 0.5px solid #d2d4d8;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* subtle shadow for depth */
  height: 80px;
  width: calc(100% - 280px); /* full width minus horizontal margins */
  margin: 30px auto; /* keep outer spacing from the page edges */
  padding: 0 40px; /* inner horizontal padding for consistent spacing */
  border-radius: 40px;
  animation: nav-load 500ms ease-in-out forwards;
  opacity: 0;
  transform: translateY(-250px);
}

.list ul {
  display: flex;
  align-items: center;
  gap: 28px; /* consistent spacing between items */
}

.list li {
  margin: 0; /* gap handles spacing now */
  list-style: none;
  cursor: pointer;
  font-size: 20px;
  animation: list-item-load 500ms ease-in-out 300ms forwards;
  transform: scale(0);
}

@keyframes list-item-load {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.1); /* slight overshoot for a bounce effect */
  }
  100% {
    transform: scale(1);
  }
}

.list li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease; /* smooth color change on hover */
}

.list li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  left: 0;
  bottom: -5px;
  background: #ff3b30; /* red underline color */
  transition: width 0.5s ease-out; /* smooth underline animation */
}

.list li a:hover::after {
  width: 100%; /* expand underline to full width on hover */
}

.list ul input {
  width: 25px;
  height: 25px;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

/* ---------body---------------- */

.title-container {
  animation: title-load 400ms ease-in-out 800ms forwards;
  opacity: 0;
  transform: translateY(-50px);
}

@keyframes title-load {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  margin-top: 150px;
  min-height: 100vh;
}

#memory {
  color: #ff3b30; /* red color for emphasis */
  font-weight: bold;
}

main h1 {
  font-size: 45px;
}

main h2 {
  font-size: 20px;
  margin-bottom: 40px;
  font-weight: 500;
}

main p {
  font-size: 25px;
  margin-bottom: 40px;
}

.timer {
  font-size: 30px;
  font-weight: bold;
  margin-top: 0;
}

.timeout-message {
  font-size: 24px;
  font-weight: bold;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    color: white;
  }
  50% {
    transform: scale(1.05);
    color: #ff3b30; /* red color at the peak of the pulse */
  }
  100% {
    transform: scale(1);
    color: white;
  }
}

.game-container {
  max-width: 1200px; /* limit max width for better readability */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(157, 164, 189, 0.2);
  backdrop-filter: blur(10px); /* subtle blur for a frosted glass effect */
  padding: 20px;
  border-radius: 20px;
  border-top: 0.5px solid #d2d4d8;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* subtle shadow for depth */
  margin: 0 auto; /* horizontal spacing from page edges */
  transition: opacity 0.5s ease-out;
}

.game-container.fade-out {
  opacity: 0;
}

.images-container {
  display: flex;
  flex-wrap: wrap; /* allow images to wrap to next line if needed */
  gap: 20px; /* space between images */
  margin-top: 20px;
  /* make the images and labels stack vertically */
  justify-content: center; /* center the images and labels horizontally */
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* bounce-like transition */
}

.image-item.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.images-container .game-image {
  width: 140px;
  height: 140px;
  /* object-fit: cover; */
  border-radius: 12px;
  border: 2px solid white; /* white border for better visibility */
  padding: 20px;
  transition: all 0.3s ease-in-out; /* smooth transition for hover effects */
}

.images-container .game-image:hover {
  transform: scale(1.05); /* subtle zoom effect on hover */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* white glow effect on hover */
  rotate: 5deg; /* slight rotation on hover for a dynamic effect */
  cursor: pointer;
  opacity: 0.95; /* slight fade effect on hover for better feedback */
}

.image-label {
  /* make the label text below the image */
  font-size: 18px;
  margin-top: 8px;
  text-align: center;
}

.game-container .input-container .game-input {
  border-radius: 10px;
  border: 1px solid #e0e2e6;
  background-color: transparent;
  padding: 20px;
  margin-bottom: 10px;
  color: white;
  font-size: 18px;
}

.game-container .input-container {
  display: grid; /* use grid layout for inputs */
  grid-template-columns: 1fr 1fr; /* 2 columns for inputs */
  gap: 20px; /* space between inputs */
  width: 90%; /* limit width of input container for better layout */
}

.submit-button {
  grid-column: span 2; /* make submit button span both columns */
  padding: 20px;
  background-color: #ff3b30; /* red background for submit button */
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* smooth hover effect */
}

.submit-button:hover {
  background-color: #c0392b; /* darker red on hover */
}

.result-message {
  font-size: 30px;
  font-weight: bold;
  color: #ff3b30; /* red color for result messages */
}

.score-message,
.well-done-message,
.try-again-message {
  margin-top: 0;
}

.best-score-message {
  margin-top: 0;
  color: #4caf50; /* green color for best score message */
  text-align: center;
  font-weight: bold;
}

.correct-answers {
  background-color: rgb(221, 217, 217, 0.2);
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 12px;
  padding: 20px;
}

.correct-answer-item {
  background-color: #4caf50; /* green background for correct answers */
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  margin: 10px;
  font-size: 16px;
}

.correct-answers-title {
  display: block;
  width: 100%;
}

.user-answers {
  background-color: rgb(221, 217, 217, 0.2);
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.user-answers .user-answer-item {
  background-color: #3498db; /* blue background for user answers */
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  margin: 10px;
  font-size: 16px;
}

.user-answers-title {
  display: block;
  width: 100%;
}

.play-again-button {
  padding: 20px;
  margin: 0;
  margin-bottom: 20px;
  width: 93%;
  background-color: #cc2e26; /* red background for play again button */
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* smooth hover effect */
}

.play-again-button:hover {
  background-color: #c0392b; /* darker red on hover */
}

.level-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.game-item:hover {
  transform: scale(1.02); /* subtle zoom effect on hover */
  cursor: pointer;
  opacity: 0.95; /* slight fade effect on hover for better feedback */
}

.game-container p {
  font-weight: bold; /* make the first container's text bold */
}

#level-title {
  animation: title-load 400ms ease-in-out 1000ms forwards;
  opacity: 0;
  transform: translateY(-50px);
}

.game-item {
  padding: 20px;
  border-radius: 20px;
  flex: 1; /* equal width for all items */
  text-align: center;
  height: 250px;
  transition: transform 0.3s ease-in-out; /* smooth transition for the zoom effect */
  animation: game-item-load 500ms ease-in-out 1200ms forwards;
  translate: 0 5rem;
  scale: 0.8;
  filter: blur(5px) opacity(0) saturate(0) brightness(0.1);
}

@keyframes game-item-load {
  from {
    translate: 0 5rem;
    scale: 0.8;
    filter: blur(5px) opacity(0) saturate(0) brightness(0.1);
    /* height: 50px; */
  }
  to {
    translate: 0 0;
    filter: none;
    scale: 1;
    /* height: 250px; */
  }
}

.level-container .game-item.easy {
  background: linear-gradient(#64b035, #4caf50, #27852b);
}

.level-container .game-item.medium {
  background: linear-gradient(#f1c40f, #f39c12, #e67e22);
}

.level-container .game-item.hard {
  background: linear-gradient(#e74c3c, #c0392b, #a93226);
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  background-color: rgb(221, 217, 217, 0.2);
  border-radius: 12px;
  padding: 20px;
}

i {
  font-size: 48px;
}

.level {
  font-size: 24px;
  font-weight: bold;
  display: block;
  margin-top: 30px;
}

/* ...................introduction.............. */

section h1 {
  font-size: 40px;
  margin-bottom: 40px;
}

#introduction {
  margin-top: 200px;
  text-align: center;
  min-height: 100vh;
}

.intro-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background-color: rgba(157, 164, 189, 0.2);
  backdrop-filter: blur(10px); /* subtle blur for a frosted glass effect */
  padding: 60px;
  border-radius: 20px;
  border-top: 0.5px solid #d2d4d8;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* subtle shadow for depth */
  margin: 30px auto; /* keep outer spacing from the page edges */
  max-width: 1200px; /* limit max width for better readability */
}

.kim-wrapper {
  position: relative;
}

.intro-container #kim {
  width: 300px;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 10px;
  transition: all 0.3s ease-in-out; /* smooth transition for hover effects */
}

.intro-container #kim:hover {
  transform: scale(1.05); /* subtle zoom effect on hover */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* white glow effect on hover */
  rotate: -5deg; /* slight rotation on hover for a dynamic effect */
  opacity: 0.95; /* slight fade effect on hover for better feedback */
}

.intro-container #gear {
  width: 100px;
  border-radius: 12px;
  object-fit: cover;
  position: absolute;
  top: -20px;
  right: -50px;
  animation: autorotate;
  animation-timeline: view();
  animation-range: cover 0% 80%;
}

@keyframes autorotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.content-container {
  max-width: 700px;
}

.content-container h2,
.about-wrapper h2,
.contact-container h2 {
  font-size: 28px;
  text-align: left;
  margin-bottom: 20px;
  border-bottom: 1px solid #ff3b30; /* red underline for section titles */
  padding-bottom: 10px;
  margin-top: 0;
}

.content-container p {
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  margin-right: 100px;
}

.fade-in {
  opacity: 0;
  transform: translateY(100px);
  animation: fadeInAnimation 1s forwards;
  animation-timeline: view();
  animation-range: cover 0% 30%;
}

@keyframes fadeInAnimation {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------About----------------------------- */

#about {
  min-height: 100vh;
}

.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(157, 164, 189, 0.2);
  backdrop-filter: blur(10px); /* subtle blur for a frosted glass effect */
  padding: 60px;
  border-radius: 20px;
  border-top: 0.5px solid #d2d4d8;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* subtle shadow for depth */
  margin: 30px auto; /* keep outer spacing from the page edges */
  max-width: 1200px; /* limit max width for better readability */
}

.about-container img {
  width: 300px;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 10px;
  transition: all 0.3s ease-in-out; /* smooth transition for hover effects */
}

.about-container img:hover {
  transform: scale(1.05); /* subtle zoom effect on hover */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* white glow effect on hover */
  rotate: -5deg; /* slight rotation on hover for a dynamic effect */
  opacity: 0.95; /* slight fade effect on hover for better feedback */
}

.about-wrapper {
  max-width: 700px;
}

.about-wrapper p {
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  margin-right: 100px;
}

.about-wrapper p a {
  color: #ff3b30; /* red color for links */
  text-decoration: none;
  transition: color 0.3s ease; /* smooth color change on hover */
}

.about-wrapper p a:hover {
  color: #c0392b; /* darker red on hover */
}

/* --------------------------contact----------------------------- */

#contact {
  margin-bottom: 100px;
}

.contact-container {
  background-color: rgba(157, 164, 189, 0.2);
  backdrop-filter: blur(10px); /* subtle blur for a frosted glass effect */
  padding: 60px;
  border-radius: 20px;
  border-top: 0.5px solid #d2d4d8;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* subtle shadow for depth */
  margin: 30px auto; /* keep outer spacing from the page edges */
  max-width: 1200px; /* limit max width for better readability */
}

.contact-container p {
  font-size: 18px;
  line-height: 1.6;
}

.form-container {
  display: flex;
}

.form-container .phone-container {
  max-width: 400px;
  margin-right: 40px;
}

.form-container .phone-container i {
  font-size: 20px;
  color: #ff3b30; /* red color for the phone icon */
  transition: all 0.3s ease-in-out; /* smooth rotation on hover */
}

.form-container .phone-container a {
  text-decoration: none;
  color: inherit; /* inherit color from the parent element */
  transition: color 0.3s ease; /* smooth color change on hover */
}

.form-container .phone-container a:hover {
  color: #ff3b30; /* red color on hover */
}

.form-container .phone-container i:hover {
  transform: rotate(10deg);
}

.form-container form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1; /* allow form to take up remaining space */
}

.form-container form input,
.form-container form textarea {
  border-radius: 10px;
  border: 1px solid #e0e2e6;
  background-color: transparent;
  padding: 20px;
  color: white;
  font-size: 18px;
}

.form-container form textarea {
  resize: vertical; /* allow vertical resizing for textarea */
}

.form-container form input:focus,
.form-container form textarea:focus {
  outline: none;
  border-color: #ff3b30; /* red border on focus for better visibility */
  box-shadow: 0 0 5px rgba(255, 59, 48, 0.5); /* subtle red glow on focus */
}

.form-container form button {
  padding: 20px;
  background-color: transparent;
  color: white;
  border: 1px solid #ff3b30;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* smooth hover effect */
}

.form-container form button:hover {
  background-color: #c0392b; /* darker red on hover */
}

#received {
  font-size: 18px;
  color: #4caf50; /* green color for success message */
  margin-top: 20px;
  display: none;
  opacity: 0;
  text-align: center;
  transition: opacity 0.5s ease-in-out; /* smooth fade-in effect */
}

/* --------------------------footer----------------------------- */

footer {
  text-align: center;
  padding: 20px;
  background-color: rgba(157, 164, 189, 0.2);
  backdrop-filter: blur(10px); /* subtle blur for a frosted glass effect */
  border-top: 0.5px solid #d2d4d8;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* subtle shadow for depth */
  border-radius: 40px;
  margin: 30px auto 100px auto; /* keep outer spacing from the page edges */
  max-width: 1270px; /* limit max width for better readability */
}

footer .footer-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

footer .footer-container a {
  text-decoration: none;
  color: inherit; /* inherit color from the parent element */
}

footer .footer-container i {
  font-size: 35px;
  transition: all 0.3s ease-in-out;
}

footer .footer-container i:hover {
  transform: scale(1.1);
  color: #ff3b30; /* red color on hover */
}