/* style.css for blog_oct23.html */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%; /* Expand to the entire width of the screen */
    background-color: #030325; /* Blue header color */
    color: #fff; /* Text color for the header */
    padding: 10px;
    display: flex;
    align-items: center; /* Center content vertically */
    font-family: monospace;
    font-size: 10px;
}

.header-row {
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Push the "Back" link to the right */
    width: 100%; /* Expand the row to the full width */
    
}
  
.header-row a {
    text-decoration: none;
    color: #fff; /* Text color for the "Back" link */
}

body {
    background-color: #fff; /* White background */
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    justify-content: center;
    height: 100vh;
    padding-top: 100px;
}
 

.content {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    overflow-x: auto; /* Allows horizontal scrolling */
}

.photo-container {
    white-space: nowrap; /* Prevents the photos from wrapping to the next line */
    overflow-x: auto; /* Allows horizontal scrolling */
    cursor: grab;
}
.photo-container:active {
    cursor: grabbing; /* cursor style while dragging */
}

.photo {
    position: relative;
    display: inline-block; /* Allows the photos to be in one line */
    /* other styles... */
}

.photo img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    padding: 20px;
    transition: opacity 0.5s ease-in;
}
  
.photo-description {

    color: #030325;
    align-items: center; /* Center content vertically */
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 10px;
    text-align: center;
    opacity: 0; /* Start fully transparent */
    visibility: hidden; /* Start as not visible */
    transition: opacity 0.5s ease, visibility 0s 0.5s; /* Smooth transition for opacity and delay visibility */
}

.photo:hover .photo-description {
    display: block; /* Ensure the description is shown */
    opacity: 1; /* Fully opaque */
    visibility: visible; /* Make it visible */
    transition-delay: 0s; /* Apply effect immediately on hover without delay */
}

.photo:hover img {
    opacity: 0.1;
}