@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}::selection{color: #fff;background:#56baed;}body{background:#56baed;}.select-box, .play-board, .result-box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: all 0.3s ease;}.select-box{background: #fff;padding: 20px 25px 25px;border-radius: 5px;max-width: 400px;width: 100%;}.select-box.hide{opacity: 0;pointer-events: none;}.select-box header{font-size: 30px;font-weight: 600;padding-bottom: 10px;border-bottom: 1px solid lightgrey;}.select-box .title{font-size: 22px;font-weight: 500;margin: 20px 0;}.select-box .options{display: flex;width: 100%;}.options button{width: 100%;font-size: 20px;font-weight: 500;padding: 10px 0;border: none;background: #56baed;border-radius: 5px;color: #fff;outline: none;cursor: pointer;transition: all 0.3s ease;}.options button:hover,.btn button:hover{transform: scale(0.96);}.options button.playerX{margin-right: 5px;}.options button.playerO{margin-left: 5px;}.select-box .credit{text-align: center;margin-top: 20px;font-size: 18px;font-weight: 500;}.select-box .credit a{color: #56baed;text-decoration: none;}.select-box .credit a:hover{text-decoration: underline;}.play-board{opacity: 0;pointer-events: none;transform: translate(-50%, -50%) scale(0.9);}.play-board.show{opacity: 1;pointer-events: auto;transform: translate(-50%, -50%) scale(1);}.play-board .details{padding: 7px;border-radius: 5px;background: #fff;}.play-board .players{width: 100%;display: flex;position: relative;justify-content: space-between;}.players span{position: relative;z-index: 2;color: #56baed;font-size: 20px;font-weight: 500;padding: 10px 0;width: 100%;text-align: center;cursor: default;user-select: none;transition: all 0.3 ease;}.players.active span:first-child{color: #fff;}.players.active span:last-child{color: #56baed;}.players span:first-child{color: #fff;}.players .slider{position: absolute;top: 0;left: 0;width: 50%;height: 100%;background: #56baed;border-radius: 5px;transition: all 0.3s ease;}.players.active .slider{left: 50%;}.players.active span:first-child{color: #56baed;}.players.active span:nth-child(2){color: #fff;}.players.active .slider{left: 50%;}.play-area{margin-top: 20px;}.play-area section{display: flex;margin-bottom: 1px;}.play-area section span{display: block;height: 90px;width: 90px;margin: 2px;color: #56baed;font-size: 40px;line-height: 80px;text-align: center;border-radius: 5px;background: #fff;}.result-box{padding: 25px 20px;border-radius: 5px;max-width: 400px;width: 100%;opacity: 0;text-align: center;background: #fff;pointer-events: none;transform: translate(-50%, -50%) scale(0.9);}.result-box.show{opacity: 1;pointer-events: auto;transform: translate(-50%, -50%) scale(1);}.result-box .won-text{font-size: 30px;font-weight: 500;display: flex;justify-content: center;}.result-box .won-text p{font-weight: 600;margin: 0 5px;}.result-box .btn{width: 100%;margin-top: 25px;display: flex;justify-content: center;}.btn button{font-size: 18px;font-weight: 500;padding: 8px 20px;border: none;background: #56baed;border-radius: 5px;color: #fff;outline: none;cursor: pointer;transition: all 0.3s ease;}

body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #04AA6D;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}