@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans:600');


:root {
	--main-color: #000;
	--secondary-color: #31acef;
	--sans: "josefin sans", sans serif;
}



.container {
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* margin-left: -200px; */
  /* margin-top: -200px; */
  width: 400px;
  height: 400px;
	/* background: var(--main-color); */
  border-radius: 5px;
  font-family: "dancing script", cursive;
  overflow: hidden;
  color: rgb( 121, 125, 127 );
  letter-spacing: .5px;
}

.hidden {
  display: none;
}

.inner {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1s;
  visibility: hidden;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
	height: 60%;
	transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
	box-shadow: 0 0 1.5rem rgba(0, 0, 0, .5);
	font-size: 1.3rem;
}


.number::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -30px;
  width: 90px;
  height: 180px;
  background: var(--secondary-color);
  transform: rotate(-45deg);
  z-index: -1;
	box-shadow: 0 0 .7rem rgba(0, 0, 0, .5);
}

.number {
	font-family: var(--sans);
  position: absolute;
  margin: 0;
  top: 15px;
  right: 15px;
  color: fade-out(#fff, .3);
}

.quote {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	font-size: 1em;
}

.credit {
	position: absolute;
	top: 60%;
	right: 5%;
	font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
	&::before {
		content: "⸛ ";
		vertical-align: middle;
		font-size: 1.4rem;
	}
}

.fas {
	font-size: 3.5rem;
	position: absolute;
	top: 12%;
	left: 7%;
	color: rgba(100, 58, 122, .2);
}

input {
  width: 100%;
  transition: .3s;
}


.button p {
  background: #31acef;
  text-align: center;
  color: #fff;
	padding: 1rem 0;
	width: 100%;
	font-family: var(--sans);
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	transition: .2s ease-out;
}

.button p:hover {
  background: var(--secondary-color);
  cursor: pointer; 
}

#card-one:checked ~ .container .inner-one, 
#card-two:checked ~ .container .inner-two, 
#card-three:checked ~ .container .inner-three {
  opacity: 1;
  visibility: visible;
}

#card-one:checked ~ .container .inner-two, 
#card-two:checked ~ .container .inner-three, 
#card-three:checked ~ .container .inner-one {
    transform: scale(.85);
  transform: scale(1) translate(-20rem);
}