body {
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	  font-weight: 100;
	  font-style: normal;
	  font-variation-settings:
		"wdth" 100;
}

.container {
	text-align: center;
}

.logo {
	width: 80vw;
	max-width: 1024px;
	opacity: 0;
	transform: scale(0.9);
	animation: fadeInLogo 2s ease-out 0s 1 forwards;
}

p {
	margin-top: 20px;
	font-size: 17px;
	color: #333;
	opacity: 0;
	animation: fadeInText 1.5s ease-out forwards;
	animation-delay: 2.5s; /* 2 seconds for logo animation + 0.5 second delay */
}

.text-boxes {
	margin-top: 8vh;
	opacity: 0;
	animation: fadeInText 1.5s ease-out forwards;
	animation-delay: 2.5s; /* 2 seconds for logo animation + 0.5 second delay */
	display: flex;
	justify-content: center;
	gap: 20px;
}

.textbox {
	width: 400px;
	padding: 10px;
	font-size: 16px;
	
}
h1{
	font-family: "Libre Baskerville", serif;
	  font-weight: 400;
	  font-style: italic;
}


@keyframes fadeInLogo {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeInText {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 600px) {
	.text-boxes {
		flex-direction: column;  /* Stack text boxes vertically */
		gap: 10px;  /* Reduce gap between text boxes */
	}

	.textbox {
		width: 100%;  /* Make text boxes full width */
	}
	body{
		height: auto;
		font-size: 10px;
	}
	h1{
		font-size: 15px;
	}
	p{
		font-size: 13px;
	}
}