<!-- styles.css -->

* {
    # box-sizing: border-box;
    margin: 0 auto;
    padding: 3 px;
}

body {
    font-family: Open sans, sans-serif;
    line-height: 1.8em;
    color: #252424;
    font-size: 14px; 
}

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

.pain-content {
	margin: 2px;	
}


.main-content {
    max-width: 90%; /* Adjust to desired width */
    margin: 0 auto;   /* Center the container horizontally */
    padding: 20px;    /* Add some padding for better readability */
    line-height: 1.6; /* Improve readability with line spacing */
}

.highlight, header .current a {
    color: #252424;
    font-weight: bold;
}

a, a:link, a:visited {
	color: #0f0f0f
}

.site-title {
	display:inline
	font-weight: normal;
	font-family: "Raleway";
	line-height: 1.4em;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 400;
	font-style: normal;
	font-size: 43px;
	text-align: center;
	display: block;
    margin:0 auto 28px
}

.main-image {
	display: block;
	object-fit: cover;
	width: 70%;
	height: 70%;
	object-position: 50% 50%;
	vertical-align: middle;
	align: center;
}
        
.mina {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 40%;
  box-sizing: border-box;
}

.hero-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 50%;
  box-sizing: border-box;
}

.html-content {
    max-width: 90%;
	margin: 0 0 28px;
    word-wrap: break-word;
	padding: 40px;
}

footer {
    padding: 20px;
    margin-top: 20px;
    color: #f0dddd;
    background-color: #e8491d;
    text-align: center;
}


  /* Responsive Map Container */
        .map-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        .map-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

/* Navigation */

.topnav {
  display: flex; /* Use Flexbox */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */

  overflow: hidden;
  background-color: #fff;
  border-color: rgba(219,219,219,.9);
  width: auto;
  border-top: 1px solid rgba(219,219,219,.9);
  border-bottom: 1px solid rgba(219,219,219,.9);
}

.topnav a {
  float: left;
  display: flex;
  color: #252424;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

.topnav a:hover {
  color: rgba(195,177,177,.8);
}

.topnav a.active {
  color: rgba(195,177,177,.8);
}

.topnav .icon {
  display: none;
}

.two-column-container {
    display: flex; /* Use Flexbox to create the two-column layout */
    gap: 20px; /* Space between the columns */
    padding: 10px;
}

.column {
    flex: 1; /* Each column takes up equal space */
    padding: 20px;
    background-color: white;
    border-radius: 4px;
}

.left-column {
    /* You can add specific styles for the left column here if needed */
}

.right-column {
    /* You can add specific styles for the right column here if needed */
}

/* Style for the select box */
.topnav-select {
    display: none; /* Make select visible */
    padding: 10px;
    font-size: 16px;
    border-width: 1px;
    text-transform: uppercase;
    color: rgba(195, 177, 177, 0.8);
    margin: 0 auto; /* Centering */
    width: 70%; /* Set width to 50% of the container */
    max-width: 300px; /* Optional: Limit max width */
    border: solid 1px #ccc;
    background-color: #fff; /* Set background to make select visible */
    border-radius: 4px; /* Optional: Add some border radius */
    outline: none;
    appearance: none; /* Remove default arrow */
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="black" d="M0 0l5 6 5-6H0z"/></svg>'); /* Downward pointing arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Container for the select box */
.select-container {
    position: relative;
    width: 100%;
    text-align: center; /* Center content within container */
}

@media screen and (max-width: 640px) {
  .container {
        width: 97%; /* Slightly wider for small devices */
        padding: 10px;
    }
.mina {
  display: block; /* Makes the element behave like a block for centering */
  margin-left: auto; /* Centers the element horizontally */
  margin-right: auto; /* Centers the element horizontally */
  width: 50%; /* Default to 100% width */
  max-width: 40%; /* Limit the width to 40% of the parent container */
  box-sizing: border-box; /* Ensures padding/border doesn’t affect width */
}
.html-content {
    max-width: 97%;
	margin: 0 0 28px;
    word-wrap: break-word;
	padding: 20px;
}
   .topnav {
        display: none; /* Hide navbar on small screens */
    }

    .topnav-select {
        display: block; /* Show select box on small screens */
    }

	.select-container {
		display: inline-block;
    }

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

}