*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-size: 62.5%; /** Reset para REM - 62.5% | 10px en rem son 16px normales **/
}
body {
	min-height: 100vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background: url(../img/F4.jpg) no-repeat;
	background-size: cover;
}
.container-main {
	width: 20rem;
	height: 30rem;
	box-shadow: 2rem 2rem 3rem rgba(0, 0, 0, 0.5);
	perspective: 100rem;
	background: url(../img/3.jpg) no-repeat;
	transition: 1s;
}
.container-main .container-img {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #000;
	transition: 1s;
	transform-origin: left;
	transform-style: preserve-3d;
}
.container-main:hover .container-img {
	box-shadow: 2rem 2rem 3rem rgba(0, 0, 0, 0.5);
	transform: rotateY(-180deg);
}
.container-main .container-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0rem;
	left: 0rem;
}
.container-main .container-img img:nth-child(2) {
	transform: rotateY(-180deg);
}
.input-name, .timer, .note {
	display: flex;
	justify-content: center;
	align-items: center;
}
.input-name input {
	position: absolute;
	width: 18rem;
	height: 3rem;
	padding-left: 1rem;
	top: 8.6rem;
	font-size: 1.6rem;
	outline: none;
}
.timer span {
	position: absolute;
	top: 17.8rem;
	font-size: 3rem;
}
.note .warning {
	position: absolute;
	display: none;
	top: 23rem;
	font-size: 2rem;
	color: #F42C2C;
}