@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
  user-select: none;
}
body {
  width: 100vw;
  height: 100vh;
}
.game {
  width: 100%;
  height: 100%;
  display: flex;
}
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 43%;
  height: 100%;
  background: #DDD;
  user-select: none;
}
.sep {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14%;
  height: 100%;
  background: #FFFF00;
}
.sep-display {
  z-index: 100;
  font-size: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sep-display * {
  text-align: center;
}
.sep-display .sep-vs {
  /* margin: 66px; */
}
.bot {

}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  font-size: 25px;
  cursor: pointer;
  width: 200px;
  height: 200px;
}
.cardbot {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  font-size: 25px;
  width: 200px;
  height: 200px;
}
.r {
  background: royalblue;
}
.p {
  background: plum;
}
.s {
  background: slategray;
}
.end-screen {
  z-index: -10000;
  opacity: .3;
  position: fixed;
  background: #000;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.end-screen p {
  color: #F1E05A;
  opacity: 1;
  font-size: 50px;
}
#you {
  font-size: 80px;
}