﻿BODY {
	line-height: 1.5;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	color: #000000;
	font-family: Roboto,Arial,sans-serif;
	background-image: url("/img/software_update_keyboard.jpg");
	/* Optional properties for controlling the background image */
	background-repeat: no-repeat; /* Prevents the image from repeating */
	background-size: cover; /* Scales the image to cover the entire background */
	background-position: center center; /* Centers the image */
	background-attachment: fixed; /* Keeps the image fixed when scrolling */
	background-color: #cccccc; /* Fallback color if the image fails to load  */
	margin-top: 50px; /* Adjust based on top menu height */
	margin-bottom: 50px; /* Adjust based on bottom menu height */
}

/* Top Menu */
.top-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ffff; /* Example background */
	color: #000000;
	padding: 10px;
	z-index: 1000; /* Ensure it's on top of other content */
}

.content {
	position: fixed;
	bottom: 0;
	right: 0;
	/* Optional: Add padding, background, etc. for visibility */
	margin: 30px 30px 70px 30px;
	flex-grow: 1; /* Allows content to expand and fill available space */
	overflow-y: auto; /* Enables scrolling for content if it exceeds height */
	padding: 20px;
	color: #ffffff;
	width: 700px;
}

/* Bottom Menu */
.bottom-menu {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffff; /* Example background */
	font-size: 12px;
	color: #000000;
	padding: 10px;
	z-index: 1000; /* Ensure it's on top of other content */
}

a {
	color: blue;
	font-weight: bold;
	text-decoration: none;
}

	a:hover {
		color: #ff0000;
	}

.blurred-background-div {
	background-color: rgba(255, 255, 255, 0.3); /* A semi-transparent background is needed to see the blur */
	backdrop-filter: blur(5px); /* Adjust the pixel value for desired blur intensity */
	-webkit-backdrop-filter: blur(10px); /* For Safari support */
	padding: 20px;
	border-radius: 8px;
}

.outlined-text {
	color: transparent; /* Makes the text fill transparent */
	-webkit-text-stroke-width: 0.5px; /* Sets the outline width */
	-webkit-text-stroke-color: #9a9a9a; /* Sets the outline color */
}

@media screen and (max-width: 767px) {
	.content {
		position: fixed;
		bottom: 0;
		right: 0;
		/* Optional: Add padding, background, etc. for visibility */
		margin-bottom: 20px;
		flex-grow: 1; /* Allows content to expand and fill available space */
		padding: 20px;
		color: #ffffff;
		width: 81%;
	}
}