body {
	margin: auto;
	top: 0;
	background-image: url(../media/img/Lake.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overscroll-behavior: none;
	height: 100svh;
	overflow: hidden;
}

/* this is a overlay for "dark-mode" */
/* #firstPage {
	max-height: 100svh;
	width: 100vw;
	margin: auto;
} */

/*==============================*/
/*============ Fonter =============*/
/*==============================*/

@font-face {
	font-family: Kodchasan;
	src: url('fonts/Kodchasan/Kodchasan-Light.ttf') format('truetype');
}

@font-face {
	font-family: karla;
	src: url('fonts/Karla/static/Karla-ExtraLight.ttf') format('truetype');
	font-weight: 400;
}

/*==============================*/
/*============ Nav =============*/
/*==============================*/

/* Heading, meny */
header {
	display: flex;
	justify-content: center;
	min-width: 340px;
	background: rgba(240, 248, 255, 0.204);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(225, 225, 225, 0.62);
	border-right: 1px solid rgba(240, 248, 255, 0.204);
	border-bottom: 1px solid rgba(225, 225, 225, 0.2);
	backdrop-filter: blur(25px);
	z-index: 1;
}

nav {
	width: 100vw;
	padding: 00 5vw;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

nav h1 {
	color: black;
	font-family: Kodchasan, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
		sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

/* The list part with links, about weather and cities */
nav #menu {
	padding-left: 0;
	display: flex; /*Makes the list aligned*/
	gap: 8px;
	padding-top: 20px;
	list-style-type: none;
}

a {
	/* color: pink; */
	color: black;
	font-family: Kodchasan, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
		sans-serif;
	text-decoration: none;
	font-size: 16px;
}

/* ================================================= */
/* ====== Content - Väder-rapport fönster osv ====== */
/* ================================================= */

.background {
	width: 100vw;
	height: 90svh;
	min-height: 550px;
	display: flex;
	align-items: center;
	overflow: hidden;
	display: flex;
	justify-content: space-evenly;
}

.transparent-window {
	width: 90vw;
	max-width: 400px;
	height: fit-content;
	max-height: 500px;
	background: rgba(240, 248, 255, 0.204);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(225, 225, 225, 0.62);
	border-right: 1px solid rgba(240, 248, 255, 0.204);
	border-bottom: 1px solid rgba(225, 225, 225, 0.2);
	border-radius: 10px;
	backdrop-filter: blur(25px);
	padding: 2vw 5vw;
}

#weather-search-btn {
	background: rgba(255, 255, 255, 0.535);
	color: #ffffffdb;
	color: #434040;
	margin-left: 10px;
	width: 51px;
	height: 50px;
	margin-top: 10px;
	border-radius: 15px;
	cursor: pointer;
	border: none;
	margin-right: 0;
}

#weather-search-btn:hover {
	border-color: #fff;
	border: solid 1px #fff;
}

#weather-search-btn:hover #magnifying-glass {
	font-size: large;
}

/* Inputfield */
#search-weather {
	width: 30px;
	height: 30px;
	color: #fff;
	color: #434040;
	background: rgba(255, 255, 255, 0.535);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
	border: 1px solid #fff;
	border-radius: 24px;
	padding: 8px 40px 8px 30px;
	margin: 10px 00;
	font-family: karla, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
		sans-serif;
	font-size: 20px;
	flex-grow: 1;
}

#inputfield-btn-wrapper {
	display: flex;
	max-width: 400px;
	margin-top: 2vh;
	justify-content: space-between;
}

#weather-report-container {
	width: 100%;
	padding-top: 2vh;
	height: 390px;
}

#temp-svg-wrapper,
#wind-precipitation-wrapper {
	display: flex;
	height: 45%;
	width: 100%;
}

#temperature-container,
#weather-symbol-container,
#wind-container,
#precipitation-container {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#temperature-container {
	/* background-color: brown; */
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	border-right: 1px solid rgba(255, 255, 255, 0.7);
}

#weather-symbol-container {
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

#wind-container {
	border-right: 1px solid rgba(255, 255, 255, 0.7);
}

#precipitation-container {
	display: flex;
	flex-direction: column;
	white-space: nowwrap;
}

#temperature,
#wind,
#precipitation {
	font-size: 1.5rem;
	font-family: karla, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
		sans-serif;
	color: #fff;
}

#precipitation-container > #precipitation:first-child {
	font-size: 1.25rem;
}

#temperature {
	font-size: 3rem;
}

#weather-symbol {
	fill: #ffffffe6;
	width: 4rem;
}

#chart-container {
	background-color: rgba(255, 255, 255, 0.8);
	height: fit-content;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 20px;
	padding: 40px 00px;
}

#weather-chart {
	padding: 0px 2vw;
}

#chart-weater-btn-container {
	margin-left: 10px;
}

#chart-btn,
#weather-btn {
	background: rgba(255, 255, 255, 0.535);
	color: #ffffffdb;
	color: #434040;
	margin-bottom: 10px;
	width: fit-content;
	padding: 3px 8px;
	border-radius: 15px;
	cursor: pointer;
	border: #ffffff;
	font-family: karla, Arial, Helvetica, sans-serif;
}

#chart-btn:hover {
	border: solid 1px #fff;
}

#weather-btn:hover {
	border: solid 1px #fff;
}

@media screen and (max-width: 460px) {
	.background {
		width: 100vw;
		height: 90svh;
		min-height: 0;
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
	}

	.transparent-window {
		padding: 0;
	}

	#weather-content-container {
		padding: 0vw 5vw;
	}

	#search-weather {
		width: 80%;
	}
}