* {
	box-sizing: border-box;
}

:root {
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	color: #17324d;
	background: #dff4f2;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

body {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 320px;
	min-height: 100svh;
	margin: 0;
	padding: 1.25rem;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 7%, transparent 28%),
		radial-gradient(circle at 88% 82%, rgba(116, 211, 207, 0.55) 0 8%, transparent 32%),
		linear-gradient(135deg, #dff4f2 0%, #eef3ff 48%, #f8e9dc 100%);
}

body::before,
body::after {
	position: fixed;
	content: "";
	border-radius: 50%;
	filter: blur(4px);
	pointer-events: none;
}

body::before {
	width: 28rem;
	height: 28rem;
	top: -10rem;
	right: -7rem;
	background: rgba(255, 205, 144, 0.48);
}

body::after {
	width: 24rem;
	height: 24rem;
	bottom: -10rem;
	left: -6rem;
	background: rgba(132, 221, 213, 0.5);
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

::selection {
	color: #fff;
	background: #238d98;
}

.container {
	position: relative;
	z-index: 1;
	width: min(100%, 32rem);
	padding: clamp(2rem, 7vw, 3.5rem);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 2rem;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24));
	box-shadow: 0 2rem 5rem rgba(42, 84, 111, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(24px) saturate(135%);
	-webkit-backdrop-filter: blur(24px) saturate(135%);
	animation: rise-in 700ms ease-out both;
}

.container::before {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	content: "";
	background: #ffae73;
	box-shadow: 1rem 0 #69c8c5, 2rem 0 #799de8;
}

h1 {
	margin: 0 0 0.6rem;
	font-family: Georgia, serif;
	font-size: clamp(2.5rem, 9vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 0.98;
}

h1::after {
	display: block;
	width: 3.5rem;
	height: 0.28rem;
	margin-top: 1rem;
	border-radius: 99px;
	content: "";
	background: linear-gradient(90deg, #f29b68, #50bfc0);
}

#weather-form {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

input {
	width: 100%;
	min-height: 3rem;
	padding: 1rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 0.95rem;
	outline: none;
	color: #17324d;
	font-size: 1rem;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 1px 2px rgba(49, 80, 104, 0.06);
	transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

input::placeholder {
	color: #537184;
}

input:focus {
	border-color: rgba(35, 141, 152, 0.72);
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 0 0 4px rgba(35, 141, 152, 0.12);
}

button {
	min-height: 3rem;
	padding: 1rem 1.2rem;
	border: 0;
	border-radius: 0.95rem;
	color: #fff;
	font-weight: 700;
	background: linear-gradient(135deg, #238d98, #3977bd);
	box-shadow: 0 0.8rem 1.3rem rgba(35, 117, 153, 0.22);
	transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

button:hover {
	filter: saturate(115%);
	transform: translateY(-2px);
	box-shadow: 0 1rem 1.5rem rgba(35, 117, 153, 0.3);
}

button:active {
	transform: translateY(0);
}

.weather-result {
	min-height: 1.5rem;
	margin-top: 1.5rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 1rem;
	color: #36566c;
	background: rgba(255, 255, 255, 0.2);
}

.status {
	margin: 0;
	color: #537184;
	font-size: 0.9rem;
}

.weather-summary {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.75rem;
}

.weather-summary p,
.details {
	margin: 0;
}

.city {
	font-family: Georgia, serif;
	font-size: 1.65rem;
}

.description {
	margin-top: 0.25rem !important;
	color: #537184;
}

.temperature {
	color: #238d98;
	font-size: clamp(2rem, 8vw, 3rem);
	font-weight: 700;
	white-space: nowrap;
}

.details {
	margin-top: 1rem;
	color: #537184;
	font-size: 0.85rem;
}

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(1.5rem) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 480px) {
	body {
		place-items: start center;
		padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
			max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
		overflow-x: hidden;
		overflow-y: auto;
	}

	.container {
		padding: 2.25rem 1.25rem 1.5rem;
		border-radius: 1.5rem;
	}

	.container::before {
		top: 1rem;
		right: 1.25rem;
	}

	h1 {
		font-size: clamp(2.35rem, 14vw, 3.2rem);
	}

	#weather-form {
		margin-top: 1.5rem;
	}
}

@media (min-width: 600px) and (max-width: 1024px) {
	body {
		padding: 2rem;
	}

	.container {
		width: min(80vw, 36rem);
		padding: 3rem;
	}
}