/* 
    https://www.w3.org/Style/Examples/007/units.en.html
*/

html {
    background-color: #dddddd;
    /* dots, see https://stackoverflow.com/questions/55364127/making-a-dotted-grid-with-css */
    /*
    background-image: radial-gradient(#888888 1px, transparent 0);
    background-size: 20px 20px;
    background-position: -9px -9px;
    */
    /* stripes, see https://css-tricks.com/stripes-css/ */
}

body {
    line-height: 1.2;
    max-width: 50em;
    padding: 15px 30px;
    margin: 6em auto 19em;
    box-shadow: 0 .3em 1em #000;
    border-radius: 16px;
}

img.gallery {
    /*
    max-width: 24em;
    max-height: 20em; interferes with eleventy-img, which sets width and height
    */

    /*nice shadows and borders*/
    box-shadow: 0 0.4em 0.9em #000;
    border-radius: 5px;
    border: 0.4rem solid #ddd;
}

img.single_image {
    width: 100%;
    height: auto;
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 3%,
        rgba(0,0,0,1) 97%,
        rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 3%,
        rgba(0,0,0,1) 97%,
        rgba(0,0,0,0) 100%);
}

.video-thumbnail {
    position: relative;
    display: inline-block;
}

.video-thumbnail img {
    width: 100%;
    display: block;
    border-radius: 8px; /* Optional rounded corners */
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 15px 20px;
    cursor: pointer;
}

@supports (grid-template-columns: masonry) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry;
    gap: 16px;
  }
}

@supports not (grid-template-columns: masonry) {
  .gallery {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

figure {
    margin: 0 0 0;
}

label {
  /* fixes checkbox wrap */
  display: inline;
}

a:hover {
  /* deactivate noisy underline on hover */
  border-bottom: none;
}

p {
  margin-top: 0px;
  margin-bottom: 0.5rem;
  text-align: justify;
}

/* Tries to fix prism-coy's strange shadow - does not
   work well with twilight (or maybe with coy only)
pre[class*="language-"]:before,
pre[class*="language-"]:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0.0em;
	left: 0.0em;
	width: 100%;
	height: 100%;
	max-height: 13em;
	box-shadow: 0px 3px 8px #979797;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
*/