* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}

html {
  background: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* Variables */

:root {
  --HHeight: 1rem;
  --HWidth: 4rem;
  --VHeight: 4rem;
  --VWidth: 1rem;
  
  --HMargin: var(--VWidth);
  --VMargin: var(--HWidth);
}

body {
  flex-grow: 1;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  flex-direction: column;
  background: rgb(64, 64, 64);
  max-width: 100%;
  max-height: 100%;
}

footer, #codeText {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
}

footer {
  bottom: 0;
}

#welcomeScreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#endScreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#connectionDiv {
  bottom: 50;
}

#waitDiv {
  bottom: 30;
}

#motherDiv {
  display: flex;
  flex-direction: row;
}

#gameDiv {
  display: flex;
  flex-direction: column;
}

#connectionDiv, #waitDiv {
  display: flex;
  margin-top: 2rem;
  align-self: center;
  position: absolute;
}

.divs {
  display: flex;
}

#youAreDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  flex-direction: row;
  width: 100%;
  top: 15;
}

.emptyDiv {
  flex-grow: 0.6;
}

.scoreDiv {
  justify-content: center;
  align-self: center;
}

.playerDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 0.3;
  position: relative;
  flex-direction: row;
}

.spc {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 1.1rem;
  background: rgb(64, 64, 64);
}

#codeText {
  bottom: 25;
}

#welcomeText, #winnerText {
  margin: 3rem;
}

#winnerText {
  margin-top: 10rem;
  margin-bottom: 2rem
}

#scoresText {
  margin-top: 0rem;
  margin-bottom: 1rem;
}

.text {
  margin: .4rem;
  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;
}

.c1 {
  margin-top: 1rem;
  position: relative;
}

.container {
  font-size: 0;
  display: flex;
  margin: auto;
  justify-content: center;
}

.menuBtn {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: gray;
  border: none;
  border-radius: .2rem;
  padding: .3rem;
}

.menuBtn:hover {
  background-color: darkgray;
}

.endBtn {
  margin: .3rem;
}

.btn {
  background: gray;
  border: none;
}

.btn:hover {
  background:darkgray;
}

.btn-hor {
  width: var(--HWidth);
  height: var(--HHeight);
  margin: 0;
}

.btn-ver {
  width: var(--VWidth);
  height: var(--VHeight);
  margin: 0;
}

.btn-hor.btn-left {
  margin-right: var(--HMargin);
}

.btn-hor.btn-right {
  margin-left: var(--HMargin);
}

.btn-hor.btn-mid.btn-right {
  margin-left: calc(var(--HMargin) / 2);
}

.btn-hor.btn-mid.btn-left {
  margin-right: calc(var(--HMargin) / 2);
}