/* main body stuff */

body {
  background-image: url("https://ernopolis.neocities.org/ernopolis-resort.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 40px auto;
  max-width: 800px;
  padding: 80px;
  font-family: sans-serif;
  line-height: 1.6;
  font-size: 18px;
  color: white;
  position: relative;
  z-index: 1;
  box-sizing: border-box; /* Ensures padding is included in width */
}

body::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* Now includes padding due to box-sizing */
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
  border: 2px solid #fff;
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
}   

code {
  background-color: #333;
  padding: 12px;
  font-size: 75%;
  border-style: dashed;
  border-width: 1px;
  border-color: #888;
}

.blogimg {
  border-style: double;
}

sub {
  color: #666;
}

.footer {
  border-style: double;
  padding: 8px;
  padding-left: 60px;
  padding-right: 60px;
}


.mthumb {
  display: flex;
  align-items: center;
}
.mthumb img {
  margin-right: 75px; /* adjust as needed */
}



/* link stuff */

a {
  text-decoration: none;
}

a:link {
  color: #0066ff;
}

a:visited {
  color: #0066ff;
}

a:hover {
  color: white;
}

a:active {
  color: #000;
}

/* heading thing */

h1,h2,h3{
  line-height:1.2
  }


.blog-container, .gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Space between cards */
}

.blog-card, .gallery-card {
    background-color: #00131a; /* Semi-transparent background */
    border: 1px solid #fff; /* White border */
    color: white;
    transition: transform 0.2s; /* Smooth hover effect */
    overflow: hidden; /* Ensure images fit within the card */
    padding: 20px; /* Increase inner padding for more space */
}

.blog-card:hover, .gallery-card:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
}

.gallery-image {
    width: 100%; /* Make image fill the card */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove bottom space */
}

.gallery-title {
    font-size: 20px; /* Title size */
    margin: 10px 0 5px; /* Margin for spacing */
    color: white;
}

.gallery-preview {
    font-size: 14px; /* Preview text size */
    color: white; /* Color for preview text */
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%; /* Width of the image */
    max-width: 700px; /* Max width of the image */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#caption {
    margin: auto;
    display: block;
    text-align: center;
    color: white;
    padding: 10px 0;
    height: 40px; /* Height for the caption */
}