@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&family=Montserrat&family=Permanent+Marker&family=Press+Start+2P&display=swap");

:root {
	--backgroundColor: rgba(246, 241, 209);
	--colorShadeA: rgb(33, 151, 135);
	--colorShadeB: rgb(48, 174, 154);
	--colorShadeC: rgb(77, 220, 193);
	--colorShadeD: rgb(114, 220, 209);
	--colorShadeE: rgb(132, 243, 230);
}

html {
	height: 100%;
	background-image: linear-gradient(#85cdca, #41b3a3);
}

.button-panel img {
	max-height: 128px;
	max-width: 128px;
	width: auto;
	height: auto;
}

h2 {
	font-family: "Press Start 2P", cursive;
	color: #f9faf8;
	text-align: left;
	margin-top: 15px;
	margin-left: 10px;
}

.rule {
	font-family: "Permanent Marker", cursive;
	font-size: 20px;
	text-align: center;
}

.rule span {
	font-family: "Permanent Marker", cursive;
	font-size: 25px;
	font-weight: bolder;
}

.round-paragraph {
	font-family: "Press Start 2P", cursive;
	font-size: 30px;
	text-align: center;
	margin-top: 30px;
}

.round-counter {
	color: #c38d9e;
}

.scores {
	display: flex;
	justify-content: space-between;
	font-family: "Montserrat", sans-serif;
	margin: 10px 30%;
}

.scores p {
	font-size: 30px;
}

.scores span {
	font-family: "Permanent Marker", cursive;
	font-weight: bold;
	color: #c38d9e;
}

.gesture-panel p {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 25px;
	text-align: center;
}

.button-panel {
	display: flex;
	justify-content: center;
	gap: 100px;
}

.zoom {
	transition: transform 0.2s;
}

.zoom:hover {
	transform: scale(1.5);
}

.scissors-zoom {
	transition: transform 0.2s;
}

.scissors-zoom:hover {
	transform: rotate(-90deg) scale(1.4);
}

.round-status {
	display: flex;
	justify-content: center;
	font-family: "Press Start 2P", cursive;
	text-align: center;
	margin: 50px 0;
	font-size: 18px;
	font-weight: bold;
}

.choices {
	display: flex;
	justify-content: space-between;
	margin: 10px 30%;
	font-family: "Montserrat", sans-serif;
}

.choices p {
	font-size: 30px;
}

.player-gesture,
.ai-gesture {
	font-size: 80px;
}

button.squishy-button {
	padding: 1em 2em;
	border: 2px solid var(--colorShadeA);
	border-radius: 1em;
	background: var(--colorShadeE);
	transform-style: preserve-3d;
	transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.squishy-button::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--colorShadeC);
	border-radius: inherit;
	box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
	transform: translate3d(0, 0.75em, -1em);
	transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.squishy-button:hover {
	background: var(--colorShadeD);
	transform: translate(0, 0.375em);
}

button.squishy-button:hover::before {
	transform: translate3d(0, 0.75em, -1em);
}

button.squishy-button:active {
	transform: translate(0em, 0.75em);
}

button.squishy-button:active::before {
	transform: translate3d(0, 0, -1em);

	box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}

button.swal2-styled.swal2-confirm {
	border: 2px solid var(--colorShadeA);
	border-radius: 1em;
	background: var(--colorShadeE);
	margin-bottom: 15px;
	color: #006666;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 19px;
	font-weight: bold;
}

#swal2-html-container {
	font-size: 18px;
}