.page-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
/* width: 100%; /* Set the width of the page-wrapper to 100% of the viewport */
flex-grow: 1; /* Make the page-wrapper grow to fill the available space */
min-height: 100vh; /* Add this line */
}

/* Define the left column */
.left-column {
flex: 0 0 25%; /* Set the width of the left column to 25% of the page width */
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
background-color: #020700; /* #2e2e2e */
color: #f5f5f5;
}

/* Define the upper part of the left column */
.left-column .title {
font-size: 1em;
font-weight: bold;
text-align: center;
}

/* Define the middle part of the left column */
.left-column .menu {
flex-grow: 1;
text-align: left;
padding-top: 20px;
}

/* Define the bottom part of the left column */
.left-column .copyright {
font-size: 0.8em;
text-align: center;
padding-bottom: 20px;
}

.left-column a {
color: #c8d6e5;
}


/* Define the right column */
.right-column {
flex: 0 0 75%; /* Set the width of the right column to 75% of the page width */
justify-content: center;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
background-color: #333333;
color: #f5f5f5;
position: relative; /* Set the position property to relative */
padding-bottom: 56.25%; /* Set the padding-bottom property to 56.25% (which is 9/16 in decimal form) to maintain a 16:9 aspect ratio */
}



/* Define the image and its caption */
.right-column img {
/* width: 100%;
height: auto;*/
/* max-width: 100%; */
max-width: 800px;
max-height: 600px; /* Set the maximum height of the image to 400 pixels */
margin-bottom: 10px;
margin: 0 auto; /* Set the top and bottom margin to 0 and the left and right margin to "auto" to center the image horizontally */
display: block; /* Set the display property to "block" to remove any default inline spacing */
}

.right-column .caption {
font-size: 0.8em;
text-align: center;
}

.right-column  a {
color: #c8d6e5;
}

/* p { max-width: 80%; margin: 0 auto; /* text-align: center; /* } */

.section-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; width: 100%; padding: 0 20px; box-sizing: border-box; justify-content: center; background-color: #333333; }

/* display: flex; justify-content: center; margin: 0 auto; max-width: 100%; /* 80% */ background-color: #333333; */

.return-to-top { display: none; /* Hide the button by default / position: fixed; / Set the button to be fixed position / bottom: 20px; / Position the button 20px from the bottom / right: 20px; / Position the button 20px from the right / z-index: 99; / Set a high z-index value to make sure the button is on top / font-size: 16px; / Set the font size of the button / padding: 10px; / Add some padding to the button / border-radius: 50%; / Round the corners of the button to make it circular / background-color: #555; / Set the background color of the button / color: #fff; / Set the text color of the button / text-align: center; / Center the text of the button / text-decoration: none; / Remove the underline from the text */ }

.return-to-top:hover { background-color: #666; /* Change the background color of the button on hover */ ��}

.return-to-top i { font-size: 24px; /* Increase the size of the icon */ }

function scrollFunction() {
	if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
			document.querySelector(".return-to-top").style.display = "block";
	} else {
			document.querySelector(".return-to-top").style.display = "none";
	}
}

function topFunction() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
}

Return to Top