@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body{
				
	                        background: white;
				font-family: Poppins;
}


.g1{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;
}

.images1 img{
				width: 150px;
}

.images1{
				position: absolute;
				top: 0;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap:2em;
				margin-left: 1em;
				margin-right: 1em;
}

.group1{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr ;
				gap:2em;
				margin-left: 1em;
				margin-right: 1em;
				z-index: 55;
				margin-top: 2em;
				opacity:;
}

.group1 button{
				padding-left: 30px;
				padding-right: 30px;
				padding-top: 5px ;
				padding-bottom:5px ;
				font-weight: bold;
				font-family: Poppins;
	    z-index: 4444;
	    border: 2px solid red;
}
.group1 button:hover{
				background: white;
				border: 2px solid black;
}

.ask{
				
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				border-radius: 5px;
			z-index: 5555555;
				padding-top: 1em;
				padding-bottom: 1em;
				text-align: center;
				margin-top: em;
			position: relative;											
										
}

.btn{
				display: flex;
				justify-content:center;
				align-items: center;
				gap: 2em;				
}

#btn1{
				padding-left: 30px;
				padding-right: 30px;
				padding-top: 5px ;
				padding-bottom:5px ;
				font-weight: bold;
				font-family: Poppins;
				border: 2px solid black;
}
#btn1:hover{
				background: white;
				border: 2px solid black;
}
#btn2:hover{
				background: white;
				border: 2px solid black;
}
#btn2{
				padding-left: 30px;
				padding-right: 30px;
				padding-top: 5px ;
				padding-bottom:5px ;
				font-weight: bold;
				font-family: Poppins;
				border: 2px solid red;
				
	
}

.crush{
				font-size: 25px;
				margin-bottom: 2em;
				font-weight: bold;
				color: black;
}
#hands{
				width: 50px;
				position: absolute;
				top: 9em;
				left: 1em;
				animation: bounce2 2s ease infinite;
				opacity: 0;
}
#sadman{
				transform: translateY(-2em);		
				opacity: 0;
}
#hang{
		transform: translateY(-4em);		
		opacity: 0;
}
#frog{
				transform: translateY(-4em);	
				opacity: 0;	
}

#hahahuhu{
				opacity: 0;
}

#sadcat{
				opacity: 0;
}
#sadboi{
				opacity: 0;
}

#crying{
				opacity: 0;
}
#sadsad{
				opacity: 0;
}


@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-20px);}
	60% {transform: translateY(-15px);}
}

/*BUTTONS OPACITY*/

#btt1{
				opacity: 0;
}
#btt2{
				opacity: 0;
}
#btt3{
				opacity: 0;
}
#btt4{
				opacity: 0;
}
#btt5{
				opacity: 0;
}
#btt6{
				opacity: 0;
}
#btt7{
				opacity: 0;
}
#btt8{
				opacity: 0;
}
#btt9{
				opacity: 0;
}
#btt10{
				opacity: 0;
}
#btt11{
				opacity: 0;
}
#btt12{
				opacity: 0;
}

       /*BUTTONS2 OPACITY*/
#bbtt1{
				opacity: 0;
}
#bbtt2{
				opacity: 0;
}
#bbtt3{
				opacity: 0;
}
#bbtt4{
				opacity: 0;
}
#bbtt5{
				opacity: 0;
}
#bbtt6{
				opacity: 0;
}
#bbtt7{
				opacity: 0;
}
#bbtt8{
				opacity: 0;
}
#bbtt9{
				opacity: 0;
}
#bbtt10{
				opacity: 0;
}
#bbtt11{
				opacity: 0;
}
#bbtt12{
				opacity: 0;
}

.fff{
display: flex;
				justify-content: center;
				align-items: center;
}

.sadcat{
	width: 320px;
	height: 240px;
}