.background {
	/* Set the background image */
	background-image: url('../images/zenkoji.jpg');
	/* Set background size to cover the entire body */
	background-size: cover;
	height: 100vh;
	background-repeat: no-repeat;

	/* Center the background image vertically and horizontally */
	background-position: center;

	/* Add a blur effect to the background */
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px); /* For compatibility with some browsers */
	margin: 0;
}

.background2 {
	background-color: rgba(85, 108, 142, 0.34);
}

.glassmorphism  {
	/* Created by css.glass */
	background: rgba(255, 255, 255, 0.53);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(2.4px);
	-webkit-backdrop-filter: blur(2.4px);
	border: 1px solid rgba(255, 255, 255, 0.36);
	//margin-top: 55px;
	margin-bottom: 15px;
	padding: 20px;
}

.contents{
	position: absolute;
	//display: inline-block;
	left: 10%;
	height: 100%;
	width: 90%;
}

.scale-with-screen {
	font-size: 0.9vw; /* Set font size relative to viewport width */
	font-family:  "Lucida Console", "Courier New", monospace;
}
@media (max-width: 3000px) {
	.scale-with-screen {
		font-size: 1vw; /* Increase font size for smaller screens */
	}
}
@media (max-width: 2500px) {
	.scale-with-screen {
		font-size: 1.2vw; /* Increase font size for smaller screens */
	};
}
@media (max-width: 1800px) {
	.scale-with-screen {
		font-size: 1.5vw; /* Increase font size for smaller screens */
	};
}
@media (max-width: 1000px) {
	.scale-with-screen {
		font-size: 1.8vw;
	}

}
@media (max-width: 600px) {
	.scale-with-screen {
		font-size: 2vw; /* Further increase font size for very small screens */
	}
}

.right {
	//position: absolute;
	margin-top: 0px;
	//margin-left: 10px;
	display: inline-block;
	//top: -30px;
	//left: 70%;
	font-size: 0.8vw;
}
@media (max-width: 1000px) {
	.right {
		left: 65%; /* Adjust the left value for smaller screens */
	}
}

@media (max-width: 600px) {
	.right {
		left: 67%; /* Further adjust the left value for very small screens */
		padding:10px;
		border-radius: 13px;
	}
}
@media (max-width: 400px) {
	.right {
		left: 67.5%; /* Further adjust the left value for very small screens */
		padding:5px;
		border-radius: 8px;
	}
}

.center {
	//position: absolute;
	//top: 340px;
	//left: 10%;
	margin: 0px;
	//transform: translate(-50%, -50%);
	display: inline-block;
	white-space: nowrap;
	height: 100%;
	width: 65%;
	/*height: 90vh;*/ /* Set the fixed height for the container */
	overflow-inline: scroll;
	overflow-y: auto; /* Add a vertical scrollbar if needed */

}

/*
.center {
-ms-overflow-style: none;   //IE and Edge 
scrollbar-width: none;  //Firefox 
}
.center::-webkit-scrollbar {
display: none;
}
 */

.center h2 {
	margin-top: 0px;
	margin-bottom: 0px;
}

.table{
	margin-top: 0px;
	margin-bottom: 10px;
	/* width: 98%; */
}

.mon-table{
	display: inline-block;
	vertical-align: top;
	overflow-x: auto;
	margin: 10px 10px 0px 10px;
}

#start{
	width: 100%;
	height: 30%;
	overflow-x: auto;
	overflow-y: auto;
	display: block;
}

#start h2{
	margin: 0px;
}

#news{
	display: block;
	width: 100%;
	height: 70%;
}

.legend-container{
	display: inline-block;
	width: 25%;
	height: 85%;
	margin-top: 0px;
	margin-left: 10px;
	vertical-align: top;
}

.legend{
	margin-bottom: 10px;
}

.legend caption{
	font-size: 16px;
}

.table th {
	color:hsl(210, 24%, 87%);;
	background: var(--main-c);
	border-bottom:4px solid #9ea7af;
	border-right: 1px solid #343a45;
	font-size:23px;
	padding:24px;
	text-align:left;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	vertical-align:middle;
	font-size: xx-large;
}
.table td {
	border-bottom:4px solid #f9f9f9;
	border-right: 1px solid #8e9094;
	border-left: 1px solid #8e9094;
	font-size:16px;
	font-weight: 100;
	padding:10px;
	text-align:center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	vertical-align:middle;
	color: aliceblue;
}
.table tr {
	border-top: 1px solid #C1C3D1;
	border-bottom: 1px solid #C1C3D1;
	color:#666B85;
	font-size:16px;
	font-weight:normal;
	text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
.table tr:hover td {
	background:#4E5066;
	color:#FFFFFF;
	border-top: 1px solid #22262e;
}