{
    outline-style: none
;
}


body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, Geneva, Verdana, Helvetica, Sans-serif;
    background-color: #050505;
}


.container {
    width: 100%;
    font-size: small;
    color: lightgrey;
    padding: 0;
    margin: 0;
    background-color: black;
}

.details {
    padding: 20px;
    background-color: #252525;
    font-size: 100%;
    line-height: 150%;
}

h2 {
    margin: 0;
    padding: 0;
    font-size: 120%;
}

.blog-body-text {
    margin: 0;
    padding: 0;
    font-size: 120%;
    line-height: 1.2;
}

h3 {
    font-size: 110%;
}

h4 {
    font-size: 90%;
    padding: 2px;
    border: medium;
}


/*https://codepen.io/engza/pen/JemoB */
.boxer {
    display: table;
    border-collapse: collapse;
}

.boxer .box-row {
    display: table-row;
}

.boxer .box {
    display: table-cell;
    vertical-align: top;
    border: 1px solid black;
    padding: 5px;
}

.responsive {
    width: 100%;
    height: auto;
}

.fade-in {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
    -ms-animation: fadeIn ease 5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* admin table */

#phototable {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#phototable td, #phototable th {
    border: 1px solid #ddd;
    padding: 8px;

}

#phototable tr:hover {
    background-color: #ddd;
}

@media (max-width: 480px) {
    .logo img {
        width: 220px;
    }
}

/* end admin table */


/* browse pictures classes - masonry layout */

/* .masonry is the positioning context that masonry.js lays out;
   .masonry-item is one tile. JS sets each item's width/left/top so
   they pack into balanced columns - landscape photos stay wide,
   portraits stay tall, nothing gets cropped or squared off. */
.masonry {
    position: relative;
    width: 100%;
}

.masonry-item {
    position: absolute;
    top: 0;
    left: 0;
    /* Only animate position, never width. masonry.js sets width and then
       synchronously measures offsetHeight to stack the next tile; if width
       is transitioned that measurement happens mid-animation against the
       old width and every tile below is mispositioned (gaps / overlaps). */
    transition: left 0.2s ease, top 0.2s ease;
}

.masonry-item img {
    display: block;
    width: 100%;
    height: auto; /* natural aspect ratio - no forced square/crop */
    border-radius: 4px;
}

/* category overview tiles: name + photo count fade in on hover */
.box {
    position: relative;
    display: block;
}

.box:hover > a > img {
    opacity: .4;
}

.box .text {
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 40%; /* Adjust this value to move the positioned div up and down */
    text-align: center;
    width: 100%;
    transition: all 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.box:hover .text {
    opacity: 1;
}

@media (max-width: 480px) {
    .box .text {
        opacity: 1;
    }

    .box > a > img {
        opacity: .4;
    }
}

/* category detail page: plain photo tiles, no caption overlay */
.browsePict {
    display: block;
}

/* end browse pictures classes */

/* home page tiles - Bootstrap .ratio box holding one photo.
   The .ratio element must be block-level (a div, or a span with d-block):
   on an inline span iOS WebKit (Safari and Chrome on iPhone) lays out the
   box but never paints the image. */
.ratio-3x2 {
    --bs-aspect-ratio: 66.6667%;
}

/* whole photo, centred on black (recently added - any orientation) */
.photo-fit {
    background-color: black;
}

.photo-fit > img {
    object-fit: contain;
}

/* photo fills the box (category covers - landscape) */
.photo-fill > img {
    object-fit: cover;
}

/* end home page tiles */

/* arrows on pictures - readblog */
.container {
    position: relative;
}

.container .left {
    position: absolute;
    top: 50%;
    left: 0;
}

.container .right {
    position: absolute;
    top: 50%;
    right: 0;
}

/* ─────────────────────────────────────────
   Mobile navigation drawer — hamburger menu
   opens as a right-aligned panel instead of
   Bootstrap's default left-aligned/full-width
   collapse.
───────────────────────────────────────── */
@media (max-width: 575.98px) {

    /* Navbar becomes the positioning context */
    .navbar {
        position: relative;
    }

    .navbar-toggler {
        margin-top: 15px;
        padding: .25rem .5rem;
    }

    /* Drawer during opening and when open */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        transition: none !important;

        position: absolute;
        top: 100%;
        right: 0;
        left: auto;

        width: 150px;
        padding: 1rem 1.25rem;

        background: black;
        border: 1px solid #E1D9C6;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(38, 56, 74, .15);

        z-index: 2000;
    }

    .navbar-nav {
        margin: 0;
        padding: 0;
        transform: none;

        align-items: flex-end;
        text-align: right;
    }

    .navbar-nav .nav-link {
        display: block;
        width: auto;
        padding: .45rem 0;
        line-height: 1.3;
    }
}