html{
    scroll-behavior: smooth;
}

.meta {
    font-size: 0.9rem;
    color: #666;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.dot {
font-size: 1rem;
line-height: 1;
}

body {
    overflow-x: hidden;
    background-color: rgb(90, 90 ,90);
    color: white;
    margin: 0;
    font-size: 15pt;
}

/* Center the blog content and give breathing room */
.blog-container {
    background-color: rgb(70, 70, 70);
    max-width: 900px;       /* Keeps text nicely readable */
    margin: 0 auto;         /* Center horizontally */
    padding: 5%;
}

.navbar-brand{
    z-index: 99;
    font-size: 40px; /* 40px */
    font-family: Modak;
}
.navbar-brand img{
    height: 60px; /* 60px */
    width: 60px; /* 60px */ 
}

.figcaption {
    color: lightgray;
    font-size: 0.7vw;
}

.blog-title {
    margin-bottom: 10vw;
}

.blog-image {
    margin-bottom: 5vw;
}

.blog-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.scrollable-image-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
}

.scrollable-image-wrapper img {
    position: relative;
    width: 150vw; /* make it wider than the screen */
    max-width: none; /* prevent Bootstrap-like restrictions */
    height: auto;
    display: inline-block;
}

.section {
    margin-bottom: 8vw;
}
.sections .section:not(.section3) {
    margin-bottom: 5vw;
}