:root {
  --color-edgj-light-blue: rgb(0, 92, 151);
  --color-edgj-navy: rgb(14, 23, 38);

}

/* || GENERAL STYLES */

body {
  font-family: "IBM Plex Sans", Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.6;
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

article {
  text-align: start;
}

article header p {
  font-size: smaller;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  margin: 5%;
  font-size: 1.3rem;
  gap: 0.4rem 1.2rem;
  border-block-end: 2px solid var(--color-edgj-light-blue);
}

 footer {
  font-size: smaller;
  text-align: center;
  margin: 5%;
  border-block-start: 2px solid var(--color-edgj-light-blue);
}

footer ul {
  display: flex;
  list-style: none;
  justify-content: center;
  padding: 0;
  flex-wrap: wrap;
  font-size: 1.3rem;
  column-gap: 30px;
}

footer a,
footer a:link,
footer a:visited,
footer a:hover {
  text-decoration: none;
}

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

/* ibm-plex-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "IBM Plex Sans";
  font-display: fallback;
  font-weight: 400;
  src: url("/fonts/ibm-plex-sans-v14-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+ */
    url("/fonts/ibm-plex-sans-v14-latin-regular.woff") format("woff");
  /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* || Blog Post */

.blog-contents li {
  display: inline-block;
}

/* || Photo Overlay */

.photo-container {
  position: relative;
  display: inline-block;
}

.photo-container img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-container:hover .photo-overlay {
  opacity: 1;
}

.photo-overlay {
  position: absolute;
  width: auto;
  height: auto;
  max-height: 30%;
  background: rgba(59, 68, 75, 0.5);
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: smaller;
  text-align: start;
  padding: 1%;
  opacity: 0;
  transition: opacity 0.7s ease;
  backdrop-filter: blur(5px);
}

figcaption.photo-overlay {
  bottom: 2%;
  left: 2%;
}

p.photo-overlay {
  top: 2%;
  left: 2%;
}

.photo-overlay a, 
.photo-overlay a:link, 
.photo-overlay a:visited, 
.photo-overlay a:hover{
  color: white;
  text-decoration: none
}