@font-face {
    font-family: "VCR Mono"; 
    src: url("fonts/mono/VCR_OSD_MONO_1.001 2.ttf") format("truetype");
    /* or: */
    src: url("fonts/mono/VCR_OSD_MONO_1.001.ttf") format("opentype");
}
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 0px;
    font-family: 'VCR Mono';
    background-image: url("images/site/Background.jpg");
    
  }
  
  header{
  background:black;  
}
  
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
}

.nav a{
  color:#f4d368;
  font-size: 18px;
  text-decoration:none;
  padding:8px;
  margin-left:4%;
  margin-right:4%;
}

.nav-btn{
  color:#f4d368;
  font-size: 18px;
  text-decoration:none;
  padding:8px;
  margin-left:4%;
  margin-right:4%;
  background:none;
  border:none;
  font-family: "VCR Mono";
}

.nav a:hover{
  color:white;
  background: #3b3b3b;
}
  
  .link{
    color:black;
  }
  
  .col-1 {
    background-image: url("images/site/Background.jpg");
    flex: 1;
    margin:10px;
  }
  .col-2 {
    display: flex;
    flex-direction: column;
    flex: 5;
    background-color: #fffbeb;
  } 
  .head{
    padding:5px;
    border-left: 2px solid #46484d;
    border-right: 2px solid #46484d;
  }
  .contentbox {
    display: flex;
    flex-direction: row;
    background-color: #fffbeb;
    border-left: 2px solid #46484d;
    border-right: 2px solid #46484d;
    border-top: 2px solid #46484d;
    
  }
  .contentbox > article {
    flex: 4;
  } 
  .content {
    background-color:#f7f7f7;
    padding: 5px;
    padding-top: 10px;
    border: 2px dotted #46484d;
    width: 270px;
    margin: 10px;
    text-align: center;
    font-family: 'VCR Mono';
  }
  .content img {
    width: 100%;
    object-fit: cover; /* or object-fit: contain */ 
  }

        /* Modal Styles */
        .modal {
            display: none; /* Hidden until clicked */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Dark overlay */
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        .modal-content {
            position: relative;
            background: white;
            padding: 20px;
            margin:10%;
            height:auto;
            width: auto; /* Restores the wider modal */
            max-width: auto; /* Keeps it from being too wide */
            max-height: 90vh; /* Prevents it from being too tall */
            overflow: auto; /* Enables scrolling if needed */
            text-align: center;
            border: 2px dotted #46484d;
        }
        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5rem;
            font-weight: bold;
            background: none;
            border: none;
            color: black;
        }
        .art-image {
            max-height:500px;
            width: 90%; 
            display: block;    /* Fixes alignment issues */
            margin: 10px auto; /* Centers the image */
            
        }
        #imageContainer {
            display: flex;
            justify-content: space-evenly;
            gap: 10px;
            flex-wrap: wrap;        /* Allows images to wrap if needed */
            margin-top: 10px;
            align-items: center;
        }
         
          .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 2.3rem;
            font-weight: bold;
            background: none;
            border: none;
            color: black;
          }
        }

{box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  display: block;
  width: 100%;
  max-width: 600px; /* or something appropriate */
  margin: auto;
  grid-column: span 2;
  position:relative;
}
.dot-container {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  z-index: 2;
}

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

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

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev {
  left: 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.49);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

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

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
}
.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}
.ezgallery.horizontal a {
  text-align: center;
}
.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 250px;
  max-height: 10px;
  object-fit: contain; 
  object-position: bottom;
}
.ezgallery.montage img { 
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

/* Create three equal columns that floats next to each other */
.column {
  display: none; /* Hide all elements by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: 1px solid #46484d;
  border-radius: 4px;
  outline: none;
  padding: 5px 10px;
  margin: 2px;
  background-color: #fffbeb;
  cursor: pointer;
  font-family: 'VCR Mono';
  color: #1c1d1f;
  font-size: 1em;
  font-weight: bold;
}
.btn:hover {
  background-color: #fff6ba;
}
.btn.active {
  background-color: #ffcf57;
} 

a {
    text-decoration: none; 
    color: #364ed9;
    cursor: pointer;
  }
  
/* Styling the scrollbar in Chrome and Safari */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #ffdf87; /* Set thumb color for Chrome and Safari */
}

::-webkit-scrollbar-track {
  background-color: #fffaed; /* Set track color for Chrome and Safari */
}

.modall{
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 10;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5); /* Dim background */
}

.modall-content{
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 50%;
  border: 2px dotted #46484d;
}

.text {
    background-color:#f7f7f7;
    padding: 5px;
    padding-top: 10px;
    border: 2px dotted #46484d;
    width: 100%;
    margin: 10px;
    text-align: center;
    font-family: 'VCR Mono';
  }
  
.info {
  border: 1px solid #46484d;
  border-radius: 4px;
  outline: none;
  padding: 10px;
  margin: 2px;
  background-color: #fffbeb;
  cursor: pointer;
  font-family: 'VCR Mono';
  color: #1c1d1f;
  font-size: 1em;
  font-weight: bold;
}

.filter-info {
  display: none;
}

h2{
  margin:5px;
  margin-left:0px;
}

      .closee {
            text-align:right;
            font-size: 1.5rem;
            font-weight: bold;
            background: none;
            border: none;
            color: black;
            margin:2px;
        }