style_tr.css

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

* {
  font-family: "Gabarito", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
}

body {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  line-height: 140%;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 20px;
}

a {
  margin: 5px;
}

.mt-1 {
  margin-top: 20px;
}

.pt-5 {
  font-size: 14px;
  line-height: 140%;
  padding: 5px 35px;
  padding-top: 5vh;
}

#dark {
  color: #3a3a3c;
  width: 32px;
  height: 32px;
}

#info {
  color: #3a3a3c;
  width: 32px;
  height: 32px;
}

#stats {
  color: #3a3a3c;
  width: 32px;
  height: 32px;
}
.ikonlar {
  display: flex;
  width: 300px;
  height: 50px;
}
.baslik {
  display: flex;
  width: 300px;
  height: 50px;
background-image: url("https://uploads-ssl.webflow.com/5eda2d07e219c8dc92000955/66696709130b91241f685602_Icon.svg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 48px 48px;
  padding-left: 60px;
}


#lang {
  display: none;
  color: #3a3a3c;
  position: absolute;
  font-size: larger;
  top: 6.5vh;
  right: 0.5vh;
}

.piggy {
  color: #3a3a3c;
  position: absolute;
  top: 0.2vh;
}

#ipucuu {
  color: #3a3a3c;
  position: absolute;
  width: 48px;
  height: 48px;
  top: 3.8vh;
  font-size: x-large;
}

#ipucu {
  color: #3a3a3c;
  position: absolute;
  top: 4.8vh;
  left: 3.5vh;
}

#dailyCounterr {
  color: #3a3a3c;
  position: absolute;
  top: 8.2vh;
}

#dailyCounter {
  position: fixed;
  top: 10.4vh;
  left: 4.6vh;
}

#languageSelect {
  font-size: large;
}

.hidden {
  display: none;
}

a {
  color: #3a3a3c;
  bottom: 20%;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

a:hover {
  color: #000;
}

.game-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  zoom: 0.6;
}

.end-game-container {
  height: 30vh;
  width: 30vh;
  display: flex;
  font-size: 14px;
  line-height: 140%;
  align-items: center;
  background-color: #f8f8f8;
  text-align: center;
  vertical-align: middle;
}

.end-game-container h1 {
  height: 30vh;
  font-size: 14px;
  line-height: 140%;
  display: flex;
  align-items: center;
  background-color: #1da8e9;
  text-align: center;
  vertical-align: middle;
}

.title-container {
  text-align: center;
  width: 650px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
  padding-bottom: 10px;
  margin-top: 20px;
  border-bottom: 1px solid black;
}

.tile-container {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 5px;

  box-sizing: border-box;
  width: 650px;
  max-width: 100vh;
  height: 780px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.tile-container div {
  display: flex;
}


.baslik h1 {
  height: 48px;
  font-size: 20px;
  padding-top: 4px;
}

.tile-container .tile {
  width: 124px;
  height: 124px;
  border: 3px solid #b9b9b9;
  border-radius: 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  margin-right: 2px;
}

.board-container {
  display: flex;
  justify-content: start;
  align-items: baseline;
  flex-grow: 1;
  overflow: hidden;
  width: 100%;
  max-width: 100vh;
  zoom: 0.7;
}
#board {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.key-container {
  width: 620px;
  display: flex;
  position: center;
  flex-wrap: wrap;
  position: fixed;
  bottom: 5px;
}

.key-container button {
  width: 52px;
  height: 84px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  padding: 4px;
  background-color: #dedede;
  margin: 2px;
  color: #000;
}
.key-container button:nth-child(1) {
  margin-left: 25px;
}

.key-container button:nth-child(11) {
  width: 52px;
  margin-left: 15px;
}
.key-container button:nth-child(12) {
  width: 50px;
}
.key-container button:nth-child(13),
.key-container button:nth-child(14),
.key-container button:nth-child(15),
.key-container button:nth-child(16),
.key-container button:nth-child(17),
.key-container button:nth-child(18),
.key-container button:nth-child(19),
.key-container button:nth-child(20),
.key-container button:nth-child(21) {
  width: 50px;
}

.key-container button:nth-child(23),
.key-container button:nth-child(24),
.key-container button:nth-child(25),
.key-container button:nth-child(26),
.key-container button:nth-child(27),
.key-container button:nth-child(28),
.key-container button:nth-child(29),
.key-container button:nth-child(30) {
  width: 50px;
}

.key-container button:nth-child(22) {
  width: 100px;
  font-size: 10px;
}
.key-container button:nth-child(31) {
  width: 80px;
  font-size: 24px;
}

#end-container {
  border-radius: 10px;
  padding: 10px;
  margin: 0;
}

#end-container p {
  padding: 50px;
}

.message-container p {
  background-color: #0a0a0abb;
  border-radius: 20px;
  color: #fff;
  padding: 40px 20px 40px 20px;
  margin: 0;
  font-size: 12px;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.container {
  display: none;
  width: 75%;
  height: 60%;
  max-width: 90vh;
  max-height: 90vh;
  position: fixed;
  background-color: #ffffff;
  border-radius: 20px;
  margin-top: 120px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border: 1px solid #939393;
  color: #161616;
}

#results {
  padding: 0;
}

#infoo {
  padding: 20px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 140%;
}

#infoo p {
  font-size: 14px;
  line-height: 140%;
}
infoo h3 {
  font-size: 18px;
  margin-top: 50px;
}

#statss {
  position: absolute;
  padding: 10px 0 10px 0;
  white-space: pre-wrap;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#gameEnd {
  padding: 6vh;
  white-space: pre-wrap;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#results p {
  padding: 90px;
}

#close {
  position: relative;
  white-space: pre-wrap;
  font-size: 36px;
}

#resultLogo {
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 40%;
  text-align: center;
  font-size: xx-large;
  border: 3px solid #3a3a3c;
  padding: 10px;
}

.footer {
  color: #3a3a3c;
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
}

.instagram {
  color: rgb(131, 58, 180);
}

.tile.flip {
  animation: 0.5s linear flipping;
}

@keyframes flipping {
  0% {
    transform: rotateX(0deg);
  }

  50% {
    transform: rotateX(90deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

.grey-overlay {
  background-color: #3a3a3c !important;
  border: none !important;
  color: #fff !important;
}

.yellow-overlay {
  background-color: #fcd53f !important;
  border: none !important;
}

.green-overlay {
  background-color: #00d26a !important;
  border: none !important;
  color: #fff !important;
}

/* // Extra small devices (portrait phones, less than 576px) */
@media (min-width: 575.98px) {
  .game-container {
    /*background-color: #161616;*/
    zoom: 0.9;
  }
}

/* // Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) {
  .game-container {
    /*background-color: #161616;*/
    zoom: 0.8;
  }
}

/* // Medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) {
  .game-container {
    /*background-color: #161616;*/
    zoom: 0.7;
  }
}

/* // Large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) {
  .game-container {
    /*background-color: #161616;*/
    zoom: 0.6;
  }
}

.dark-mode {
  background-color: #161616 !important ;
  color: #ccc !important;
}

.dark-mode a {
  background-color: #161616 !important ;
  color: #ccc !important;
}

.dark-mode span {
  background-color: #161616 !important ;
  color: #ccc !important;
}

.dark-mode #endContainer {
  background-color: #161616 !important ;
  color: #ccc !important;
}

.dark-mode .baslik  {
  background-image: url("https://uploads-ssl.webflow.com/5eda2d07e219c8dc92000955/666976e4224f6cdeec0d542f_icon-disi.svg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 48px 48px;
}

button {
  color: #fff;
  background-color: #161616;
  border-color: #222;
  border-radius: 20px;
  text-transform: uppercase;
}
.button-container {
  text-align: center;
  width: 600px;
  margin: auto;
  display: none;
}

/* Add the necessary styles to position the userCoinContainer */
.userCoinContainer {
  position: fixed;
  display: none;
  top: 2vh;
  /* Adjust the top position as needed */
  left: 10px; /* Adjust the right position as needed */
  z-index: 999; /* Ensure it's on top of other elements if necessary */
}

#userCoinDisplay {
  position: fixed;
  top: 2.5vh;
  left: 5.3vh; 
}

#dailyWordButton {
  border: none;
  border-radius: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  padding: 15px;
}

.wordButton {
  background-color: #00d26a;
  border: none;
  border-radius: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  margin-top: 40px;
  padding: 16px;
}

#graphContainer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;

  margin-left: 5px;
}

.bar {
  width: 40px;
  background-color: #007bff;
  margin-bottom: 10px;
}

/* Customize the colors for each bar */
#bar1 {
  height: 20px;
}
#bar2 {
  height: 40px;
}
#bar3 {
  height: 60px;
}
#bar4 {
  height: 80px;
}
#bar5 {
  height: 100px;
}
#bar6 {
  height: 120px;
}