/* Fonts */

@font-face {
  font-family: 'Titillium';
  src: url("/fonts/Titillium-Regular.otf") format("opentype");
  font-style: normal;
  font-display: swap;
  font-style: normal;
}
/* 
 * Licensed under SIL Open Font License, Version 1.1
 * https://openfontlicense.org/documents/OFL.txt
 */

@font-face {
  font-family: "SourceCodePro-Light";
  src: url("/fonts/SourceCodePro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 
 * Licensed under SIL Open Font License, Version 1.1
 * https://openfontlicense.org/documents/OFL.txt
 */

/* Layout */

body {
  color: #e0e0e0;
  font-size: 100%;
  line-height: 1.5;
  max-width: 45rem;
  padding: 1rem;
  margin: 0 auto;
  /* background-color: rgb(38, 36, 32); */
  background: url(./../static-img/background-ni9.png) 0px 0px repeat #151515;
  font-family: "Titillium";
}

.content {
  margin-bottom: 2rem;
}

footer {
  align-items: center;
}

.monero {
	color: rgb(65, 124, 212) ;
  font-size: 0.8rem ;
  font-family: "SourceCodePro-Light", sans-serif;
}


/* nav */

.site-nav {
  display: flex;
}

.site-nav a {
	color: rgb(105, 177, 50);
  display: block;
  padding: 1rem;
  text-decoration: none;
}

.site-nav a:visited {
  display: block;
  padding: 1rem;
  color: rgb(76, 131, 34);
  font-weight: bold;
  text-decoration: underline;
}

.site-nav .logo {
  font-weight: bold;
  padding-left: 0;
}

.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 48rem) {
  .site-nav,
  .main-menu {
    flex-direction: column;
  }

  .site-nav a {
    padding: 0.5rem;
    padding-left: 0;
  }
}

/* LISTS */

.post-snippet {
  margin-bottom: 1rem;
}

.post-snippet h3 {
  margin-bottom: 0.25rem;
}

.post-snippet-link {
  color: rgb(218, 228, 133) ;
  text-decoration: none;
  margin-bottom: 1rem;
}

.post-snippet-link:hover {
  color: rgb(234, 165, 120) ;
}

/* Gallery */
.gallery-snippet {
  width: 15rem;
}

.gallery-snippet-image-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
}

.gallery-snippet-image-wrapper:hover .gallery-snippet-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.gallery-snippet-thumbnail {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay container */
.gallery-snippet-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  color: #fff;

  padding: 1rem 1rem;
}

/* Optional text tweaks */
.gallery-snippet-title {
  margin: 0;
  font-size: 1.1rem;
}

.gallery-snippet-overlay time,
.gallery-snippet-location {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  padding: var(--gap);
}

#gallery img {
  width: 200px; 
  height: auto;
  margin: 5px;
  object-fit: cover;
}

.gallery img:hover {
  opacity: 0.8;
}


.viewer img {
  max-width: 95%;
  max-height: 95%;
}

.viewer.active {
  display: flex;
}

/* The dark overlay container */
#viewer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* When active, show the overlay */
#viewer.active {
  display: flex;
}

/* Fullscreen image */
#viewer-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  cursor: pointer;
}

/* Expandables */

.expand {
  border: 0px solid #dddddd00;
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.expand-header {
  width: 100%;
  background: #f7f7f700;
  color: rgb(218, 228, 133) ;
  border: none;
  padding: 0rem;
  font-size: 1.5rem;
  text-align: left;
  cursor: pointer;
  font-family: "Titillium";
}

.expand-header:hover {
  color: rgb(234, 165, 120) ;
}

.expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1rem;
}

.expand-content p {
  margin: 1rem 0;
}