* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--main-color: 0, 0%, 38%, 0.8; /* hsl color, almost black */
/*
	--main-color: rgb(0, 0, 0, 0.8);
*/

	--main-color-lighter: 0, 0%, 38%, 0.6; /* hsl color, gray */
/*
	--main-color-lighter: rgb(0, 0, 0, 0.6);
*/

	--second-color: 300, 14%, 99%, 0.2; /* hsl color, almost white */
/*
	--second-color: rgb(245, 245, 245);
*/

	--background-color: 203, 92%, 75%, 0.5; /* hsl color, light blue */

/*
	--background-color: rgb(135, 206, 250); /* hsl color, gray with hint of blue */
*/

	--menu-background-color: 234, 40%, 90%, 0.5; /* hsl color, gray with hint of blue */

	--accent-color: 2, 93%, 74%, 0.7; /* hsl color */
/*
	--accent-color: rgb(250, 130, 125, 0.7);
*/
}

body {
	width: 100%;
	min-height: 100vh;
	padding: 2rem;
	background: linear-gradient(hsl(var(--background-color)), hsl(var(--second-color)));
	color: hsl(var(--main-color));
	font-family: "Poppins", "Montserrat", sans-serif;

	justify-content: center;
    align-items: center;
    text-align: center;

	overflow-x: hidden;
}

.flex {
	display: flex;
	gap: var(--gap, 1rem);
}

.sr-only {
	display: none;
}

h1 {
	margin-top: 2rem;
	font-size: clamp(3rem, 4vw + 1rem, 4rem);
	color: hsl(var(--main-color));
}

h2 {
	margin-top: 2rem;
	font-size: clamp(1.25rem, 2rem + 2vw, 2rem);
}



.city1-name {
	font-size: clamp(1.25rem, 2rem + 2vw, 2rem);
}

.city1-icon-container, .city-icon-container {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style: none;
}

.city-card {
	min-height: 200px;
	min-width: 5rem;
	background-color: white;

	border-radius: 20px;
/*
	box-shadow: 0 30px 50px #5553;
*/
	box-shadow: 0 30px 50px hsl(var(--menu-background-color));
	margin: 2rem 0;
/*
	padding: 10px;
*/
/*
I think the padding may be what caused the cards to extend past the right edge of the screen.
*/
}

div.card > p {
font-size: 1.2rem;
}

.city1-temp {
	font-size: clamp(5rem, 7vw + 2rem, 10rem);
	font-weight: bold;
}

.city-name {
	margin-top: 1rem;
	font-size: clamp(1rem, 1rem + 1vw, 1.5rem);
}

.card-temp {
	font-size: 2rem;
	font-weight: 700;
}

.card-descript {
	margin-bottom: 1rem;
}

.city-search-form {
	margin: 1rem;
	display: flex;
	justify-content: space-between;
	border: 2px solid black;
	border-radius: 20px;
}

.city-search-form:hover, .city-search-form:focus-within {
	box-shadow: 4px 2px 5px hsl(var(--main-color));

}

.city-input-label {
	display: none;
}

.city-search-input {
	width: 95%;
}

.city-search-input, .city-search-button {
	font-size: 1.2rem;
	border: none;
	margin: 0.5rem;
	background-color: white;
}

.city-search-input:focus, .city-search-button:focus {
	outline: 0;
	box-shadow: none;
}

.forecast-name {
	margin-top: 0.5rem;
	font-size: 1rem;
	font-weight: 900;
}

.now-temp {
	font-size: clamp(1.25rem, 2rem + 2vw, 2rem);
	font-weight: 900;
}

a {
	text-decoration: none;
}

a:visited {
	color: hsl(var(--main-color-lighter));
	font-weight: 900;
}

a:hover {
	background-color: hsl(var(--main-color));
	color: hsl(var(--second-color));
	font-weight: 900;
	transition: 0.3s;
}

a:active {
	background: black;
	color: white;
	font-weight: 900;
}

.city2-card {
	grid-area: "city2-card";
}

.city3-card {
	grid-area: "city3-card";
}

.city4-card {
	grid-area: "city4-card";
}

.other-grid-container {
	margin: 2rem 0;
	display: grid;
	gap: 20px;
	grid-template-areas:
		"city2-card"
		"city3-card"
		"city4-card";
}

@media (min-width: 768px) {
	.other-grid-container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"city2-card city3-card"
			"city4-card city4-card";
	}
	.city4-card {
		grid-column: 1/3;
	}
}

@media (min-width: 1024px) {
	.other-grid-container {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"city2-card city3-card city4-card";
	}
	.city4-card {
		grid-column: 3;
	}
}



/* primary header */

.primary-header {
	align-items: center;
	justify-content: space-between;
}

.primary-navigation {
	list-style: none;
	padding: 0;
	margin: 0;
	background: hsl(var(--menu-background-color));
	backdrop-filter: blur(1rem);
}

@supports (backdrop-filter: blur(1rem)) {
	.primary-navigation {
		background: hsl(var(--menu-background-color));
		backdrop-filter: blur(1rem);
	}
}

.primary-navigation a {
	text-decoration: none;
}

.primary-navigation a > [aria-hidden="true"] {
	font-weight: 700;
	margin-inline-end: .7em;
}

.mobile-nav-toggle {
	display: none;
}

@media (max-width: 38em) {
	.primary-navigation {
		--gap: 2em;

		position: fixed;
		z-index: 1000;
		inset: 0 0 0 30%;

		flex-direction: column;
		padding: min(30vh, 10rem) 2em;

		transform: translateX(100%);
		transition: transform 250ms ease-out;
	}

	.primary-navigation[data-visible="true"] {
		transform: translateX(0%)
	}

	.mobile-nav-toggle {
		display: block;
		position: absolute;
		z-index: 9999;
		background-color: transparent;
		background-image: url("../images/menu_bars.svg");
		background-repeat: no-repeat;
		width: 1.25rem;
		border: 0;
		aspect-ratio: 1;
		top: 2rem;
		right: 2rem;
	}

	.mobile-nav-toggle[aria-expanded="true"] {
		background-image: url("../images/menu_x.svg");
	}

}

/*
footer styling
*/

hr {
	color: hsl(var(--second-color)); /* almost white */
	width: 95%;
	text-align: center;
	margin: auto;
	margin-top: 2rem;
}

footer {
/*
	font-size: clamp(0.5rem, 1rem + 0.5vw, 1.5rem);
*/
	text-align: center;
}

footer-container {
	width: 100%;
	padding: 10px;
}


.footer-nav {
	margin-top: 20px;
}

.footer-nav ul {
	display: flex;
	justify-content: space-between;
}

.footer-nav ul li {
	text-align: center;
	margin: 0px 15px;
}

.footer-nav ul li a {
	margin: 1.5px;
	text-decoration: none;
	transition: 0.5s;
}

.footer-bottom {
	font-size: clamp(0.5rem, 0.568rem + 0.91vw, 1.25rem);
	margin: 2rem 0 0 0;
}

.footer-bottom span.line {
	display: inline-block;
}

.designer {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	margin: 0px 5px;
}