body{
    padding : 10px;
    background-color: #dc9e00;
}
#header {
    text-align: center;
}
#main {
    display: flex;
}
#content {
    margin-left: 20px;
    background-color: #00a100;
    border-radius: 10px;
    padding: 10px;
    width: 75%;
}
img{
    max-width:50%;
    max-height:70%;
    height: auto;
}
nav {
    padding: 2px;
    width: 15%;
}
nav a {
    margin:10px;
    background-color: #00ff00;
    border: 2px solid #00a100;
    display: block;
    text-decoration-line: none;
    transition: background-color 0.3s ease;
    color: black;
    border-radius: 5px;    
    padding-right: 5px;
    padding-left: 3px;
}
#NSFW {
    background-color: #ff00d9;
    border: 2px solid #ac0092;
}
nav a:hover {
    background-color: #555;
  }
#NSFW:hover{
    background-color: #555;
  }
.musing {
    background-color: #55555552;
    margin : 5px;
    padding-left : 5px;
    padding-right : 5px;
    padding-top : 1px;
    padding-bottom : 1px;
}


.gallery {
  /* (B1) GRID LAYOUT - 3 IMAGES PER ROW */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 5px;

  /* (B2) OPTIONAL WIDTH RESTRICT */
  margin: 0 auto;
  overflow: hidden;
}

.gal_element {
  border: 4px double #555;
  background-color: #00000024;
}

/* (C) GALLERY IMAGES */
.gal_element img {
  /* (C1) DIMENSION */
  width: fit-content;
  padding: 10px;

   /* (C3) IMAGE RESIZE */
  /* cover | contain | fill | scale-down */
  object-fit: contain;
    text-align: center;

}

.gal_element h2{
    width: 100%;
    text-align: center;
}

.gal_element p{
  display: block;
  visibility: hidden;
  margin-left: 5px;
  margin-right: 5px;
}

/* (E) OPTIONAL ZOOM ON HOVER */
.gal_element img:hover + p{
  visibility: visible;
}

.gal_element img:hover +img+ p{
    visibility: visible;
}

.gal_element div:hover + p{
    visibility: visible;
}

@media only screen and (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}