.gamescontent{
  display:flex;
  flex-wrap: wrap;
  padding:10px;
  margin:10px;
  padding-left: 20px;
  align-content: center;
}
.oyun_card {
  max-width: 180px;
  height: 180px;
  border-radius: 20px;
  border: 2px solid rgb(11, 175, 156); 
  box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.03),
    0 22.3px 17.9px rgba(0, 0, 0, 0.05);
  padding: 10px; 
  flex: 1 1 auto;
  text-align: center;
}
.oyun_card a:visited, a:hover {
  text-decoration: none;
}
.oyun_card img {
  border-radius: 20px;
  width: 120px;
  height: 120px;
  border: 4px solid rgba(229, 216, 117, 0.846);
} 
.oyun_card:hover {
  background: rgba(255, 193, 7, 1);
  background: linear-gradient(
    45deg,
    rgb(123, 218, 208) 0%,
    rgb(25, 172, 177) 100%
  );
  background: -moz-linear-gradient(
    300deg,
    rgb(123, 218, 208) 0%,
    rgb(25, 172, 177) 100%
  );
  background: -webkit-linear-gradient(
    300deg,
    rgb(123, 218, 208) 0%,
    rgb(25, 172, 177) 100%
  );
}
.oyun_card h3{
  display:inline;
  font-size:medium;
  color: #fff;
  background-color: transparent;
} 
.oyun_card:hover .English{
  color:rgb(72, 72, 70);
  font-size: smaller;
  display:block;
}


/*--------------------------- oyun1  ****/

.game-container {
  display: flex;
  justify-content: space-around;
  gap: 20px 20px;
  background-color: antiquewhite;
}
.game-container .column {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  width: 30%;
}

li.draggable {
  cursor: grab;
  margin: 5px 0px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

li.droppable {
  padding: 2px;
  text-align: center;
  border: 2px dashed #ccc;
  margin: 0px 0;
}
li.droppable.hovered {
  background-color: #e0ffe0;
}
.column h3 {
  text-align: center;
}

.game-container ul {
  list-style-type: none;
  padding: 0;
}

.game-container li {
  margin: 5px 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.game-container li.matched {
  background-color: #c8e6c9;
  cursor: not-allowed;
}

.game-container li img {
  width: 70px; /* Adjust to desired width */
  height: 70px; /* Adjust to desired height */
  object-fit: cover; /*Ensures the image fits within the specified dimensions */
  border: 1px solid #ccc; /* Optional: Adds a border for better visibility */
  border-radius: 5px; /* Optional: Adds rounded corners */
  margin: 1px; /* Optional: Adds spacing around the images */
}

/*--------------------------iki_OYUN---------------*/
.body-iki { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  min-height: 50vh; 
} 

.root-iki, .root-uc, .root-bes { 
  font-size: x-large; 
  width: 30%;
  color: rgb(16, 15, 15); 
  background-color: rgb(100, 180, 240); 
  box-shadow: 0 6px 5px rgba(128, 128, 128, 0.37); 
  padding: 0% 5% 1% 5%; 

  text-align: center; 
  border-radius: 5px 0; 
} 
@media (min-width: 800px) {
  .root-iki { 
    margin-left: 1%;
    width: 60%;
  }
} 

@media (max-width: 900px) {
  .root-iki { 
    margin-left: 1%;
    width: 80%;
  }
} 
@media (max-width: 780px) {
  .root-iki { 
    margin-left: 1%;
    width: 97%;
  }
  .oyun-iki{
    transform: scale(0.8); /* Scale down to 80% */
    transform-origin: top left; /* Ensure scaling starts from the top-left corner */
    padding: 8px; /* Reduce padding proportionally */
  }
} 

#hint{
  font-size: 14px;
  color: rgb(218, 215, 189);
}

.title { 
  border-bottom: 4px dashed; 
  border-color: rgb(139, 5, 139); 
} 

.input-iki { 
  color: rgb(48, 46, 46); 
  font-size: 20px; 
  padding-left: 10px; 
  outline: 2px rgb(111, 110, 110); 
} 


.foot-iki { 
  margin-bottom: 0%; 
  display: flex; 
  width: 100%; 
} 

.foot-iki > button { 
  width: 48%; 
  padding: 1%; 
  margin: 1%; 
  background-color: rgb(41, 117, 41); 
  border-radius: 5px; 
  border-color: rgb(29, 90, 29); 
  font-size: 14px; 
}


.letter-pool {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.letter {
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  cursor: grab;
  background-color: #f0f0f0;
  user-select: none;
}
.drop-zone {
  display: inline-block;
  width: 40px;
  height: 50px;
  border: 2px dashed #333;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
  background-color: #fff;
}
.drop-zone.correct {
  background-color: #a8e6a8; /* Light green for correct */
  border-color: green;
}
.drop-zone.incorrect {
  background-color: #f8a8a8; /* Light red for incorrect */
}
#message, #tip {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
#try-again {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  width: auto;
}
#try-again:hover {
  background-color: #0056b3;
}

@media (max-width: 780px) {
  .root-uc { 
    margin-left: 1%;
    width: 97%;
  }
} 

/*--------------------------uc_OYUN---------------*/
.body-uc { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  min-height: 50vh; 
} 

.root-uc { 
  color: whitesmoke; 
  background-color: rgb(160, 99, 126); 
} 

@media (max-width: 900px) {
  .root-uc { 
    margin-left: 1%;
    width: 80%;
  }
} 
@media (max-width: 780px) {
  .root-uc { 
    margin-left: 1%;
    width: 97%;
  }
} 
.arka{
  background-image: repeating-linear-gradient(0deg,#0c9a8e 10%,#0e696f 4%,#505faa 10%);
  -webkit-animation: dalga  60s infinite linear;
  animation: dalga 60s infinite linear; 
}
@keyframes dalga{
  0%  {background-color: rgb(83, 140, 140);}
  10% {background-color: rgb(161, 54, 72) }
}

@-webkit-keyframes  dalga{
      0%  { background-color: rgb(82, 84, 84);}
      10% {background-color: rgb(118, 17, 86) }
}

/*------------------- dinle oyun ---------------*/
#text-to-read{
  color: #000;
  max-width: 350px;
}
#voice-select {

  color: rgb(80, 34, 68); /* Default color for text in the dropdown */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Style individual options */
.voicelistOPT {
  color: rgb(80, 34, 68);
}
/*--------------------------bes_OYUN---------------*/
.root-bes{ 
  background-color: rgb(57, 151, 57); 
}
@media (max-width: 900px) {
  .root-bes { 
    margin-left: 1%;
    width: 80%;
  }
} 
@media (max-width: 780px) {
  .root-bes { 
    margin-left: 1%;
    width: 97%;
  }
}