/* ------------
DEFAULT STYLING
 ----------- */

body {
  margin: 0;
  height: 100vh;
  padding-bottom: 8vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

/* -----------
BUTTON STYLING
 ---------- */

#usr-btn-container, #cpu-btn-container {
  display: flex;
  gap: 150px;

  /* Background styling */
  padding: 30px 60px;
  border-radius: 20px;
}

#usr-btn-container {
  background-color: rgb(0 128 0 / 0.5);
  border: 6px solid rgb(0 128 0);
}

#cpu-btn-container {
  background-color: rgb(255 0 0 / 0.5);
  border: 6px solid rgb(255 0 0);
}

button {
  width: 200px;
  height: 200px;
  border: none;
  cursor: pointer;
  background: transparent center / contain no-repeat;
  transition: scale 0.15s;
}

/* ANIMATIONS */
button:hover {
  scale: 1.08;
}

/* Dont make a click animation if disabled */
#usr-btn-container button:not(:disabled):active {
  scale: 0.95;
}

/* BACKGROUND IMAGES */
#usrRockBtn {
  background-image: url("images/whiteIcons/rock.svg");
}
#cpuRockBtn {
  background-image: url("images/whiteIcons/rock.svg");
}

#usrPaperBtn {
  background-image: url("images/whiteIcons/paper.svg");
}
#cpuPaperBtn {
  background-image: url("images/whiteIcons/paper.svg");
}

#usrScissorsBtn {
  background-image: url("images/whiteIcons/scissors.svg");
}
#cpuScissorsBtn {
  background-image: url("images/whiteIcons/scissors.svg");
}

/* Reset game styling */
#resetBtn {
  background-color: rgb(232 232 232);
  /*border: 6px solid rgb(232 232 232);*/
  border-radius: 10px;
  margin: 25px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 5vh;
}

/* -----------
FOOTER STYLING
 ---------- */

footer {
  /* FIXED FOOTER  STYLING */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8vh;
  /* VISUAL STYLING */
  background-color: #e8e8e8;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}