@import url("https://fonts.googleapis.com/css?family=Cute Font");

body {
    background: rgb(255, 142, 191);
    background: radial-gradient(circle, rgb(255, 130, 184) 0%, rgb(255, 132, 226) 100%);
    background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	font-family: 'Cute Font';
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

h1 {
    color: white;
	font-size: 40px;
	text-align: center;
}

p {
    color: whitesmoke;
	font-size: 30px;
	text-align: center;
}

button {
	height: 2em;
	width: 7em;
	border: none;
	border-radius: 10em;
	background: #000000;
	font-size: 17px;
	color: #ffffff;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
}
   
button:hover {
	animation: shake 0.3s linear infinite both;
}

.btn-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20px; 
	padding-top: 20px;
}

.loader {
	display: flex;
	justify-content: center;
	align-items: center;
	--color: hsl(0, 0%, 87%);
	--animation: 2s ease-in-out infinite;
}
  
.loader .circle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 20px;
	height: 20px;
	border: solid 2px var(--color);
	border-radius: 50%;
	margin: 0 10px;
	background-color: transparent;
	animation: circle-keys var(--animation);
}
  
.loader .circle .dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--color);
	animation: dot-keys var(--animation);
}
  
.loader .circle .outline {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: outline-keys var(--animation);
}
  
.circle:nth-child(2) {
	animation-delay: 0.3s;
}
  
.circle:nth-child(3) {
	animation-delay: 0.6s;
}
  
.circle:nth-child(4) {
	animation-delay: 0.9s;
}
  
.circle:nth-child(5) {
	animation-delay: 1.2s;
}
  
.circle:nth-child(2) .dot {
	animation-delay: 0.3s;
}
  
.circle:nth-child(3) .dot {
	animation-delay: 0.6s;
}
  
.circle:nth-child(4) .dot {
	animation-delay: 0.9s;
}
  
.circle:nth-child(5) .dot {
	animation-delay: 1.2s;
}
  
.circle:nth-child(1) .outline {
	animation-delay: 0.9s;
}
  
.circle:nth-child(2) .outline {
	animation-delay: 1.2s;
}
  
.circle:nth-child(3) .outline {
	animation-delay: 1.5s;
}
  
.circle:nth-child(4) .outline {
	animation-delay: 1.8s;
}
  
.circle:nth-child(5) .outline {
	animation-delay: 2.1s;
}

.coolinput {
	display: flex;
	flex-direction: column;
	width: fit-content;
	position: static;
	max-width: 240px;
	gap: 10px;
	align-items: center;
  }
  
  .coolinput label.text {
	font-size: 0.75rem;
	color: #818CF8;
	font-weight: 700;
	position: relative;
	top: 0.5rem;
	margin: 0 0 0 7px;
	padding: 0 3px;
	width: fit-content;
  }
  
.coolinput input[type=text].input {
	padding: 11px 10px;
	font-size: 0.75rem;
	border: 2px #818CF8 solid;
	border-radius: 5px;
	background: #e8e8e8;
}
  
.coolinput input[type=text].input:focus {
	outline: none;
}

#hvd {
    position: relative;
    top: 60px;
    flex-direction: column;
    justify-content: flex-end;
    background-color: #000000; 
    color: #ffffff; 
    transition: background-color 0.3s, color 0.3s;
}

@media (max-width: 600px) {
	h1 {
		font-size: 30x;
	}
	#hvd {
		top: 30px;
	}
}

.snowflake {
	color: #ffceda;
	font-size: 1em;
	font-family: Arial, sans-serif;
	text-shadow: 0 0 5px #000;
  }
   
.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}
  
@keyframes circle-keys {
	0% {
	  transform: scale(1);
	  opacity: 1;
	}
  
	50% {
	  transform: scale(1.5);
	  opacity: 0.5;
	}
  
	100% {
	  transform: scale(1);
	  opacity: 1;
	}
}
  
@keyframes dot-keys {
	0% {
	  transform: scale(1);
	}
  
	50% {
	  transform: scale(0);
	}
  
	100% {
	  transform: scale(1);
	}
}
  
@keyframes outline-keys {
	0% {
	  transform: scale(0);
	  outline: solid 20px var(--color);
	  outline-offset: 0;
	  opacity: 1;
	}
  
	100% {
	  transform: scale(1);
	  outline: solid 0 transparent;
	  outline-offset: 20px;
	  opacity: 0;
	}
}

@keyframes shake {
	0% {
	 -webkit-transform: translate(0);
	 transform: translate(0);
	}
   
	20% {
	 -webkit-transform: translate(-2px, 2px);
	 transform: translate(-2px, 2px);
	}
   
	40% {
	 -webkit-transform: translate(-2px, -2px);
	 transform: translate(-2px, -2px);
	}
   
	60% {
	 -webkit-transform: translate(2px, 2px);
	 transform: translate(2px, 2px);
	}
   
	80% {
	 -webkit-transform: translate(2px, -2px);
	 transform: translate(2px, -2px);
	}
   
	100% {
	 -webkit-transform: translate(0);
	 transform: translate(0);
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.paper {
	background-color: pink;
	padding: 40px;
	width: 100%;
	max-width: 80%;
	margin: 2rem auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border: 1px solid white;
	background-image: url('../images/letter.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 60px 60px; 
	border-radius: 8px;
	box-sizing: border-box;
	overflow-wrap: break-word;
}
  
.paper p {
	font-size: 50px;
	margin: 0;
	padding: 10px 0;
	line-height: 50px;
	color: black;
	text-align: left;
}

.paper h1 {
	font-size: 50px;
	margin: 0;
	padding: 10px 0;
	line-height: 28px;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	color: black;
}

.hide {
	display: none;
}
.btn-active {
	background-color: white;
	color: black;
}
.btn-inactive {
	background-color: black;
	color: white;
}

.cardbox {
	background-color: pink;
	padding: 40px;
	width: 80%;
	max-width: 700px;
	margin: 2rem auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border: 1px solid white;
	border-radius: 8px;
	background-image: url('../images/bow.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 60px 60px; 
	overflow-wrap: break-word;
 }

.cardbox p {
	font-size: 50px;
	margin: 0;
	padding: 10px 0;
	line-height: 28px;
	color: black;
}

.cardbox h1 {
	font-size: 50px;
	margin: 0;
	padding: 10px 0;
	line-height: 28px;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	color: black;
}

.heart {
	top: 34px;
	left: 43%;
	position: relative;
	height: 70px;
	width: 70px;
	background: #EE2A7B;
	transform: rotate(-45deg);
	box-shadow: -10px -10px 90px #EE2A7B;
	animation: anim 0.6s linear infinite;
}
  
@keyframes anim {
0% {
	transform: rotate(-45deg) scale(1.07);
	filter: blur(0px);
}
80% {
	transform: rotate(-45deg) scale(1);
	filter: blur(1px);
}
100% {
	transform: rotate(-45deg) scale(0.8);
	filter: blur(2px);
}
}

.heart:before {
	content: "";
	position: absolute;
	height: 70px;
	width: 70px;
	background: #EE2A7B;
	top: -50%;
	left: 0;
	border-radius: 50px;
}
.heart:after {
	content: "";
	position: absolute;
	height: 70px;
	width: 70px;
	background: #EE2A7B;
	right: -50%;
	border-radius: 50px;
}

.songbox {
	background-color: pink;
	padding: 40px;
	width: 80%;
	max-width: 700px;
	margin: 2rem auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border: 1px solid white;
	border-radius: 8px;
	background-image: url('../images/dance.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 60px 60px; 
	overflow-wrap: break-word;
 }

 
.songbox h1 {
	font-size: 50px;
	margin: 0;
	padding: 10px 0;
	line-height: 28px;
	color: black;
}

.reasonbox {
	background-color: pink;
	padding: 40px;
	width: 100%;
	max-width: 80%;
	margin: 2rem auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border: 1px solid white;
	background-image: url('../images/hearts.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 60px 60px; 
	border-radius: 8px;
	box-sizing: border-box;
	overflow-wrap: break-word;
}
  
.reasonbox p {
	font-size: 50px;
	border-bottom: 1px solid black;
	margin: 0;
	padding: 10px 0;
	line-height: 28px;
	color: black;
	text-align: left;
}

.reasonbox h1 {
	font-size: 50px;
	margin: 0;
	padding: 10px 0;
	line-height: 28px;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	color: black;
}

@media (max-width: 768px) {
	.heart {
		left: 40%;
	}
	.paper {
		max-width: 100%;
		padding: 10px;
	}
	.paper p {
	  font-size: 28px; 
	  line-height: 30px;
	  padding: 0%;
	}
	.paper h1 {
		font-size: 30px; 
	}
	.cardbox {
		padding: 20px;
	}
	.cardbox p {
		font-size: 28px; 
	}
	.cardbox h1 {
		font-size: 20x; 
	}
	.songbox h1 {
		font-size: 10x; 
	}
	.reasonbox {
		max-width: 100%;
		padding: 10px;
	}
	.reasonbox p {
	  font-size: 28px; 
	  padding: 0%;
	}
	.reasonbox h1 {
		font-size: 30px; 
	}
  }