/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }

/** Site header */
/**.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; }*/
.site-header { border-top: 5px #e8e8e8; border-bottom: 1px #e8e8e8; min-height: 55.95px; position: relative; }

.site-title { font-size: 42px; font-weight: 500; line-height: 54px; letter-spacing: -1px; margin-bottom: 0; float: left; }
.site-title, .site-title:visited { color: #424242; }

/** Page content */
.page-content { padding: 30px 0; flex: 1; }

.page-heading { font-size: 32px; }

.post-meta { font-size: 14px; color: #828282; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }
@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }
.post-content h2 { font-size: 32px; }
@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }
.post-content h3 { font-size: 26px; }
@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }
.post-content h4 { font-size: 20px; }
@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }

.container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.square {
    width: 100%;
    height: 100%;
    margin: 1.5%;
    position: relative;
    background-color: #f0f0f0; /* Light gray background to show the square boundaries */
}
.square img {
    width: 100%;                      /* Image should fill its grid cell width */
    height: 300px;                    /* Set a fixed height for uniform appearance */
    object-fit: cover; /* Ensures the image covers the container without distortion */
    display: block; /* Removes bottom space below the image */
    object-position: center;          /* Center the image within its container */
}

.text {
  position: absolute; /* Position text relative to its container */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset by half of the text width/height to center exactly */
  /*background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
  color: black; /* Text color */
  text-align: center; /* Center text alignment */
  /*padding: 10px; /* Padding around text */
  /*border-radius: 5px; /* Rounded corners for the text background */
  font-size: 60px;
}

body {
  margin: 0;                        /* Remove default body margin */
  padding: 0;                       /* Remove default body padding */
  box-sizing: border-box;           /* Ensure consistent box sizing */
}

.gallery {
  display: grid;                    /* Use CSS Grid for layout */
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  gap: 10px;                        /* Space between images */
  padding: 10px;                    /* Padding around the gallery */
}

.gallery-item {
  width: 100%;                      /* Image should fill its grid cell width */
  height: 200px;                    /* Set a fixed height for uniform appearance */
  object-fit: cover;                /* Crop image to fill its grid cell while maintaining aspect ratio */
  object-position: center;          /* Center the image within its container */
}

.gallery-item:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

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

/* Hide the slides by default */
.mySlides {
  display: none;
}


/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.slide {
  width:100%;
  opacity: 1;
}