/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
  --saskatchatoon-green_20: hsl(148, 20%, 38%, 0.2);

  /* Pretentious names */
  --white-day: hsl(0, 0%, 100%);
  --dark-night: hsl(240, 3%, 13%);
  --background-targets: hsl(240, 2%, 20%);

  --ff-urbanist: 'Urbanist', sans-serif;

  --fs-1: 4.8rem;
  --fs-2: 4rem;
  --fs-3: 3.4rem;
  --fs-4: 2.4rem;
  --fs-5: 2rem;
  --fs-6: 1.8rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;
  --fs-9: 1.3rem;

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --section-padding: 35px;

  --shadow-1: 0 8px 16px var(--black_15);
  --shadow-2: 0 4px 10px var(--black_5);

  --radius-5: 5px;
  --radius-7: 7px;
  --radius-10: 10px;
  --radius-50: 50%;

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 1s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a,
img,
span,
input,
button,
ion-icon { display: block; }

a {
  text-decoration: none;
  color: inherit;
}

img { height: auto; }

input,
button {
  background: none;
  border: none;
  font: inherit;
}

input { width: 100%; }

button { cursor: pointer; }

ion-icon {
  pointer-events: none;
  --ionicon-stroke-width: 25px;
}

html {
  font-family: var(--ff-urbanist);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark-night);
  font-size: 1.6rem;
  font-weight: var(--fw-500);
  line-height: 1.6;
  overflow: hidden;
}


.background {
  position: absolute;
  width: 110%;
  height: 110%;
  top: 0;
  left: 0;
  background-color: var(--dark-night);
  background: radial-gradient(circle, transparent 20%, var(--dark-night) 20%, var(--dark-night) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, var(--dark-night) 20%, var(--dark-night) 80%, transparent 80%, transparent) 25px 25px, linear-gradient(var(--background-targets) 2px, transparent 2px) 0 -1px, linear-gradient(90deg, var(--background-targets) 2px, var(--dark-night) 2px) -1px 0;
  background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
  opacity: 0.6;
  z-index: -1;
  /* animation: slide 5s linear infinite; */
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50px, -50px, 0);
  }
}

.rock-paper-scissors {
  width: 100%;
  display: flex;
  padding: 30px;
  gap: 20px;
}

.game-screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.top-textbox {
  font-size: var(--fs-3);
  color: var(--white-day);
  padding-top: 30px;
  padding-left: 30px;
}

/* .sidebar {
  width: 30%;
  padding-top: 74px;
} */

.sidebar-content {
  border: 1px solid var(--white-day);
  border-radius: var(--radius-10);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.sidebar-title {
  font-size: var(--fs-3);
  color: var(--white-day);
}

.sidebar-text {
  font-size: var(--fs-6);
  color: var(--white-day);
}

.player-menus {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}




.player-viewbox {
  border-radius: var(--radius-10);
  border: 1px solid var(--white-day);
  width: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;

  padding: 25px;
}

.player-viewbox.winner {
  background-color: rgba(57, 255, 57, 0.315);
}

.player-title {
  font-size: var(--fs-4);
  color: var(--white-day);
}

.player-title.selected {
  color: rgb(102, 189, 68);
}

.large-choice-display {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 250px;

  position: relative;
}

.player-score-count {
  display: flex;
  align-items: center;
  gap: 10px;
}

button {
  backdrop-filter: blur(1px);
  background-color: rgba(214, 214, 214, 0.199);
  border-radius: var(--radius-10);
  border: 1px solid var(--white-day);
  color: var(--white-day);
  font-size: var(--fs-3);
  padding: 10px;
  transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

#next-round:hover {
  background-color: rgba(255, 255, 255, 0.288);
  transform: translateY(-5px);
}

.game-result {
  background-color: rgba(214, 214, 214, 0.199);
  border-radius: var(--radius-50);
  border: 1px solid var(--white-day);
  padding: 25px;
}

.game-result.win {
  background-color: rgba(104, 235, 100, 0.644);
}

.p1 img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.img-display img {
  position: absolute;
  left: 140px;
}

.timer-bar {
	height: 22px;
  width: 100%;

	overflow: hidden;
	position: relative;

  border: 1px solid var(--white-day);
  border-radius: var(--radius-10);
}

.timer-fill {
	width: calc(100% - 12px);
	height: 8px;
	transition: background-color 0.6s ease;
  background-color: rgb(255, 255, 255);
  transform: translate(6px, 6px);
  border-radius: var(--radius-7);
}


.choose-option-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.choose-move {
  backdrop-filter: blur(1px);
  background-color: rgba(214, 214, 214, 0.199);
  border-radius: var(--radius-10);
  border: 1px solid var(--white-day);
  padding: 5px;
  transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.choose-move span {
  color: var(--white-day);
  font-size: var(--fs-4);
  font-weight: var(--fw-600);
}

.choose-move.selected,
.choose-move:hover {
  background-color: rgba(255, 255, 255, 0.384);
  transform: translateY(-5px);
}