* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background: url(./svgBackgrounds/RandomizedPatternDark.svg);
	background-size: contain;
	color: white;
	font-family: 'Exo', sans-serif;
	font-style: italic;
	font-weight: bolder;
	font-size: 1.5em;
}
button {
	font-family: 'Exo', sans-serif;
	font-size: 0.65em;
}

/*estilos del intro-page*/

#title {
	font-size: 3em;
	text-align: center;
	line-height: 15vh;
	width: 50vw;
}

/*estilos de la inputPage*/
#inputPageTitle {
	font-size: 2.5em;
}
input {
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: solid 2px white;
	border-radius: 2px;
	text-align: center;
	font-size: 20px;
	height: 36px;
	width: 200px;
	text-transform: capitalize;
}
input:focus {
	border: solid 2px #a169ff;
}

/*estilos en común de introPage e inputPage*/
.introPage,
.inputPage {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}
#introBtn,
#inputBtn {
	border: solid 3px white;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	padding: 1.2em;
	display: block;
	animation: scaleButton 1s ease-in-out infinite both;
	background-color: rgba(0, 0, 0, 0.2);
}
#introBtn:hover,
#inputBtn:hover {
	background-color: rgba(0, 0, 0, 0.5);
	border: solid 3px #a169ff;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.6);
}
#introBtn:active,
#inputBtn:active {
	color: #450057;
	background-color: rgba(255, 255, 255, 0.9);
}

/*estilos del gamepage*/
.gamePage {
	height: 99.5vh;
	display: grid;
	grid-template-rows: 25vh 15vh 50vh 10vh;
}

#playerHandSelection {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	justify-items: center;
	align-items: center;
	grid-row-gap: 0.5em;
}
#playBtnContainer {
	display: flex;
	justify-content: center;
	align-items: center;
}

#playerHandSelectionTitle {
	grid-column: 2;
	grid-row: 1;
	text-align: center;
}

.rockBtn,
.paperBtn,
.scissorsBtn {
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	cursor: pointer;
	border: solid 1px white;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	grid-row: 2;
	border-radius: 5px;
}
#playBtn {
	cursor: pointer;
	border: none;
	padding: 1.5em;
	border-radius: 5px;
	color: #450057;
}

#handsContainer {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
#playerHandContainer,
#computerHandcontainer {
	height: 280px;
	width: 304px;
}
#playerHandContainer {
	transform: rotateY(180deg);
}

#scoreboard {
	font-style: normal;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-content: center;
	justify-items: center;
}

#computerName,
#playerName {
	width: 130px;
}
#playerName {
	text-align: end;
}
#computerScore,
#playerScore {
	width: 50px;
	height: 60px;
	text-align: center;
	padding-top: 10px;
	font-style: normal;
	border: solid white 2px;
	border-radius: 3px;
}
/*class para los botones cuando se los clikean:*/
.selectedButton {
	border: solid 3px #a169ff;
	color: white;
	background-color: #450057;
	animation: selectedButton 0.3s;
}

/* CLass que se añade a las secciones que quiero que desaparezcan */
.hide {
	display: none !important;
}
/*class que se añade al mensaje de ganador del juego*/
.message {
	height: 100vh;
	font-size: 2em;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*********************************** ANIMACIONES ***********************************************/

/*animación de clik de botón*/
@keyframes selectedButton {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}

/*animación de aparición de paginas*/
.appearEffect {
	animation: appearEffect 2s linear;
}
@keyframes appearEffect {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
/* animación de boton de pagina de inicio*/
@keyframes scaleButton {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/*animación del scoreboardbox*/
.flip-scale-down-ver {
	animation: flip-scale-up-ver 1s ease-in-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-12-4 0:49:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-scale-down-ver
 * ----------------------------------------
 */
@keyframes flip-scale-up-ver {
	0% {
		transform: scale(1) rotateY(0);
	}
	50% {
		transform: scale(2.5) rotateY(180deg);
	}
	100% {
		transform: scale(1) rotateY(720deg);
	}
}
/*animacion de las manos*/
.handAnimation {
	animation: handAnimation 1.7s ease-in-out both;
}
@keyframes handAnimation {
	0% {
		transform: translateY(-30px);
	}
	16% {
		transform: translateY(100px);
	}

	32% {
		transform: translateY(-30px);
	}
	48% {
		transform: translateY(100px);
	}
	64% {
		transform: translateY(-30px);
	}
	80% {
		transform: translateY(100px);
	}
	100% {
		transform: translateY(0px);
	}
}

.playerHandAnimation {
	animation: playerHandAnimation 1.7s ease-in-out both;
}
@keyframes playerHandAnimation {
	0% {
		transform: translateY(-30px) rotateY(180deg);
	}
	16% {
		transform: translateY(100px) rotateY(180deg);
	}

	32% {
		transform: translateY(-30px) rotateY(180deg);
	}
	48% {
		transform: translateY(100px) rotateY(180deg);
	}
	64% {
		transform: translateY(-30px) rotateY(180deg);
	}
	80% {
		transform: translateY(100px) rotateY(180deg);
	}
	100% {
		transform: translateY(0px) rotateY(180deg);
	}
}

@media (max-width: 720px) {
	#title {
		width: 70vw;
		font-size: 2em;
	}
	#inputPageTitle {
		text-align: center;
		font-size: 2em;
	}
	.introPage,
	.inputPage {
		min-height: 400px;
		max-height: 100vh;
	}
	.gamePage {
		grid-template-rows: 15vh 15vh 25vh 20vh;
		grid-gap: 8vh;
	}
	#playerHandSelection {
		grid-template-rows: unset;
		grid-row-gap: unset;
	}

	#playerHandSelectionTitle {
		display: none;
	}
	#playBtn {
		padding: 1em;
	}
	.rockBtn,
	.paperBtn,
	.scissorsBtn {
		padding: 0.5em 1em;
	}
	#handsContainer {
		align-items: flex-start;
	}
	#playerHandContainer,
	#computerHandcontainer {
		width: max-content;
	}
	img {
		object-fit: cover;
		height: 133px;
		width: 144px;
	}

	#scoreboard {
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: 35% 65%;
		font-size: 20px;
	}
	#playerName,
	#computerName {
		text-align: center;
		align-self: center;
		justify-self: center;
	}
	#playerScore,
	#computerScore {
		grid-row: 2;
		align-self: center;
		justify-self: center;
	}
	#computerScore,
	#computerName {
		grid-column: 3;
	}
	#vs {
		display: none;
	}
	.message {
		font-size: 1.7em;
	}
}