body {
	background-repeat: no-repeat !important;
	background-position-x: center !important;
	background-position-y: center !important;
	background-attachment: fixed !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	background-color: transparent !important;
}

html, body, #app {
	height: 100%;
	width: 100%;
}

#bgcolor {
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	left: 0;
	z-index: 1;
}

#app {
	position: relative;
	z-index: 10;
}



body.landscape #canvas-headline { margin-bottom: 1%; }
body.landscape #weather-wrapper { padding:4%; }
body.landscape #weather-wrapper h1 { padding-left:2%; }
body.landscape .weather-container { height:100%; }
body.landscape .weather-container .canvas-content { display:flex; flex-direction:column; height:100%; }
body.landscape .weather-container .canvas-content .canvas-headline { flex-basis:5%; font-weight:200; border:0px solid pink; }
body.landscape .weather-container .weather-week {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-evenly;
	margin-top:4%;
	color: #fff;
}
body.landscape .weather-container .weather-week .weather-day {
	flex-basis:15%;
	margin-bottom:1.5%;
	font-size:2vmax;
	background-color: rgba(0, 0, 0, .4);  
	backdrop-filter: blur(5px);
	border-radius: 8px;
}
body.landscape .weather-container .weather-week .weather-day-inner { padding:5%; }
body.landscape .weather-container .weather-top { flex-basis:20%; }
body.landscape .weather-container .weather-day-data-inner { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around; margin-top:2%;  }
body.landscape .weather-container .weather-top-inner { display:flex; flex-direction:row; text-shadow: 1px 1px #7f7f7f; }
body.landscape .weather-container .weather-top-left { flex-basis:27%; position: relative; }
body.landscape .weather-container .weather-top-left img { width:80%; }
body.landscape .weather-container .weather-top-right { flex-basis:55%; }
body.landscape .weather-container .weather-top-right .temperature {
	font-weight:600;
	margin-top:1%; 
	position:relative;
	top:40%;
	transform: translateY(-50%);
	font-size: 6vmax;
	padding-top:5%;
}
/* Adjust the parent container to spread its children out */
body.landscape .weather-container .weather-day-data {
    font-size: 2vmax;
    width: 100%;
    display: flex;
    justify-content: space-between; /* This will spread the flex items out */
	width: 100%;
}

body.landscape .weather-container .weather-day-data-inner {
	width: 100%;
}

/* Make sure each flex child takes up equal width */
body.landscape .weather-container .weather-day-data .wind {
    flex: 1 1 auto;
    text-align: center; /* This will center the content within each flex child */
}

body.landscape .weather-container .weather-day-data .pressure {
    flex: 1 1 auto;
    text-align: center;
}

body.landscape .weather-container .weather-day-data .cloudiness {
    flex: 1 1 auto;
    text-align: center;
}
body.landscape .weather-container .weather-bottom { flex-basis:50%; text-align: center; border:0px solid pink; }
body.landscape .weather-container .weather-credits { text-align:center; margin-top:3%; }

/* Hide icons as default*/
body.landscape .weather-container .symbol-img { display:none; }
body.landscape .weather-container .symbol-animated { display:none; }
body.landscape .weather-container .symbol-icon { display:none; }

/* Set icon sizes */
body.landscape .weather-container .today .symbol-img img { font-size: 12vmax;  max-width:65%; }
body.landscape .weather-container .today .symbol-icon {	font-size: 11vmax; }

body.landscape .weather-container .weather-week .symbol-img img { max-width:65%; margin-bottom:8%; }
body.landscape .weather-container .weather-week .symbol-icon { font-size: 5.2vmax; margin-bottom: 8%; }
body.landscape .weather-container .weather-week .symbol-animated img { width:70%; }






body.portrait #canvas-headline { margin-bottom: 1%; }
body.portrait #weather-wrapper { padding:4%; }
body.portrait #weather-wrapper h1 { padding-left:2%; }
body.portrait .weather-container { height:100%; }
body.portrait .weather-container .canvas-content { display:flex; flex-direction:column; height:100%; }
body.portrait .weather-container .canvas-content .canvas-headline { flex-basis:5%; font-weight:200; border:0px solid pink; }
body.portrait .weather-container .weather-week {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5%;
	margin-top:4%;
	color: #fff;
}
body.portrait .weather-container .weather-week .weather-day {
	margin-bottom:1.5%;
	font-size:2vmax;
	background-color: rgba(0, 0, 0, .4);  
	backdrop-filter: blur(5px);
	border-radius: 8px;
}
body.portrait .weather-container .weather-day-inner { padding:5%; }
body.portrait .weather-container .weather-top { flex-basis:100%; } /* full height for today's weather */
body.portrait .weather-container .weather-day-data-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
body.portrait .weather-container .weather-top-inner { display:flex; flex-direction:row; text-shadow: 1px 1px #7f7f7f; }
body.portrait .weather-container .weather-top-left {
	flex: 1;  /* This makes it occupy equal width as .weather-top-right */
    max-width: 50%;  /* This ensures it doesn't take more than 50% of its parent's width */
    display: flex;
    justify-content: center;
    align-items: center;
}
body.portrait .weather-container .weather-top-left img { width:80%; }
body.portrait .weather-container .weather-top-left #today-symbol { width:100%; }
body.portrait .weather-container .weather-top-left .symbol-animated { width:100%; }
body.portrait .weather-container .weather-top-right { flex-basis:55%; }
/* body.portrait .weather-container .weather-top-right .temperature {
	font-weight:600;
	margin-top:1%; 
	position:relative;
	top:40%;
	transform: translateY(-50%);
	font-size: 6vmax;
} */

/* Center and set the alignment for today's weather content */
body.portrait .weather-container .weather-top-inner.today {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30%;  /* adjust this value as desired */
}

/* Enlarge and center the weather icon */
body.portrait .weather-container .weather-top-left #today-symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16vmax;  /* adjust this value to increase/decrease icon size */
}

/* Enlarge and center the temperature */
body.portrait .weather-container .weather-top-right .temperature {
    font-size: 7vmax;  /* adjust this value to increase/decrease temperature font size */
    margin-left: 3%;  /* adjust for spacing between the icon and temperature */
	padding-top: 15%;
}

body.portrait .weather-container .weather-day-data { font-size:2vmax; width:100%; }
body.portrait .weather-container .weather-day-data .wind { margin-bottom:5%; }
body.portrait .weather-container .weather-day-data .pressure { margin-bottom:5%; }
body.portrait .weather-container .weather-day-data .cloudiness { margin-bottom:5%; }
body.portrait .weather-container .weather-bottom { text-align: center; border:0px solid pink; }
body.portrait .weather-container .weather-credits { text-align:center; margin-top:3%; }

/* Hide icons as default*/
body.portrait .weather-container .symbol-img { display:none; }
body.portrait .weather-container .symbol-animated { display:none; }
body.portrait .weather-container .symbol-icon { display:none; }

/* Set icon sizes */
body.portrait .weather-container .today .symbol-img img { font-size: 12vmax; }
body.portrait .weather-container .today .symbol-icon {	font-size: 11vmax; }

body.portrait .weather-container .weather-week .symbol-img img { max-width:65%; margin-bottom:8%; }
body.portrait .weather-container .weather-week .symbol-icon { font-size: 5.2vmax; margin-bottom: 8%; }
body.portrait .weather-container .weather-week .symbol-animated img { width:80%; }



#no-weather {
	text-align:center;
	height: 100%;
	background: url('./assets/img/bg.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#no-weather-inner {
	padding:20%;
	color:#6b6b6b;
	
}


video {
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
}





@media (max-width: 768px) and (max-height: 768px) {
	.weather-week, .weather-day-data {
		display: none !important;
	}

	body.landscape .temperature {
		font-size: 16vmax !important;
	}

	body.portrait .temperature {
		font-size: 11vmax !important;
	}

	#today-symbol {
		padding-left: 0px !important;
	}

	body.landscape .weather-container .weather-top-inner {
		flex-direction: row !important;
		text-align: center;
	}

	body.portrait .weather-container .weather-top-inner {
		flex-direction: column !important;
		text-align: center;
	}


	body.landscape .weather-container .weather-top-left {
		flex-basis: 35% !important;
	}

	body.portrait .weather-container .weather-top-left {
		flex-basis: 100% !important;
		width: 100%;
		max-width: 100%;
	}

	body.landscape .weather-container .weather-top-left img {
		width: 100%;
	}


	body.portrait .weather-container .weather-top-left img {
		width: 100%;
	}
}


@media (max-width: 500px) and (max-height: 500px) {
	body.portrait .weather-container .weather-top-left img {
		width: 50%;
	}
}