body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
}

img {
  border-radius: 5px;
  width: 70%;
}

img.animated-gif{
  width: 150px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.article{
  margin: 5 auto;
  width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f5f5f5;
}

#photo img {
  width: 100%;
  border-radius: 0px;
}

#memoir img {
  width: 50%;
  border-radius: 0px;
}

#menu {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  text-align: left;
  width: 150px;
  font-family: "HelveticaNeue-Light", "Myriad Pro";
}

#menu .title {
  font-weight: 600;
  margin-bottom: 5px;
  display:inline-block;
}

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menu li {
  margin: 0.5em 0;
}

#menu li a {
  display: inline-block;
  color: #0864c7;
}

#content {
  margin-left: 10px;
  float: left;
  width: 75%;
  min-width: 0px;
}

#content h1, #content h2, #content h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;
  margin: 0;
}

#content h2 {
  margin-top: 2em;
}
#content h3 {
  margin-top: 1em;
}

#content .byline, #content .byline a, #content .note {
  font-size: 10px;
  color: #aaa;
}

#content p, #content ul {
  color: #111;
  line-height: 22px;
}

#content li {
  margin-bottom: 0.7em;
  list-style-type: square;
}

#content blockquote{
  font-size: 1em;
  width:60%;
  margin:20px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:0.7em 30px 0.7em 75px;
  border-left:8px solid #78C0A8 ;
  line-height:1.4;
  position: relative;
  background:#fffffa;
}

#content blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

#content blockquote::after{
  content: '';
}

#content blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.column {
  float: left;
  width: 45%;
  border:1px solid black;
  margin-bottom: 5px;
  margin-left: 5px;
  padding: 5px;
  font-size: small;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.tinted-image-green {
  position: relative;
  width: 250px;
  height: 250px;
}

.tinted-image-green img {
  width: 100%;
  height: 100%;
}

.tinted-image-green .tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 0, 0.25); /* Change this color and opacity to adjust the tint */
}

.tinted-image-red {
  position: relative;
  width: 250px;
  height: 250px;
}

.tinted-image-red img {
  width: 100%;
  height: 100%;
}

.tinted-image-red .tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.25); /* Change this color and opacity to adjust the tint */
}

.tinted-image-blue {
  position: relative;
  width: 250px;
  height: 250px;
}

.tinted-image-blue img {
  width: 100%;
  height: 100%;
}

.tinted-image-blue .tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.25); /* Change this color and opacity to adjust the tint */
}

.tinted-image-yellow {
  position: relative;
  width: 250px;
  height: 250px;
}

.tinted-image-yellow img {
  width: 100%;
  height: 100%;
}

.tinted-image-yellow .tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 0, 0.35); /* Change this color and opacity to adjust the tint */
}

.image-grid {
  padding: 2rem;
}

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-lift:hover .caption {
  opacity: 1;
}

.animate-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Add slight delay for each subsequent image */
.column:nth-child(2) { animation-delay: 0.2s; }
.column:nth-child(3) { animation-delay: 0.4s; }
.column:nth-child(4) { animation-delay: 0.6s; }
.column:nth-child(5) { animation-delay: 0.8s; }
.column:nth-child(6) { animation-delay: 1.0s; }
.column:nth-child(7) { animation-delay: 1.2s; }
.column:nth-child(8) { animation-delay: 1.4s; }
.column:nth-child(9) { animation-delay: 1.6s; }
.column:nth-child(10) { animation-delay: 1.8s; }