.navbar {
  background-color: #333;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.navbar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-menu .navbar-item {
  margin-left: 2rem;
}
.navbar-menu .navbar-item a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 3px;
}
.navbar-menu .navbar-item a:hover {
  background-color: #ccc;
  color: #333;
}
.navbar-menu .navbar-item a.active {
  background-color: #ff6347;
}

@keyframes cross-right {
  0% {
    background-position-y: 0%;
    transform: rotate(0deg);
  }
  50% {
    background-position-y: 60%;
    transform: rotate(0deg);
  }
  100% {
    background-position-y: 100%;
    transform: rotate(-45deg);
  }
}
@keyframes cross-left {
  0% {
    background-position-y: 0%;
    transform: rotate(0deg);
  }
  50% {
    background-position-y: 60%;
    transform: rotate(0deg);
  }
  100% {
    background-position-y: 100%;
    transform: rotate(45deg);
  }
}
@keyframes o-win {
  from {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 0%, white 0);
  }
  10% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 10%, white 0);
  }
  20% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 20%, white 0);
  }
  30% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 30%, white 0);
  }
  40% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 40%, white 0);
  }
  50% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 50%, white 0);
  }
  60% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 60%, white 0);
  }
  70% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 70%, white 0);
  }
  80% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 80%, white 0);
  }
  90% {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 90%, white 0);
  }
  to {
    background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 100%, white 0);
  }
}
.f {
  background-color: gray;
}

.line {
  width: 10%;
  transform-origin: bottom;
  background-size: 100% 300%;
  background-image: linear-gradient(transparent 0% 49%, black 51% 100%);
}

.x {
  display: flex;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.x > .line {
  position: relative;
  bottom: 18%;
  background-position: bottom;
  height: 130%;
}
.x > .line-l {
  animation: cross-left 2s;
  transform: rotate(45deg);
}
.x > .line-r {
  animation: cross-right 2s;
  transform: rotate(-45deg);
}
.x > .krydsbole_inner {
  opacity: 0;
}
.x > .krydsbole_outer {
  opacity: 0;
}

.n {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.n > .line {
  background-position: top;
}

.o {
  height: 100%;
  width: 100%;
  background: radial-gradient(closest-side, white 69%, transparent 70% 89%, white 90% 100%), conic-gradient(black 100%, white 0);
  animation: o-win 2s;
  overflow: hidden;
}
.o > .line {
  height: 100%;
  opacity: 0;
}

.game-con {
  display: flex;
  height: min(90vh, 100vw);
  justify-content: center;
}

.ultimate-tic-tac-toe-log-con {
  flex: 0.5;
}
.ultimate-tic-tac-toe-log-con button {
  border-style: hidden;
  background-color: transparent;
}

.ultimate-tic-tac-toe-rules-con {
  flex: 0.5;
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but {
  border-radius: 10px;
  display: flex;
  border-style: hidden;
  background-color: transparent;
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but h2 {
  margin: 0;
  padding: 0;
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but .butline {
  position: absolute;
  width: 1.3em;
  height: 0.1em;
  background-color: black;
  transition: transform 0.5s ease-in-out;
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but .but-con {
  padding: 0.2em;
  position: relative;
  width: 1.3em;
  height: 1.3em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but:hover {
  background-color: rgba(0, 0, 0, 0.1333333333);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but:hover .butline-1 {
  transform: rotate(30deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but:hover .butline-2 {
  transform: rotate(120deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but:hover .active-1 {
  transform: rotate(195deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but:hover .active-2 {
  transform: rotate(-255deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but:hover h2 {
  color: rgba(17, 17, 17, 0.6784313725);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but .butline-1 {
  transform: rotate(0deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but .butline-2 {
  transform: rotate(90deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but .active-1 {
  transform: rotate(225deg);
}
.ultimate-tic-tac-toe-rules-con .ultimate-tic-tac-toe-rules-but .active-2 {
  transform: rotate(-225deg);
}
.ultimate-tic-tac-toe-rules-con ul {
  margin: 0.2em 0 0.2em 0;
  list-style-type: none;
  padding-inline-start: 0.5em;
}
.ultimate-tic-tac-toe-rules-con ul p {
  padding-inline-start: 1em;
  margin: 0.2em 0 0.2em 0;
}

.krydsbole {
  aspect-ratio: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.krydsbole .krydsbole_outer {
  display: grid;
  background-color: black;
  row-gap: 5px;
  column-gap: 5px;
  width: 100%;
  height: 90%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.krydsbole .krydsbole_outer .krydsbole_outer_felt {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: white;
  justify-content: center;
  align-items: center;
}
.krydsbole .krydsbole_outer .krydsbole_outer_felt .krydsbole_inner {
  display: grid;
  aspect-ratio: 1;
  background-color: black;
  row-gap: 5px;
  column-gap: 5px;
  width: 90%;
  height: 90%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.krydsbole .krydsbole_outer .krydsbole_outer_felt .krydsbole_inner .krydsbole_inner_felt {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  background-color: white;
}

.pick-oppnent-con h2 {
  margin-bottom: 15px;
  font-family: "Arial", sans-serif;
  font-size: 1.5rem;
}
.pick-oppnent-con .pick-oppnent-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.pick-oppnent-con .pick-oppnent-ul .pick-oppnent-li {
  margin-bottom: 15px;
}
.pick-oppnent-con .pick-oppnent-ul .pick-oppnent-li a {
  text-decoration: none;
  font-family: "Arial", sans-serif;
  font-size: 1.2rem;
  color: #fff;
  padding: 10px 20px;
  display: block;
  border-radius: 5px;
  background-color: #444; /* Dark background for each option */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover and active transition */
}
.pick-oppnent-con .pick-oppnent-ul .pick-oppnent-li a:hover {
  background-color: #666; /* Slightly lighter background on hover */
  transform: scale(1.05); /* Slight zoom-in effect */
}
.pick-oppnent-con .pick-oppnent-ul .pick-oppnent-li a:active {
  background-color: #333; /* Darker color when clicked */
  transform: scale(0.95); /* Slight zoom-out effect when clicked */
}