html, body, ul, li, h1, h2, form, p { margin: 0pt; padding: 0pt; box-sizing: border-box; }

body { background: white none repeat; color: black; font-family: Arial, Tahoma, sans-serif; letter-spacing: -1.25px; text-align: center; }

a { color: white; text-decoration: none; }

ul { list-style-type: none; }

.clear { margin: 0pt !important; padding: 0pt !important; float: none !important; clear: both; width: 0pt !important; height: 0pt !important; font-size: 0pt; line-height: 0pt; }

#contact { border-top: 1px solid #393e41; border-bottom: 4px solid #393e41; background: rgb(102, 102, 102) none repeat; text-align: left; }

#contact .forms { margin: 0pt auto; padding: 4px 0pt 4px; max-width: 98%; display: none; }

#search_input { border: 0pt none; padding: 5px 8px; background: white url('https://picult.com/themes/blue/images/input-bg.gif') repeat-x scroll center top; max-width: 160px; font-size: 15px; font-weight: bold; font-family: Arial, Tahoma, sans-serif; color: rgb(153, 153, 153); }

.pushbutton { border: 0pt none; padding: 5px 8px; background: white url('https://picult.com/themes/blue/images/input-bg.gif') repeat-x scroll center top; max-width: 70px; font-size: 15px; font-weight: bold; font-family: Arial, Tahoma, sans-serif; color: rgb(153, 153, 153); }

#wrap { margin: 0pt auto; max-width: 98%; width: 100%; box-sizing: border-box; text-align: left; }

#toogle { padding: 5px 8px; background: #393e41 none repeat; float: right; font-size: 16px; font-weight: bold; color: white; cursor: pointer; }

#header {
    margin: 0pt 0pt 14px;
    padding: 20px 0px 0px;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

#menu a { padding: 4px 12px 0px 12px; font-size: 21px; line-height: 24px; font-weight: bold; float: left; }

#menu a:hover { padding: 4px 12px 0px 12px; font-size: 21px; line-height: 24px; font-weight: bold; float: left; color: #333333; }

#logo {
    background: #3f88c5 none repeat;
    color: white;
    font-size: 34px;
    font-weight: bold;
    flex-grow: 0;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
}

#logo a { padding: 5px 10px; background: #3f88c5 none repeat; color: white; font-size: 34px; font-weight: bold; }

#logo a:hover { padding: 5px 10px; background: #3f88c5 none repeat; color: white; font-size: 34px; font-weight: bold; }

#title { padding: 0pt 0pt 0pt 25px; font-size: 24px; line-height: 24px; font-weight: bold; flex-grow: 1; text-align: center; }

#title a { color: black; }

#up, #nav {
    margin: 23px 0pt 0pt;
    background: #3f88c5;
    font-size: 22px;
    font-weight: bold;
    text-transform: lowercase;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

#nav { background: #333333; }

#nav a, #up a {
    padding: 0pt 10px 1px 10px;
    display: inline-block;
    white-space: nowrap;
}

#works, #images { display: flex; flex-wrap: wrap; justify-content: flex-start; }

/* DEFAULT DESKTOP (1024px+) */
#works li { margin: 10px; width: calc(16.66% - 20px); position: relative; }
#images li { margin: 10px; width: calc(12.5% - 20px); position: relative; }

#works li:hover .work .name, #works li:hover .work .studio { background: #3f88c5 none repeat; }

#works li a {
    display: block;
    position: relative;    /* Crucial for positioning the image inside */
    width: 100%;
    height: 0;             /* Collapse the element's own height... */
    padding-top: 100%;     /* ...and use padding to create a height equal to the width (a square). */
}

#works li img {
    position: absolute;    /* Position relative to the <a> tag */
    top: 0;
    left: 0;
    width: 100%;           /* Force the image to fill the full width of the <a> tag */
    height: 100%;          /* Force the image to fill the full height of the <a> tag */
    object-fit: cover;     /* Scale image to cover the area without distortion */
    border: 0pt none;
}

#works li .unvisited { padding: 4px 5px; background: #3f88c5 none repeat; position: absolute; top: 10px; left: 10px; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: normal; }

#works li .work { position: absolute; bottom: 10px; left: 10px; right: 10px; }

#works li .work .name { padding: 5px 8px; background: #393e41 none repeat; float: left; }

#works li .work .name a { position: relative; z-index: 2; }

#works li .work a { display: inline; width: auto; height: auto; }

#works li .work .studio a:hover { text-decoration: underline; }

#images li img { width: 100%; height: auto; }

#image { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }

#image li img { max-width: 100%; height: auto; }

#ga { padding: 16px; background: #f0f0f0 none repeat; margin-bottom: 20px; min-height: 90px; }

#ga .random-album-container { display: flex; flex-wrap: wrap; justify-content: center; }

#ga h3 { margin-bottom: 10px; }

.random-album-item { margin: 5px; }

.random-album-item img { width: 100px; height: 100px; object-fit: cover; }

#com { padding: 1px 3px 0px 3px; background: #F6F7EB none repeat; margin-bottom: 20px; min-height: 90px; max-width: 600px; margin: auto; }

#idc-container { max-width: 600px !important; }

#comment .forms { margin: 0pt auto; padding: 4px 0pt 4px; width: 98%; display: none; }

#toogler { padding: 5px 8px; background: #393e41 none repeat; float: center; font-size: 14px; font-weight: bold; color: white; cursor: pointer; }

#latest ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }

#latest ul li { display: inline; margin: 5px; }

#latest ul li img { max-width: 85px; max-height: 85px; width: auto; height: auto; }

#paginator { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #393e41; text-align: center; }

ul.pagelist { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }

ul.pagelist li { display: inline; }

ul.pagelist li a { color: rgb(255, 255, 255); background: #393e41; padding: 3px 12px; }

ul.pagelist li a:hover { color: rgb(255, 255, 255); background: #3f88c5; padding: 3px 12px; }

ul.pagelist .disabledlink { padding: 3px 12px; background-color: rgb(204, 204, 204); color: rgb(255, 255, 255); margin: 0 4px; }

#copyright { font-size: 14px; font-weight: bold; color: rgb(204, 204, 204); margin-bottom: 20px; text-align: center; }

body { margin-top: 0px !important; }

#zp__admin_module { display: none !important; }

button, input[type="button"], input[type="submit"] { border: 0px solid; background: #3f88c5; font-size: 16px; font-weight: bold; text-transform: lowercase; color: white; padding: 4px 8px; }

.share-buttons-container { display: flex; flex-wrap: wrap; justify-content: center; }

.share-button { margin: 5px; display: inline-block; }

.share-button .share { color: #FFF; font-size: 14px; padding: 4px 8px; }

.share-button-twit .share { background-color: #00ABF0; }

.share-button-face .share { background-color: #3b5998; }

.share-button-tumb .share { background-color: #35465c; }

.share-button-pin .share { background-color: #bd081c; }

.share-button-mail .share { background-color: #777; }

.share-button-whats .share { background-color: #25d366; }

.share-button-vk .share { background-color: #507299; }

.share-button-tele .share { background-color: #54a9eb; }

#txt a { color: #3f88c5; }

#txt { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }

#image textarea { max-width: 90%; }

#ga .random-album-container { display: flex; flex-wrap: wrap; justify-content: center; }

#ga .random-album-item { margin: 5px; }

#ga .random-album-item img { width: 100px; height: 100px; object-fit: cover; }

/* Media Queries for Responsive Grid System */

/* Large tablets (768px-1024px) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    /* index.php: 4 images per row */
    #works li { width: calc(25% - 20px); }
    /* album.php: 6 images per row */
    #images li { width: calc(16.66% - 20px); }
}

/* Small tablets/large phones (480px-768px) */
@media screen and (max-width: 768px) and (min-width: 481px) {
    #header {
        flex-direction: column;
        text-align: center;
        padding: 10px 5px !important;
        margin: 0 0 10px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #logo, #title, #up, #nav {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        margin: 5px 0 !important;
        box-sizing: border-box !important;
    }

    #logo a {
        display: block;
        font-size: 32px !important;
        padding: 12px 10px !important;
        min-height: 44px;
        line-height: 1.2;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #3f88c5 !important;
        color: white !important;
    }

    #title {
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1.3;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #up a, #nav a {
        font-size: 26px !important;
        padding: 12px 15px !important;
        min-height: 44px;
        line-height: 1.2;
        display: block;
        flex-grow: 1;
    }

    #up, #nav {
        font-size: 26px !important;
        margin: 5px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #txt {
        font-size: 1em !important;
        line-height: 1.5;
        padding: 1px;
        text-align: left;
    }

    /* index.php: 3 images per row */
    #works li { width: calc(33.33% - 20px); }
    /* album.php: 5 images per row */
    #images li { width: calc(20% - 20px); }

    #paginator {
        font-size: 22px !important;
        margin: 25px 0;
        padding: 10px;
    }

    ul.pagelist {
        font-size: 20px;
        gap: 8px;
    }

    ul.pagelist li a, ul.pagelist .disabledlink {
        padding: 12px 18px !important;
        font-size: 20px !important;
        margin: 4px;
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }
}

/* Small phones (under 480px) */
@media screen and (max-width: 480px) {
    #header {
        flex-direction: column;
        text-align: center;
        padding: 5px 3px !important;
        margin: 0 0 8px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #logo, #title, #up, #nav {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        margin: 3px 0 !important;
        box-sizing: border-box !important;
    }

    #logo a {
        font-size: 28px !important;
        padding: 10px 5px !important;
        min-height: 50px;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        background: #3f88c5 !important;
        color: white !important;
    }

    #title {
        font-size: 22px !important;
        padding: 5px !important;
        min-height: 50px;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #up a, #nav a {
        font-size: 22px !important;
        padding: 12px 10px !important;
        flex-grow: 1;
    }

    #up, #nav {
        margin: 3px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #txt {
        font-size: 1.1em !important;
        line-height: 1.6;
        padding: 1px !important;
    }

    /* index.php: 2 images per row */
    #works li {
        width: calc(50% - 20px);
        margin: 10px;
    }

    /* album.php: 4 images per row */
    #images li {
        width: calc(25% - 20px);
        margin: 10px;
    }

    #paginator {
        font-size: 24px !important;
        margin: 30px 0;
        padding: 15px 10px;
    }

    ul.pagelist li a, ul.pagelist .disabledlink {
        padding: 15px 20px !important;
        font-size: 22px !important;
        margin: 6px 3px;
        min-height: 50px;
        min-width: 50px;
        border-radius: 6px;
    }

    .share-button {
        margin: 8px 4px !important;
    }

    .share-button .share {
        font-size: 16px !important;
        padding: 12px 16px !important;
        min-height: 44px;
    }

    #copyright {
        font-size: 16px !important;
        line-height: 1.4;
        padding: 10px;
    }

    button, input[type="button"], input[type="submit"] {
        font-size: 18px !important;
        padding: 12px 16px !important;
        min-height: 44px;
    }

    .pushbutton {
        font-size: 16px !important;
        padding: 12px 16px !important;
        min-height: 44px;
        max-width: 120px;
    }

    #search_input {
        font-size: 16px !important;
        padding: 12px 16px !important;
        min-height: 44px;
        max-width: 200px;
    }
}
ul.pagelist .current { 
    padding: 3px 12px; 
    margin: 0 4px; 
}
/* --- Random Promo Banner Styles --- */
#random-promo-banner {
  background-color: #393e41; /* Using your site's dark gray */
  border: 2px dashed #3f88c5; /* Using your site's blue for a retro, flashy border */
  color: #ffffff;
  padding: 15px 20px;
  margin: 25px auto;
  text-align: center;
  font-family: 'Courier New', Courier, monospace; /* Monospace font for an old-school tech feel */
  font-size: 1.1em;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(63, 136, 197, 0.5); /* A blue glow to make it stand out */
  max-width: 90%;
  box-sizing: border-box;
}

#random-promo-banner a {
  color: #f7ff00; /* A flashy, high-contrast electric yellow for the link */
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* Shadow to make the yellow text readable */
  transition: all 0.2s ease;
}

#random-promo-banner a:hover {
  color: #ffffff;
  background-color: #3f88c5; /* Highlights with your site's blue on hover */
  padding: 2px 4px;
  border-radius: 3px;
  text-shadow: none;
}