body{
	background-color: white;
	color:#555555;
	font: normal 16px Arial, Helvetica, sans-serif;
	line-height: 1.6em;
	margin: 0;
	overflow-x: hidden;
}

a{
	text-decoration: none;
	color: blue;
}

a:hover{
	color:red;
}

a:active{
	color: green;
}


.container{
	width: 90%;
	margin: auto;
	overflow: hidden;
}


.main-container {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.main-container main{
	float: right;
	width: 75%;
	padding: 0 30px;
	padding-right: 25%;
	box-sizing: border-box;
}

.code {
    background-color: lightgray;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
}


#sidebar{
	float: left;
	width: 15%;
	height: auto;
	position: fixed;

	background-color: #aaaa;
	font-size: 20px;
	margin: 20px;
	padding: 15px;
	box-sizing: border-box;
}

#sidebar ul{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.7em;
}

#sidebar a{
	text-decoration: none;
	color: #555555;
	display: block;
}

#sidebar a:hover{
	color: white;
}

#main-header{
/*	background-color: #40b870;*/
	background-color: black;
	color: white;
	width: 100%;
	display: block;

}

#main-header h1{
	text-decoration: none;
}

#header-container{
	background-color: darkblue;
	width: 70%;
	margin: none;
	overflow: hidden;
	/*float: left;*/
}


#navbar{
	color: white;
	display: block;
	float: right;
	background-color: darkblue;
}

#navbar ul{
	padding: 0;
	list-style: none;
}

#navbar li{
	display: inline;
}

#navbar a{
	text-decoration: none;
	color: white;
	font-size: 18px;
	padding-right: 15px;
}

#showcase{
	background: url('../gnd2.png');
/*	background-position: center left;*/
	background-size: contain;
	min-height: 325px; /* if I decide to have text here */
	margin-bottom: 30px;
	text-align: center;
	width: 100%;
}



/* if I want to add text to the showcase */
#showcase h1{
	color: white;
	font-size: 50px;
	line-height: 1.6em;
	padding-top: 30px; 
}



#main-footer{
/*	background-color: #333;*/
	background-color: black;
	color: white;
	width: 100%;
	text-align: center;
	padding: 20px;
	margin-top: 40px;
}


/* Red and pink crosses */
.red-cross {
    color: red;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

.pink-cross {
    color: pink;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

/* Ensure the media display container is positioned properly */
#media-display {
    display: flex;
    left: 810px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-left: 10px;
    margin-top: 100px;
}

/* Ensure the images maintain their aspect ratio and fit in 50px by 50px */
#media-display img {
    max-width: 350px;
    height: auto;
    max-height: 350px;
    object-fit: contain;  /* Maintain the original aspect ratio */
}

/* Ensure the video maintains its aspect ratio and fits in 200px by 200px */
#media-display video {
    max-width: 350px;
    height: auto;
    max-height: 400px;
    object-fit: contain;  /* Maintain the original aspect ratio */
}

/* Map container to position crosses correctly */
#map-container {
    position: relative;
}


/* Red and pink stars */
.red-star, .pink-star {
    font-size: 32px;   /* Set size of the star */
    font-weight: bolder; /* Make it bold */
    cursor: pointer;   /* Indicate that it is clickable */
    z-index: 20;       /* Make sure it appears above other elements */
    position: absolute;
    text-shadow: 
        0 0 10px rgba(186, 85, 211, 0.8),  /* Violet glow */
        3px 3px 8px rgba(0, 0, 0, 0.9);    /* Strong dark shadow */
}

.red-star {
    color: #ffccff;        /* Red star color */
}

.pink-star {
    color: #66ffff;       /* Pink star color */
}


.red-star:hover {
    color: #b54cd1; /* Lighter violet for hover effect */

    text-shadow: 0 0 10px rgba(186, 85, 211, 0.8); /* Add glow on hover */
}


.pink-star:hover {
    color: #7733ff; /* Lighter violet for hover effect */

    text-shadow: 0 0 10px rgba(186, 85, 211, 0.8); /* Add glow on hover */
}

/* Styles for the legend box */
#legend-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);  /* Slightly transparent background */
    padding: 5px;
    border-radius: 5px;
    font-family: Times New Roman, serif;
    z-index: 5;
    pointer-events: none;
}

#legend-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;  /* Align items horizontally */
    gap: 20px;  /* Add space between items */
}

#legend-box li {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

#legend-box .legend-color {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    border: 1px solid black;
    background-color: white; /* Will be overridden by inline styles */
}

/* Gallery Container Styling */
.gallery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

/* Individual Gallery Item Styling */
.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 600px;
    height: 600px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    box-sizing: border-box;
}

/* Gallery Image Styling */
.gallery-image {
    max-width: 550px;
    max-height: 550px;
    object-fit: contain; /* Ensure image fits without cropping */
}

/* Map Name Styling */
.map-name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}