body {
	background: #3F5EFB;
	background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);

	font-family: 'Waiting for the Sunrise', cursive; 
	font-size:40px; 
	letter-spacing: 6px; 
}
h1 {
	font-family: 'Waiting for the Sunrise', cursive; 
	font-size:60px; 
	letter-spacing: 6px; 
	font-weight: bold;
}

@keyframes fadein {
	0% {   opacity: 0; }
	100% { opacity: 100; }
}

@keyframes wronginput {
	0% {background-color: rgba(231, 73, 123,0.2);}
	100% {background-color: rgba(255, 39, 39,0.3);}

}

@keyframes correctinput {
	0% {background-color: rgba(231, 73, 123,0.2);}
	100% {background-color: rgba(39, 255, 39,0.3);}

}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(1deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-5px, 5px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

#content {
	max-width: 800px;
	width: 90%;
	margin: auto;
	position: relative;
}

#gift {
	text-align: center;
}

#header h1 {
}

#header p {
	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 3s;
	animation-delay: 1s;
}


#gift img {
	width: 50%;
	margin: auto;
	display: block;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 2s;
	animation-delay: 4s;
}

#gift img:hover {
	box-shadow: 0 0 100px greenyellow;
}

.box {
	background-color: rgba(0,0,0,0.5);
	padding: 40px;
	border-radius: 20px;
	position: absolute;
	top: 5%;
	left: 0px;
	right: 0;
	min-height: 80%;
	text-align: center;
}

#pswd {
	color: #ee4876;
	font-weight: bold;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 1s;
	animation-delay: 0s;
}

#pswd #prompt {
	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 1s;
	animation-delay: 1s;
}

#pswd input {
	border: 10px black;
	border-bottom-width: 10px;
	border-bottom-style: none;
	border-bottom-color: black;
	outline: none;
	padding: 5px;

	text-align: center;
	text-transform: uppercase;

	font-family: 'Waiting for the Sunrise', cursive; 
	letter-spacing: 10px; 
	font-size: 40px;
	border-bottom: 5px solid #e7497b;
	background-color: rgba(231, 73, 123,0.2);
	border-radius: 10px;

	color: white;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 1s;
	animation-delay: 2s;
}

#pswd #side {
	font-size: 28px;
	letter-spacing: 3px;
	width: 75%;
	margin: auto;
	padding: 20px;

	color: #bd38b8;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 0.5s;
	animation-delay: 4s;
}

#reward {
	color: #ee4876;
	font-weight: bold;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 2.5s;
	animation-delay: 2.5s;
}

#reward h1 {
	animation-name: shake;
	animation-duration: 1s;
	animation-iteration-count: infinite;

	margin: 10px;
}



#reward #side {
	font-size: 28px;
	letter-spacing: 3px;
	width: 75%;
	margin: auto;
	padding: 20px;

	color: #bd38b8;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 1s;
	animation-delay: 3s;
}

@keyframes tbellzooom {
	0% { opacity: 0; transform: scale(.2) }
	50% { opacity: 1; transform: scale(1.4) }
	80% { opacity: 1; transform: scale(1.4) }
	100% { opacity: 1; transform: scale(1) }
}


#tbell {
}

#giftcard {
	position: relative;
}

#giftcard img {
	animation-fill-mode: both;
	animation-name: tbellzooom;
	animation-duration: 5s;
	animation-delay: 7s;
}

#giftcard h2 {
	font-family: "Honk", system-ui;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
		"MORF" 15,
		"SHLN" 50;

	position: absolute;
	top:5%;

	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 1s;
	animation-delay: 11s;
}

#subtitle {
	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 0.5s;
	animation-delay: 14s;
}

#final {
	animation-fill-mode: both;
	animation-name: fadein;
	animation-duration: 0.5s;
	animation-delay: 14.5s;

	font-size: 28px;
	letter-spacing: 3px;
	width: 75%;
	margin: auto;
	padding: 20px;

	color: #bd38b8;
}