Simo/src/components/contact.astro

<div
	id="contact"
	class="window"
	style="position: absolute; left: 15%; top: 22%; display: none;"
>
	<div id="contactheader" class="title-bar">
		<div class="title-bar-text">Contact</div>
		<div class="title-bar-controls">
			<button class="close" aria-label="Minimize" style="background-color: silver;"></button>
			<button class="close" aria-label="Close" style="background-color: silver;"></button>
		</div>
	</div>
	<div class="window-body">
		<div class="field-row-stacked">
			<!-- prettier-ignore -->
			<textarea
          readonly
          id="text203"
          style="font-size: 22px; resize: none; padding: 10px;"
          >Email : simon@simo.ng
Discord : s1monlol</textarea>
		</div>
	</div>
</div>

<style>
	/* Default style for mobile and smaller devices */
	#contact {
		width: 30%;

		animation: createBox 0.2s;
	}

 @keyframes createBox {
    	from {
    		transform: scale(0);
    	}
    	to {
    		transform: scale(1);
    	}
    }


	/* Style for tablets, desktops, and larger devices */
	@media (max-width: 540px) {
		#contact {
			width: 80%;
		}
	}
	@media (max-width: 1080px) and (min-width: 540px) {
		#contact {
			width: 60%;
		}
	}
</style>