@import url(__normalize.scss);
@import url(button.css);
@import url(animation.css);
@import url(congrats_table.css);
@import url(media_queries.css);
@import url("https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Oxanium:wght@200..800&display=swap");
html {
  background-color: #150332;
  background-image: repeating-linear-gradient(to right, rgba(116, 34, 189, 0.1) 0, rgba(116, 34, 189, 0.1) 3px, transparent 5px, transparent 80px), repeating-linear-gradient(to bottom, rgba(116, 34, 189, 0.1) 0, rgba(116, 34, 189, 0.1) 3px, transparent 5px, transparent 80px);
}

.enter_names_fields_wrapper {
  padding-top: 0px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 30px auto 0 auto;
}
.enter_names_fields_wrapper #enter_names_fields {
  display: flex;
  gap: 50px;
}
.enter_names_fields_wrapper #enter_names_fields label {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.enter_names_fields_wrapper #enter_names_fields label p {
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
}
.enter_names_fields_wrapper #enter_names_fields label input {
  height: 40px;
  border: none;
  font-family: "Kode Mono", monospace;
  font-weight: bold;
  color: #FFF;
  font-size: 24px;
  font-weight: 500;
  max-width: 180px;
  background-color: transparent;
  margin-top: 5px;
  margin-left: 10px;
}
.enter_names_fields_wrapper #enter_names_fields label #playerX_name, .enter_names_fields_wrapper #enter_names_fields label #player0_name {
  position: absolute;
  top: 20px;
}
.enter_names_fields_wrapper #enter_names_fields label .fake-placeholder {
  position: absolute;
  left: 80px;
  top: 34%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: "Kode Mono", monospace;
  font-weight: bold;
  color: #FFF;
  font-size: 20px;
}
.enter_names_fields_wrapper #enter_names_fields label input:not(:-moz-placeholder) ~ .fake-placeholder {
  display: none;
}
.enter_names_fields_wrapper #enter_names_fields label input:not(:placeholder-shown) ~ .fake-placeholder, .enter_names_fields_wrapper #enter_names_fields label input:focus ~ .fake-placeholder {
  display: none;
}
.enter_names_fields_wrapper #enter_names_fields label .fp-r {
  padding-left: 60px;
}
.enter_names_fields_wrapper #enter_names_fields label input:focus {
  outline: none;
}
.enter_names_fields_wrapper #enter_names_fields span {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
  font-family: "Kode Mono", monospace;
  font-weight: bold;
  color: #FFF;
  font-size: 39px;
  margin-top: 10px;
}
.enter_names_fields_wrapper #enter_names_fields label::after {
  background-image: url(../assets/triangle.svg);
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 40px;
  display: block;
  position: absolute;
}
.enter_names_fields_wrapper #enter_names_fields .playerX_wrapper::after {
  left: 30px;
  transform: rotate(180deg);
  top: 25px;
}
.enter_names_fields_wrapper #enter_names_fields .player0_wrapper::after {
  right: 30px;
  top: 30px;
}

.turn {
  text-align: center;
  font-family: "Kode Mono", monospace;
  font-weight: bold;
  color: #FFF;
  font-size: 30px;
  margin: 0 !important;
  transition: opacity 0.5s ease;
}

.gamefield_wrapper {
  width: 32vw;
  height: 32vw;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../assets/Board.svg);
  background-size: 32vw 32vw;
}
.gamefield_wrapper p.turn {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.gamefield_wrapper .gamefield {
  display: grid;
  width: 22vw;
  height: 22vw;
  margin: 50px auto 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

button[disabled] {
  box-shadow: none;
  color: #818181;
}

.restart_btn {
  margin-bottom: 30px;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  border: none;
  margin-right: 1px;
  margin-bottom: 1px;
  color: #FFF;
}

.XcellHover {
  background-image: linear-gradient(rgba(21, 3, 50, 0.5), rgba(21, 3, 50, 0.5)), url(../assets/X.svg);
  background-size: cover;
  height: 80%;
}

.OcellHover {
  background-image: linear-gradient(rgba(21, 3, 50, 0.5), rgba(21, 3, 50, 0.5)), url(../assets/O.svg);
  background-size: cover;
  height: 88%;
}

.Xcell {
  background-image: url(../assets/X.svg);
  background-size: cover;
}

.Ocell {
  background-image: url(../assets/O.svg);
  background-size: cover;
}

#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  #fx {
    display: none;
  }
}
.ts_logo {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}/*# sourceMappingURL=styles.css.map */