@font-face {
  font-family: '04b08';
  src: url('/fonts/04b08.eot');
  src: url('/fonts/04b08.eot?#iefix') format('embedded-opentype'),
      url('/fonts/04b08.woff2') format('woff2'),
      url('/fonts/04b08.woff') format('woff'),
      url('/fonts/04b08.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-smooth: never;
  -webkit-font-smoothing : none;
}

@font-face {
  font-family: '04b03b';
  src: url('/fonts/04b03b.eot');
  src: url('/fonts/04b03b.eot?#iefix') format('embedded-opentype'),
      url('/fonts/04b03b.woff2') format('woff2'),
      url('/fonts/04b03b.woff') format('woff'),
      url('/fonts/04b03b.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-smooth: never;
  -webkit-font-smoothing : none;
}

p {
  font-family: '04b08', monospace;
  font-size: 8px;
}

p.itemTitle {
  font-family: '04b08', monospace;
  font-size: 14px;
  margin-bottom: -8px;
}

p.itemDesc {
  font-family: '04b03b', monospace;
  font-size: 12px;
}

a {
  font-family: '04b08', monospace;
  font-size: 11px;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: darkslateblue;
}

a:hover {
  color: aquamarine;
  text-decoration: underline;
}

h1 {
  font-family: '04b08', monospace;
  font-size: 16px;
  margin-bottom: -8px;
  font-smooth: never;
  -webkit-font-smoothing : none;
}

h2 {
  font-family: '04b08', monospace;
  font-size: 14px;
  margin-bottom: 0px;
  font-smooth: never;
  -webkit-font-smoothing : none;
}

.full-center {
    margin: auto;
    width: 65%;
    padding: 10px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* IMAGE GRID SETTINGS */
.row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    /* flex: 33%; */
    max-width: 30%;
    padding: 0 4px;
  }

  .column .section-card {
    margin-top: 8px;
    vertical-align: middle;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1000px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 250px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }


/* FLIP CARD SETTINGS */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.section-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border: 5px solid #f1f1f1;
    perspective: 900px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .section-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .section-card:hover .section-inner {
    transform: rotateX(-180deg);
  }
  
  /* Position the front and back side */
  .section-front, .section-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .section-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .section-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateX(180deg);
  }



/* IMG GALLERY SETTINGS */
.imgGallery {
  display: grid;
  margin: auto;
  width: 65%;
  padding: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


.imgGallery img {
  width: 100%;
}

/*
  And here are some declarations for the image caption.
  Just hover over one of the last 5 images to see it.
*/

.imgGallery .item {
  position: relative;
  overflow: hidden;
  border: 5px solid #f1f1f1;
}

.imgGallery .item2 {
  position: relative;
  overflow: hidden;
}

.imgGallery .item img {
  vertical-align: middle;
}

/* CAPTION OVERLAY */

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 150px;
}

/* Make the image to responsive */
.image {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  padding: 5px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  box-sizing: border-box;
  opacity: 1;
}

/* TWO COLUMN LAYOUT */
.itemColumn {
  float: left;
  overflow: auto;
}

.left {
  width: 70%;
  max-width: 672px;
  flex-wrap: wrap;
  margin-left: -80px;
}

.right {
  width: 30%;
}

/* Clear floats after the columns */
.itemRow:after {
  content: "";
  display: table;
  clear: both;
}

.itemRow {
  margin: auto;
  width: 75%;
  padding: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

aside {
  width: 30%;
  word-wrap: break-word;
  white-space: normal;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  text-align: left;
  font-family: '04b03b', monospace;
  font-size: 8px;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 960px){
  aside {
    float: left;
  }
}

.masonry {
  width: 65%;
  display: flex;
  grid-template-columns: auto auto auto;
  gap: 6px;
  flex-wrap: wrap;
  align-content: space-between;
}

.contentItem {
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  resize: both;
}

.itemMain { grid-column: span 3; grid-row: span 1; }
.imageSmall { grid-row: span 1; width: 160px;}


/* IMAGE MODAL SETTINGS */

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 70%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  font-family: '04b08', monospace;
  font-size: 16px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}