html, body, #my-container {
	height: 100%;
	margin: 0;
}

header {
	background-color: #333;
	color: #fff;
	padding: 3px;
	display: grid;
	grid-template-columns: auto 1fr; /* Two columns: one for logo, one for text/nav */
	grid-template-rows: auto auto; /* Two rows: one for h1, one for nav */
	align-items: center;
	gap: 10px; /* Optional: space between grid items */
}


img#logo {
	height: 100px; /* Ensure logo scales with the header */
	width: auto; /* Maintain aspect ratio */
	float: left;
}

#mynav {
	padding-top: 1px;
	padding-bottom: 1px;
}

#my-container {
	padding-left:1px;
}

.navbar-toggler {
	border-color: white; /* Optional: Makes the border of the toggle button white */
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

h2 { font-style:italic;}

.subtitle {
	font-size:1.2em;
	font-weight: bold;
	margin-bottom: 1em;
}

.pic {
	width: 300px;
}

.picpanel {
	margin: 10px;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px;
}

.box {
	border: 1px solid black;
	padding: 5px;
	margin: 3px;
	border-radius: 15px;
}

.icon {
	width:2em;
}

.clickable {
	cursor: pointer;
}

.clickable:hover {
	color: blue;
}

iframe {
	flex-grow: 1;
	padding: 20px 0px 20px 20px
}


@media (max-width: 610px) {
	#title {
		font-size: 1.3em;
	}
}