*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h1 {
  color: red;
}
@font-face {
  font-family: 'kidGames';
  src: url(../fonts/Kid\ Games.ttf);
}
@font-face {
  font-family: 'Quantum';
  src: url(../fonts/Quantum.otf);
}
@font-face {
  font-family: "hypik";
  src: url("../fonts/hypik.otf");
}
@font-face {
  font-family: "surfQuestTidal";
  src: url("../fonts/surfquestspacedsemital.ttf");
}
@font-face {
  font-family: "surfQuest";
  src: url("../fonts/surfquestspaced.ttf");
}
@font-face {
  font-family: 'PEOPLEBOOK';
  src: url(../fonts/peopleBook.otf);
}
@font-face {
  font-family: 'Starborn';
  src: url(../fonts/Starborn.ttf);
}
@font-face {
  font-family: 'Tourner';
  src: url(../fonts/Tourner.ttf);
}
.cookies-container {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  border-top: 25px;
}
h1 {
  color: coral;
}
.cookie-container {
  display: flex;
  width: 400px;
  height: 500px;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cookie-container h2 {
  color: white;
  text-shadow: 3px 3px black;
  font-weight: bolder;
}
.cookie-container h3 {
  color: white;
  text-shadow: 3px 3px black;
}
.cookie-container img {
  border-radius: 50%;
  transition: transform 0.25s ease;
  cursor: pointer;
  width: 400px;
}
.cookie-container img:active {
  -webkit-transform: scale(0.5);
  /* or some other value */
  transform: scale(1.3);
}
.join-button {
  font-size: 1.2em;
  font-weight: bolder;
}
.logout-button,
.login-button {
  font-size: 1.6em;
  margin: 1em;
  text-shadow: 0 0 0.125em lightgrey, 0 0 0.5em #1D397A;
  box-shadow: inset 0 0 0.5em 0 #1D397A, 0 0 0.5em 0 #486BBD;
}
.logout-button {
  position: fixed;
  bottom: 50px;
  right: 0;
}
button {
  font-size: 2em;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: white;
  border: #0A1C44 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.3em;
  background-color: #175075;
  text-decoration: solid;
  text-shadow: 0 0 0.125em lightgrey, 0 0 0.5em #1D397A;
  box-shadow: inset 0 0 0.5em 0 #1D397A, 0 0 0.5em 0 #486BBD;
  position: relative;
  border-style: ridge;
  transition: background-color 100ms linear;
}
button::before {
  pointer-events: none;
  content: "";
  position: absolute;
  background-color: black;
  top: 120%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(1.5em) rotateX(50deg) scale(0.75, 0.35);
  filter: blur(1.5em);
  opacity: 0.7;
}
button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: black;
  box-shadow: 0 0 2em 0.5em black;
  opacity: 0;
  background-color: #1D397A;
  z-index: -1;
  transition: opacity 100ms linear;
  transition: 1s;
}
.login-button:hover,
.login-button:focus,
.join-button:focus,
.join-button:hover {
  color: whitesmoke;
  text-shadow: none;
  text-shadow: 0 0 0.125em black, 0 0 0.5em currentColor;
  box-shadow: inset 0 0 0.5em 0 whitesmoke, 0 0 0.5em 0 #7C72E0;
  transition: 0.5s;
}
button:hover,
button:focus {
  color: #7C72E0;
  text-shadow: none;
  text-shadow: 0 0 0.125em black, 0 0 0.5em currentColor;
  box-shadow: inset 0 0 0.5em 0 #7C72E0, 0 0 0.5em 0 #7C72E0;
  transition: 0.75s;
}
button:focus::before,
button:hover::before {
  opacity: 1;
}
button:hover::after,
button:focus::after {
  opacity: 1;
}
button:disabled {
  background-color: grey;
}
.full-screen-container {
  display: flex;
  justify-content: center;
}
.login-container {
  background-image: linear-gradient(#66ADDB, #072A41);
  box-shadow: 0 0 15px black;
  padding: 40px 30px;
  width: 80%;
  max-width: 600px;
  border-radius: 20px;
  margin: 30px;
}
.login-container label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  cursor: pointer;
}
.login-container button {
  width: 300px;
  position: center;
}
.login-container label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFCB05;
  cursor: pointer;
}
.login-container {
  background-image: linear-gradient(#66ADDB, #072A41);
}
.login-title {
  margin: 0;
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: bolder;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
.input-login {
  display: flex;
  flex-direction: column;
}
.login-message {
  color: white;
  font-weight: lighter;
  text-align: center;
  padding: 1em;
}
.register-link {
  color: white;
  font-weight: lighter;
  text-align: center;
  padding: 2px;
}
.input-login label {
  color: white;
  font-weight: lighter;
}
.input-login input {
  font-size: 1.75rem;
  padding: 0.5em;
  background-color: #072A41;
  color: white;
  font-weight: 500;
}
.input-login.valid input {
  box-shadow: 0 0 2px 1px hsl(var(--valid-hsl));
}
.input-login.error input {
  box-shadow: 0 0 2px 1px hsl(var(--error-hsl));
}
.input-login:focus {
  box-shadow: 0 0 2px 1px hsl(var(--primary-hsl));
}
.input-login .msg {
  display: none;
  font-size: 1.4rem;
  font-weight: 500;
}
.input-login.valid .msg,
.input-login.error .msg {
  display: block;
}
.input-login.valid .msg {
  color: hsl(var(--valid-hsl));
}
.input-login.error .msg {
  color: hsl(var(--error-hsl));
}
.login-container label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFCB05;
  cursor: pointer;
}
.login-title {
  margin: 0;
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: bolder;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
}
.input-login {
  display: flex;
  flex-direction: column;
}
.login-message {
  color: white;
  font-weight: lighter;
  text-align: center;
  padding: 1em;
}
.register-link {
  color: white;
  font-weight: lighter;
  text-align: center;
  padding: 2px;
}
.input-login label {
  color: white;
  font-weight: lighter;
}
.input-login input {
  font-size: 1.75rem;
  padding: 0.5em;
  background-color: #072A41;
  color: white;
  font-weight: 500;
}
.input-login.valid input {
  box-shadow: 0 0 2px 1px hsl(var(--valid-hsl));
}
.input-login.error input {
  box-shadow: 0 0 2px 1px hsl(var(--error-hsl));
}
.input-login:focus {
  box-shadow: 0 0 2px 1px hsl(var(--primary-hsl));
}
.input-login .msg {
  display: none;
  font-size: 1.4rem;
  font-weight: 500;
}
.input-login.valid .msg,
.input-login.error .msg {
  display: block;
}
.input-login.valid .msg {
  color: hsl(var(--valid-hsl));
}
form.form {
  display: flex;
}
form.form button {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-bottom: 20px;
}
form.form input {
  max-width: 464px;
}
form.form div.select-edit {
  width: 350px;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #072A41;
  background-image: none;
  flex: 1;
  padding: 0 0.5em;
  color: #fff;
  cursor: pointer;
  font-size: 1em;
  font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
  display: none;
}
.select {
  position: relative;
  display: flex;
  width: 29em;
  height: 3em;
  line-height: 3;
  background: #072A41;
  overflow: hidden;
  border-radius: 0.25em;
  justify-content: center;
}
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #175075;
  cursor: pointer;
  pointer-events: none;
  transition: 0.25s all ease;
}
.select:hover::after {
  color: #7C72E0;
}
a:visited,
a:link {
  color: white;
}
@media only screen and (max-width: 750px) {
  .wrapper {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .login-container {
    max-width: 400px;
    margin: 25px;
  }
  .login-container .login-title {
    font-size: 40px;
  }
  .login-container .form {
    gap: 5px;
  }
  .login-container .form input {
    max-width: 300px;
  }
  .login-container .form .avatar-selector {
    width: 300px;
  }
  .login-container .form div.select {
    width: 300px;
  }
  input {
    height: 40px;
    margin-bottom: 15px;
    font-size: 20px;
  }
  select {
    width: 300px;
  }
}
.lobbyContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px;
  box-shadow: 0 0 0.7em 0 black;
  border-radius: 20px;
  background-color: #dbecfa;
  padding: 20px;
}
.lobbyContainer button {
  margin-left: 0;
  position: relative;
  margin: 40px;
}
.lobbyContainer .infoDiv {
  text-shadow: 2px 2px 2px #574FC2;
  font-size: 2em;
}
.welcome {
  color: white;
  text-shadow: 2px 2px 2px #000000;
  font-weight: bolder;
  margin: 40px;
}
.PlayersContainer {
  height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  gap: 1em;
  margin-bottom: 40px;
}
.players {
  display: flex;
  border-style: ridge;
  padding: 10px;
  color: white;
  background-color: #2E51A0;
  border-radius: 25px;
  font-family: "kidGames";
  flex-direction: row;
  box-shadow: 0 0 0.7em 0 black;
  text-shadow: 2px 2px 2px #000000;
}
.players .avatar {
  margin-left: 10px;
}
.infoDiv {
  border-style: ridge;
  padding: 10px;
  color: white;
  background-color: #2E51A0;
  border-radius: 25px;
  box-shadow: 0 0 0.7em 0 black;
  text-shadow: 3px 3px 3px #000000;
  font-family: "kidGames";
  font-weight: normal;
}
@media only screen and (max-width: 750px) {
  .wrapper .welcome {
    font-size: 50px;
  }
  .lobbyContainer {
    max-width: 330px;
  }
  a button {
    max-width: 300px;
  }
  #root .navBar {
    height: 190px;
  }
}
.breaker {
  font-family: 'kidGames';
  font-size: 1em;
  text-shadow: 3px 3px white;
  color: #574FC2;
  margin: 10px;
  -webkit-text-stroke: 2px #3e0781;
}
.BREAKER {
  font-family: 'kidGames';
  font-size: 8em;
  text-shadow: 3px 3px white;
  color: #574FC2;
  margin: 10px;
  -webkit-text-stroke: 2px #3e0781;
  margin-top: 100px;
}
.welcome {
  font-family: "kidGames";
  text-shadow: 4px 4px black;
  font-weight: normal;
  color: white;
  margin: 10px;
}
.test {
  margin-left: 10px;
}
.mainLobby-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.mainLobby-container h1 {
  color: white;
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: bolder;
  font-size: 56px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-bottom: 50px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.mainLobby-container h2 {
  color: white;
  font-family: "kidGames";
  text-shadow: 3px 3px 3px #000000;
  font-weight: lighter;
  margin: 20px;
}
.gamesContainer {
  display: inline-flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 0 0.7em 0 black;
  border-radius: 20px;
  margin-bottom: 30px;
  background-image: linear-gradient(#3D35A7, #7C72E0, #3D35A7);
}
.eachGame {
  background-color: #dbecfa;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;
  margin: 20px;
}
.eachGame h4 {
  color: #574FC2;
  text-shadow: 2px 2px 2px #000000;
  font-family: "kidGames";
  font-weight: lighter;
  font-size: 1.25em;
  text-align: center;
}
.eachGame span {
  color: darkred;
  text-shadow: 2px 2px 2px #000000;
  font-family: "kidGames";
  font-weight: lighter;
  font-size: 1.25em;
  text-align: center;
}
.eachGame .gameTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eachGame .gameTitle h2 {
  color: #574FC2;
  text-shadow: 2px 2px 2px #000000;
  font-family: "kidGames";
  font-weight: lighter;
  font-size: 1.5em;
  text-align: center;
}
.eachGame .gameTitle .veryHard {
  color: red;
  font-size: 20px;
}
.eachGame .gameTitle .easy {
  color: yellow;
  font-size: 20px;
}
.eachGame .gameTitle .medium {
  color: orange;
  font-size: 20px;
}
.eachGame .gameTitle .hard {
  color: darkred;
  font-size: 20px;
}
.eachGame .gameTitle .star {
  color: #574FC2;
  font-size: 20px;
}
.cookieClicker-mainLobby-container {
  width: 150px;
  height: 150px;
  background-image: url("../images/cookie\ background.jpg");
  background-size: cover;
  border-radius: 20px;
  margin: 20px;
}
.gameTwo-mainLobby-container {
  width: 150px;
  height: 150px;
  background-image: url("../images/cookie\ background.jpg");
  background-size: cover;
  border-radius: 20px;
  margin: 20px;
  background-image: url(https://static.vecteezy.com/system/resources/previews/000/170/873/original/whack-a-mole-gopher-arcade-game-free-vector.jpg);
}
.mainLobby-players-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: none;
  box-shadow: 0 0 0.7em 0 black;
  border-radius: 20px;
  margin-bottom: 30px;
  max-width: 910px;
  height: 400px;
  background-image: linear-gradient(#3D35A7, #7C72E0, #3D35A7);
  overflow-y: scroll;
  overflow-x: hidden;
}
.mainLobby-players-container h4 {
  color: yellow;
  text-shadow: 2px 2px black;
}
.mainLobby-players-container .avatar {
  font-size: 2em;
  text-align: center;
}
.mainLobby-players-container::-webkit-scrollbar {
  display: none;
}
.single-lobby-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #8eb5f4;
  border-radius: 10px;
  padding: 10px;
  border: dimgray;
  box-shadow: 0 0 0.5em 0.5em whitesmoke;
  margin: 20px;
  width: 410px;
  order: 1;
  background-color: #1D397A;
  color: white;
  box-shadow: 0 0 0.7em 0 black;
  order: 2;
}
.single-lobby-player h3 {
  margin: 20px;
}
.main-lobby-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #8eb5f4;
  border-radius: 10px;
  padding: 10px;
  border: dimgray;
  box-shadow: 0 0 0.5em 0.5em whitesmoke;
  margin: 20px;
  width: 410px;
  order: 1;
}
.main-lobby-player h3 {
  margin: 20px;
}
.eachGame:hover {
  box-shadow: 0 0 0.5em 0.1em black;
}
.gameThree-mainLobby-container {
  width: 150px;
  height: 150px;
  background-image: url("../images/cookie\ background.jpg");
  background-size: cover;
  border-radius: 20px;
  margin: 20px;
  background-image: url("../images/memoryGame.png");
}
.gameFour-mainLobby-container {
  width: 150px;
  height: 150px;
  background-image: url("../images/cookie\ background.jpg");
  background-size: cover;
  border-radius: 20px;
  margin: 20px;
  background-image: url("../images//slide\ puzzle\ pic.png");
}
@media only screen and (max-width: 750px) {
  .mainLobby-container .test {
    font-size: 45px;
  }
  .mainLobby-players-container {
    font-size: 9px;
    height: 200px;
  }
  .main-lobby-player {
    width: 180px;
    display: flex;
    margin: 7px;
    padding: 7px;
  }
  .main-lobby-player h3 {
    margin: 7px;
  }
  .single-lobby-player {
    width: 180px;
    display: flex;
    margin: 7px;
    padding: 7px;
  }
  .single-lobby-player h3 {
    margin: 7px;
  }
  .cookieClicker-mainLobby-container {
    height: 80px;
    width: 80px;
    border-radius: 1px;
  }
  .cookieClicker-mainLobby-container .join-button {
    font-size: 10px;
  }
  .cookieClicker-mainLobby-container h2 {
    margin: 5px;
  }
  .gameThree-mainLobby-container {
    height: 80px;
    width: 80px;
    border-radius: 1px;
  }
  .gameThree-mainLobby-container .join-button {
    font-size: 10px;
  }
  .gameThree-mainLobby-container h2 {
    margin: 5px;
  }
  .gameTwo-mainLobby-container {
    height: 80px;
    width: 80px;
    border-radius: 1px;
  }
  .gameTwo-mainLobby-container .join-button {
    font-size: 10px;
  }
  .gameTwo-mainLobby-container h2 {
    margin: 5px;
  }
  .gameFour-mainLobby-container {
    height: 80px;
    width: 80px;
    border-radius: 1px;
  }
  .gameFour-mainLobby-container .join-button {
    font-size: 10px;
  }
  .gameFour-mainLobby-container h2 {
    margin: 5px;
  }
}
.cookieClicker-loading-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('https://previews.123rf.com/images/milkos/milkos1607/milkos160700253/59484343-cookies-and-sweet-biscuits-at-natural-wood-background-with-copy-space-oatmeal-and-chocolate-drops-co.jpg');
  background-position: center;
  background-size: cover;
  height: 800px;
}
.wrapper .word {
  font-size: 90px;
}
.word {
  position: absolute;
  width: 220px;
  height: 220px;
  line-height: 2.5;
  text-align: center;
  font-family: Comic Sans MS, Comic Sans, cursive;
  font-size: 90px;
  font-weight: lighter;
  color: #cb3131;
  text-shadow: 1px 1px 2px black, 0 0 25px #4088B7, 0 0 5px #574FC2;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0px 0px 8px 10px #072A41;
  margin: 0;
  margin-right: 20%;
}
.ready {
  animation: mymove 2s;
  background-image: url(https://cdn.drawception.com/drawings/N0NQDqTXLN.png);
}
.mole-ready {
  animation: mymove 2s;
  background-image: url(https://studio.code.org/media?u=http%3A%2F%2Freputatus.com%2Fimages%2Ficon_256-034.png);
}
.memory-ready {
  animation: mymove 2s;
  background-image: url(https://cdn-icons-png.flaticon.com/512/2665/2665630.png);
}
.slide-ready {
  animation: mymove 2s;
  background-image: url(https://play-lh.googleusercontent.com/3WmU2VWi9SJDJA_OACS0tQ0TejcmVr91ICmyvyW1hS5SLbQCk9G1_ogYRxLWVbUylQ);
}
.set {
  animation: mymove 2s;
  animation-delay: 2s;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTere_YZatyKujC94GCjeIPkrVhvKPnU85ljYtdiN67WfchFZe5V23NOOngdE6hX9mBHrM&usqp=CAU);
}
.mole-set {
  animation: mymove 2s;
  animation-delay: 2s;
  background-image: url(https://www.pngitem.com/pimgs/m/137-1377268_whack-a-mole-mole-hd-png-download.png);
}
.memory-set {
  animation: mymove 2s;
  animation-delay: 2s;
  background-image: url(https://image.winudf.com/v2/image1/Y29tLnNtaWxlcmxlZS5qZXdlbHNfaWNvbl8xNTY2ODkyMjcxXzAzNQ/icon.png?fakeurl=1&h=240&type=webp);
}
.slide-set {
  animation: mymove 2s;
  animation-delay: 2s;
  background-image: url(https://blgiftsimports.com/images/Toys-Novelties/Games/TR14162-Smile-Face-Slide-Puzzle.jpg);
}
.go {
  animation: mymove 2s;
  animation-delay: 4s;
  background-image: url('https://cdn.drawception.com/images/panels/2017/8-31/bceEXf27K8-10.png');
}
.mole-go {
  animation: mymove 2s;
  animation-delay: 4s;
  background-image: url('https://www.kindpng.com/picc/m/659-6596677_whack-a-mole-mole-hd-png-download.png');
}
.memory-go {
  animation: mymove 2s;
  animation-delay: 4s;
  background-image: url('https://www.thegreatapps.com/application/upload/Apps/2018/10/cover-art-animals-memory-game-for-kids-65.png');
}
.slide-go {
  animation: mymove 2s;
  animation-delay: 4s;
  background-image: url('https://content.instructables.com/ORIG/FIE/1R9M/ICG28DTQ/FIE1R9MICG28DTQ.jpg?auto=webp');
}
@keyframes mymove {
  from {
    opacity: 0;
  }
  to {
    margin-left: 20%;
    background-size: cover;
    width: 370px;
    height: 370px;
    line-height: 3.7;
    opacity: 1;
  }
}
@media only screen and (max-width: 850px) {
  .word {
    margin: 0;
    font-size: 50px;
  }
  @keyframes mymove {
    from {
      opacity: 0;
    }
    to {
      background-position: center;
      background-size: cover;
      width: 280px;
      height: 280px;
      line-height: 3.2;
      opacity: 1;
    }
  }
}
.empty-space {
  height: 20px;
}
.winner-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-weight: 600;
  font-size: 2.3vw;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  background-image: url('https://t3.ftcdn.net/jpg/03/51/32/50/360_F_351325048_SNzPFn1qGEVtEqqoxw8SANC12IauVSYo.jpg');
  background-position: center;
  background-size: cover;
  width: 70%;
  height: 70vh;
  border-radius: 50%;
  box-shadow: 0px 0px 8px 10px #072A41;
  margin: auto;
  resize: both;
}
.winner-title .title-word {
  animation: color-animation 4s linear infinite;
  font-family: 'kidGames';
  font-weight: lighter;
}
.winner-title .title-word-1 {
  padding: 0% 5% 0 5%;
  --color-1: #df536a;
  --color-2: #00a9af;
  --color-3: #e8d047;
}
.winner-title .title-word-2 {
  color: white;
  font-family: "kidGames";
  font-size: 2vw;
}
.winner-title .title-word-2 .losers {
  margin: 0;
  font-family: "kidGames";
}
.winner-title .title-word-2 h3 {
  font-family: "kidGames";
}
.winner-star {
  filter: drop-shadow(0 0 10px darkblue);
}
.mole-winner-title {
  background-image: url('https://img.freepik.com/premium-vector/winner-background-with-signs-first-second-third-place-round-pedestal-vector-winner-pod_220217-4098.jpg');
}
.memory-winner-title {
  background-image: url('https://img.freepik.com/free-vector/celebration-confetti-with-podium-platform-white-background_1017-32928.jpg?w=2000');
}
@keyframes color-animation {
  0% {
    color: var(--color-1);
  }
  32% {
    color: var(--color-1);
  }
  33% {
    color: var(--color-2);
  }
  65% {
    color: var(--color-2);
  }
  66% {
    color: var(--color-3);
  }
  99% {
    color: var(--color-3);
  }
  100% {
    color: var(--color-1);
  }
}
.winner-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 750px) {
  .winner-title {
    font-size: 5vw;
  }
  .winner-title .title-word-2 {
    font-size: 4vw;
  }
}
.navBar {
  margin: 0;
  display: flex;
  justify-content: space-between;
  background-color: #486BBD;
  width: 100vw;
}
.navBar .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-direction: row;
}
.navBar .logo a {
  text-decoration: none;
}
.navBar .logo span {
  font-family: 'kidGames';
  font-size: 4em;
  text-shadow: 3px 3px white;
  color: #574FC2;
  margin-bottom: 10px;
  margin-left: 10px;
  -webkit-text-stroke: 0.2px #3e0781;
}
.navBar .logo-title {
  display: flex;
  text-decoration: none;
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px black;
  margin-top: auto;
  margin-bottom: auto;
  font-weight: bolder;
  text-align: center;
}
.footer {
  background-color: #486BBD;
  padding: 5px;
  display: flex;
  width: 100vw;
  position: absolute;
  color: white;
  height: 50px;
}
@media only screen and (max-width: 600px) {
  .navBar {
    display: flex;
    flex-wrap: wrap;
  }
  .dropdown:hover .dropdown-content {
    left: 0;
  }
}
.dropdown {
  display: inline-block;
  position: relative;
  background-color: #486BBD;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.dropdown .menu-button {
  margin-right: 20px;
  width: 120px;
  font-size: 24px;
}
.dropdown:hover .dropdown-content {
  display: block;
  background-color: #486BBD;
  border-radius: 5px;
  margin-right: 30px;
  right: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 190px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-right: 30px;
}
.dropdown-content .menu-item {
  height: 40px;
  font-size: 24px;
  text-decoration: none;
  color: white;
  margin: 9px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.dropdown-content .links {
  padding: 6px;
  border-radius: 6px;
  margin: 5px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.dropdown-content .links:link {
  text-decoration: none;
  color: white;
}
.dropdown-content .links:hover {
  color: #ffffff;
  background-color: #0A1C44;
  cursor: pointer;
}
.dropdown-content .link:visited {
  color: white;
  text-decoration: none;
}
#whack-a-mole {
  background-color: #486BBD;
  border: solid 20px #0A1C44;
  padding: 20px;
  width: 440px;
  display: flex;
  flex-wrap: wrap;
  cursor: url("../images/whackAMole/hammer.png"), auto;
  border-radius: 10px;
  box-shadow: 0 0 0.7em 0 black;
}
#whack-a-mole:active {
  cursor: url("../images/whackAMole/hammer\ slam.png"), auto;
}
.hole {
  background-image: url("https://i.ebayimg.com/images/g/UVAAAOSwQLhjTNc~/s-l500.png");
  background-size: contain;
  width: 110px;
  height: 123px;
  margin: 5px;
}
.mole {
  background-image: url("../images/whackAMole/mole.jpg");
}
.hit {
  background-image: url("../images/whackAMole/angry\ mole.jpg");
}
@media screen and (max-width: 700px) {
  #whack-a-mole {
    width: 380px;
  }
  .hole {
    width: 90px;
    height: 103px;
  }
}
.profile {
  margin: auto;
  width: 500px;
  text-align: start;
  padding: 20px;
  box-shadow: 0 0 15px black;
  border-radius: 20px;
  background-image: linear-gradient(#072A41, #66ADDB);
}
.profile h2 {
  font-weight: bold;
  margin-top: 40px;
  color: #fbeded;
}
.editProfile {
  background-color: #8eb5f4;
  width: 400px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  padding: 50px;
}
.editProfile .form-title {
  font-size: 20px;
  font-weight: bold;
  margin: auto;
  text-align: center;
}
.editProfile form {
  display: flex;
  flex-direction: column;
  justify-content: right;
  gap: 20px;
  margin-top: 30px;
}
.editProfile .form-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.editProfile .form-item input {
  height: 40px;
  border-radius: 5px;
}
.editProfile .avatar-selector-edit {
  max-width: 350px;
}
.editProfile .select-edit {
  width: 350px;
}
.editProfile .select-edit {
  position: relative;
  display: flex;
  height: 3em;
  line-height: 3;
  background: #072A41;
  overflow: hidden;
  border-radius: 0.25em;
  justify-content: center;
  width: 300px;
}
.select-edit::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #175075;
  cursor: pointer;
  pointer-events: none;
  transition: 0.25s all ease;
}
.select-edit:hover::after {
  color: #7C72E0;
}
@media only screen and (max-width: 750px) {
  .profile {
    max-width: 380px;
    font-size: 10px;
  }
  .editProfile {
    width: 300px;
  }
  .editProfile button {
    font-size: 15px;
  }
  .form-item input {
    max-width: 200px;
  }
  div.select-edit {
    max-width: 200px;
  }
  .avatar-selector-edit {
    max-width: 200px;
  }
}
.chart {
  background-color: white;
  width: 90%;
  margin: 5%;
  border-radius: 15px;
  box-shadow: 0 0 5px 5px white;
}
.ranking {
  text-align: center;
  font-size: 2.5em;
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 2px black, 0 0 25px #dae9eb, 0 0 5px #8b0031;
  margin: 0;
}
.chart-empty-space {
  height: 3em;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.memoryWrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.memoryWrapper h1 {
  margin: 20px;
}
.memoryWrapper h2 {
  margin: 20px;
  color: white;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #6563FF;
}
.memory-wrapper {
  padding: 25px;
  border-radius: 10px;
  background: #F8F8F8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.cards,
.card,
.view {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards {
  height: 400px;
  width: 400px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cards .card {
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  height: calc(100% / 4 - 10px);
  width: calc(100% / 4 - 10px);
}
.card.shake {
  animation: shake 0.35s ease-in-out;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-13px);
  }
  40% {
    transform: translateX(13px);
  }
  60% {
    transform: translateX(-8px);
  }
  80% {
    transform: translateX(8px);
  }
}
.card .view {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 7px;
  background: #fff;
  pointer-events: none;
  backface-visibility: hidden;
  box-shadow: 0 3px 10px black;
  transition: transform 0.25s linear;
}
.card .front-view img {
  width: 19px;
}
.card .back-view img {
  max-width: 45px;
}
.card .back-view {
  transform: rotateY(-180deg);
}
.card.flip .back-view {
  transform: rotateY(0);
}
.card.flip .front-view {
  transform: rotateY(180deg);
}
@media screen and (max-width: 700px) {
  .cards {
    height: 350px;
    width: 350px;
  }
  .card .front-view img {
    width: 17px;
  }
  .card .back-view img {
    max-width: 40px;
  }
}
@media screen and (max-width: 530px) {
  .memoryWrapper {
    display: flex;
    align-items: center;
  }
  .memory-wrapper {
    max-width: 370px;
  }
  .cards {
    height: 300px;
    width: 300px;
  }
  .card .front-view img {
    width: 15px;
  }
  .card .back-view img {
    max-width: 35px;
  }
}
.material-icons {
  color: #574FC2;
  font-size: 4em;
}
.slide-game-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#title {
  height: 150px;
  width: 400px;
  text-align: center;
}
#turns {
  font-family: "kidGames";
}
#board {
  width: 359px;
  height: 360px;
  background-color: lightblue;
  border: 10px solid #0c67ae;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
#board {
  margin: 40px;
}
#board img {
  width: 113px;
  height: 113px;
  border: 1px solid #0c67ae;
}
.chatHeader {
  color: white;
  font-size: 40px;
  padding: 20px;
  font-family: "kidGames";
}
.chatRoom {
  background-color: #dbecfa;
  max-height: 600px;
  line-height: 22px;
  padding: 20px;
  border-radius: 25px;
  position: relative;
  color: black;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
}
.chatContainer {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(#3D35A7, #7C72E0, #3D35A7);
  line-height: 22px;
  padding: 20px;
  border-radius: 25px;
  position: relative;
  color: white;
  text-align: center;
  box-shadow: 0 0 0.7em 0 black;
}
.chatRoom::-webkit-scrollbar {
  display: none;
}
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
  margin: 8px;
}
.message .text {
  background-color: #6643a8;
  border-radius: 0px 8px 8px 8px;
  padding: 10px 20px;
  color: white;
}
.message .time {
  font-size: 10px;
}
.message-sent {
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
}
.message-sent .text {
  background-color: #574FC2;
  padding: 10px 20px;
  border-radius: 8px 0px 8px 8px;
}
form span {
  font-size: 24px;
  color: #8eb5f4;
}
input {
  width: 800px;
  height: 44px;
  outline: none;
  font-size: 18px;
  color: black;
  margin-right: 10px;
  margin-top: 20px;
  border-radius: 5px;
  border-color: #0386b1;
  margin-bottom: 15px;
}
input::placeholder {
  color: lightgrey;
}
@media only screen and (max-width: 750px) {
  .chatContainer {
    max-width: 380px;
  }
  input {
    max-width: 320px;
  }
  .chatHeader {
    font-size: 24px;
  }
}
body {
  height: 100%;
  width: 100vw;
  display: grid;
  place-items: center;
  background-image: linear-gradient(#7C72E0, #3D35A7, #7C72E0);
}
html {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
#root {
  width: 100vw;
  height: 100vh;
}
.wrapper {
  min-height: 100vh;
  background-image: linear-gradient(#7C72E0, #3D35A7, #7C72E0);
  display: flex;
  align-items: center;
  flex-direction: column;
}
.wrapper h1 {
  display: flex;
  justify-content: center;
  font-family: "kidGames";
  font-size: 4em;
  text-shadow: 4px 4px black;
  text-align: center;
  font-weight: normal;
  color: white;
}
.winnerSingle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.winnerSingle h1 {
  margin-bottom: 3em;
}
.winnerSingle button {
  width: 300px;
}