/* Fixes issue with padding and borders */
*, *::before, *::after {box-sizing: border-box;}

/* You can import fonts here */
/* I've left an example font (EB Garamond, hosted by Google Fonts) for you */
/* To use it, first uncomment the @import line */
/* Then, go to body and use "font-family: "EB Garamond", serif;" instead of the default. */

/* @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap'); */

/* START OF FONTS AND COLORS */
body{
    background-color: #fff; /*This is your background color! */
    color:#444; /* This is your general text color! Links and titles are colored separately. */
    font-size:1.125em;
    line-height:1.6;

    /* Used for everything besides titles. */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Your operating system will choose the first font it has downloaded from the list. */
    /* There's a lot of them because these are all fonts pre-installed on popular operating systems that look similar. */
    
    /* Most font stacks end with 1 of 3 fonts: */
    /* sans-serif: What this theme uses. Plain and simple. */
    /* serif: A little more fancy and antique. What browsers use if no font-family is set. */
    /* monospace: Looks like Programmer Code. Monospace means each character has the same width. */

    /* You can use those on their own, too. */
}
h1,h2,h3{
    color:#000; /* This is your title color! */
    line-height: 1.2;
    text-align:center;

    /* Used for titles. */
    font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; 
    /* I got this font stack from https://modernfontstacks.com/ */
}
.on-link, .on-link:hover{
    /* Color used for the link that you're on in the navigation bar */
    color:#000; 
    /* currently set to be the same as titles and bold text, but you can use a different one.*/
    
    font-weight:bold;
}

/* Links */
a{
    color:#888;
    text-decoration:none;
}
a:hover{
    color:#BBB;
}

/* Anything within <code></code> tags */
code{
    background-color:#eee;
}
/* END OF FONTS AND COLORS */

/* Makes sure images aren't larger than the containers they're in */
img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}

/* Wide container. Wrap this around  */
#wide-container{
    max-width:1200px;
    margin: 0 auto;
}

/* Narrow container, good for text.*/ 
/*Can be used by itself or nestled within a wide container.*/
#narrow-container{
    max-width:650px;
    margin:2em auto;
}
#narrow-container a{
    text-decoration:underline;
}

/* Header, includes title and links */
header{
    margin:2em 0;
    text-align:center;
}
header h1{margin:0;}
nav{
   display: flex;
    flex-wrap: wrap;
    row-gap:0;
    column-gap:1em;
    justify-content: center;
}

/* Masonry Gallery at full width browser window*/
/*Currently displays 4 columns*/
.masonry-sizer, #masonry-gallery .item { width: calc(25% - 8px);}
#masonry-gallery .item {
    margin-bottom:10px;
}

/* Grid Gallery at full width browser window */
#grid-gallery{
    display:grid;
    width:100%;
    gap:10px;
    grid-template-columns:repeat(4, 1fr);
}

/* Justified Gallery at full width browser window*/
#justified-gallery{
width: 100%;
  position: relative;
  overflow: hidden;
}

/* All gallery columns for mid-sized screens*/
/*Currently displays 3 columns*/
@media (min-width:650px) and (max-width:1000px) {
    #grid-gallery{grid-template-columns:repeat(3, 1fr);}
    .masonry-sizer, #masonry-gallery .item { width: calc(33% - 5px);}
}

/*All gallery columns for smaller screens*/
/*Currently displays 2 columns*/
@media (min-width:400px) and (max-width:650px) {
    #grid-gallery{grid-template-columns:repeat(2, 1fr);}
    .masonry-sizer, #masonry-gallery .item { width: calc(50% - 5px);}
}

/*All gallery columns for the smallest screens*/
/*Currently displays 1 columns*/
@media (max-width:400px) {
    #grid-gallery{grid-template-columns:repeat(1, 1fr);}
    .masonry-sizer, #masonry-gallery .item { width: 100%;}
}

/* All Gallery thumbnails */
.item{
    display:flex;
    flex-direction: column;
    gap:10px;
    align-items:center;
    justify-content: start;
    text-align:center;
}
.item-image img{
    width:100%;
    height:100%;
}
/* Removes masonry sizer for you */
#grid-gallery .masonry-sizer{
    display:none;
}
.item-image{
    line-height:0;
}
#item-title{
    font-size:0.9em;
    display:block;
}

/*Justified Gallery*/

.jg {
  --min-width: 33%;
  --row-height: 20vh;
  --max-row-height: 50vh;
  display: flex;
  flex-wrap: wrap;
  margin: 0.25rem;
}

.jg > a {
  --ratio: calc(var(--w) / var(--h));
  flex-grow: calc(var(--ratio) * 100);
  flex-basis: calc(var(--ratio) * var(--row-height));
  margin: 0.25rem;
  min-width: var(--min-width);
}

.jg > a > img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-height: var(--max-row-height);
  object-fit: cover;
}