/* =========================================================
   ADULT PAGE OVERRIDES
   Loads AFTER style.css
   ========================================================= */


/* =========================
   EASY COLOUR CONTROLS
   ========================= */

.adult-page {
    --adult-bg: #000000;
    --adult-box: #000000;
    --adult-box-light: #181818;

    --adult-border: #1F1F1F;
    --adult-border-dark: #000000;

    --adult-text: #E6E6E6;
    --adult-muted: #C9C9C9;

    --adult-link: #CF0000;
    --adult-link-hover: #ffffff;

    --adult-heading: #E6E6E6;

    --adult-nav: #1C1C1C;
    --adult-nav-hover: #262626;
}


/* =========================
   ADULT SCROLLBARS
   ========================= */

body.adult-page::-webkit-scrollbar,
body.adult-page *::-webkit-scrollbar {
    width: 7px;
}

body.adult-page::-webkit-scrollbar-track,
body.adult-page *::-webkit-scrollbar-track {
    background: #000000;
}

body.adult-page::-webkit-scrollbar-thumb,
body.adult-page *::-webkit-scrollbar-thumb {
    background: #181818;
    border-radius: 7px;
}

/* =========================
   PAGE BACKGROUND
   ========================= */

body.adult-page {
    background-image: url("adult/static.gif");
    background-repeat: repeat;
    background-size: auto;

    background-color: var(--adult-bg);

    color: var(--adult-text);
}


/* =========================
   MAIN SITE CONTAINER
   ========================= */

.adult-page #container {
    background-color: var(--adult-box);

    border-color: var(--adult-border);
}


/* =========================
   ADULT HEADER
   ========================= */

/*
   If your normal header image is set through #header
   in style.css, this overrides it JUST here.

   Replace adult/header.jpg whenever you make/find one.
*/

.adult-page #header {
    background-image: url("adult/blackmarble.jpg");
    background-repeat: repeat;
    background-position: center;
    background-size: contain;

    display: flex;
    align-items: center;      /* vertical center */
    justify-content: center;  /* horizontal center */
}

.adult-page #header h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--adult-heading);
}


/* =========================
   NAVBAR
   ========================= */

.adult-page #navbar {
    background-color: var(--adult-nav);

    border-color: var(--adult-border);
}


.adult-page #navbar a,
.adult-page #navbar a:link,
.adult-page #navbar a:visited {
    color: var(--adult-text) !important;
}


.adult-page #navbar a:hover {
    color: var(--adult-link-hover) !important;

    background-color: var(--adult-nav-hover);
}


/* =========================
   ADULT BLINKIE SCROLLER
   ========================= */

body.adult-page .blinkie-scroll {
    background-color: #1C1C1C;
    border-top-color: var(--adult-border);
    border-bottom-color: var(--adult-border);
}


/* =========================
   MAIN BOXES
   ========================= */

.adult-page .box,
.adult-page .content-box,
.adult-page .webringmain-box {
    background-color: var(--adult-box);

    border-color: var(--adult-border);

    color: var(--adult-text);
}


/*
   Gives nested boxes a slightly different tone.
   Useful for your fanlisting box etc.
*/

.adult-page .box .box {
    background-color: var(--adult-box-light);
  
}


/* =========================
   CHANGE THIS TO CHANGE THE MAIN MIDDLE SECTION BKG COLOR
   ========================= */
body.adult-page main {
    background-image:  url("adult/static.gif");
    background-color:  #000000;
}

.box-light {
  background-color:  #181818;
  border: var(--adult-border);
  padding: 10px;
   border-radius: 10px;
  margin-bottom: 15px;
            
}


/* =========================
   HEADINGS
   ========================= */

.adult-page h1,
.adult-page h2,
.adult-page h3 {
    color: var(--adult-heading);
}


/* =========================
   TEXT
   ========================= */

.adult-page p {
    color: var(--adult-text);
}


/* =========================
   LINKS
   ========================= */

.adult-page a,
.adult-page a:link,
.adult-page a:visited {
    color: var(--adult-link);
}


.adult-page a:hover {
    color: var(--adult-link-hover);
}


/* =========================
   SIDE BARS
   ========================= */

.adult-page #leftSidebar,
.adult-page #rightSidebar {
    color: var(--adult-text);
}






/* =========================
   FOOTER
   ========================= */

.adult-page footer {
    background-color: var(--adult-nav);

    border-color: var(--adult-border);

    color: var(--adult-muted);
}


/* =========================================================
   BOTTOM IMAGE SCROLLER
   ========================================================= */


/*
   Put your .adult-image-scroll near the VERY BOTTOM
   of the HTML, directly above <footer>.
*/

.adult-image-scroll {
    width: 100%;

    overflow: hidden;

    box-sizing: border-box;

    padding: 15px 0;

    margin-top: 15px;

    background-color: rgba(0, 0, 0, 0.35);

    border-top: 2px solid var(--adult-border);
    border-bottom: 2px solid var(--adult-border);
}


.adult-image-track {
    display: flex;

    align-items: center;

    gap: 12px;

    width: max-content;

    animation: adult-image-scroll 25s linear infinite;
}


/*
   Images keep their proportions.

   They can be UP TO:
   300px wide
   400px tall
*/

.adult-image-track img {
    width: auto;
    height: auto;

    max-width: 250px;
    max-height: 325px;

    object-fit: contain;

    flex-shrink: 0;

    border: 1px solid var(--adult-border);
}


/* stop moving while hovered */

.adult-image-track:hover {
    animation-play-state: paused;
}


@keyframes adult-image-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================
   OPTIONAL SCROLLER TITLE
   ========================= */

.adult-scroll-title {
    text-align: center;

    margin: 20px 0 5px;

    color: var(--adult-heading);

    letter-spacing: 2px;
}


/* =========================
   MOBILE
   ========================= */

@media only screen and (max-width: 800px) {

    .adult-image-track img {
        max-width: 225px;
        max-height: 300px;
    }

}

/* =========================
   ADULT SIDEBAR BACKGROUNDS
   ========================= */

body.adult-page #leftSidebar,
body.adult-page #rightSidebar {
    background: url("adult/static.gif") repeat !important;
    background-size: auto !important;
}

/* =========================
   FIX ADULT PAGE COLUMN HEIGHT
   ========================= */


body.adult-page #leftSidebar,
body.adult-page #rightSidebar,
body.adult-page main {
    height: auto !important;
    min-height: 0 !important;
}


/* =========================
   SCROLLABLE SIDE BARS
   ========================= */

body.adult-page #leftSidebar,
body.adult-page #rightSidebar {
    height: auto !important;
    min-height: 0 !important;

    max-height: calc(100vh - 40px);

    overflow-y: auto;
    overflow-x: hidden;

    position: sticky;
    top: 20px;

    align-self: flex-start;

    box-sizing: border-box;
}

/* =========================
   ADULT CONTAINER / FLEX BACKGROUND FIX
   ========================= */

body.adult-page #container {
    background-color: transparent;
}

body.adult-page #flex {
    align-items: flex-start !important;

    background-image: url("adult/static.gif");
    background-repeat: repeat;
    background-size: auto;
}

/* MAN OF THE MONTH */

.man-of-month-img {
    display: block;

    width: 180px;
    height: 200px;

    max-width: 100%;

    object-fit: cover;

    margin: 0 auto 8px auto;

    border: 1px solid var(--adult-border);
}

.man-of-month-info {
    margin: 4px 0 0 0;

    text-align: center;

    font-size: 0.85rem;

    line-height: 1.3;
}
.man-of-month-lastedit {
    margin: 4px 0 0 0;

    text-align: center;

    font-size: 0.525rem;
    opacity: 0.75;

    line-height: 1.3;
}


/* =========================
   SIDEBAR PHOTO SCROLLER
   ========================= */

body.adult-page .sidebar-photo-scroll {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 6px 0 10px 0;

    box-sizing: border-box;
    scroll-behavior: smooth;
}


/* NORMAL PHOTOS */

body.adult-page .sidebar-photo-scroll img {
    display: block;

    width: auto;
    height: auto;

    max-width: 200px;
    max-height: 250px;

    object-fit: contain;

    flex-shrink: 0;
    align-self: flex-start;

    border: 1px solid var(--adult-border);
    border-radius: 4px;
}


/* TALL Y2K-STYLE ADS
   Add class="tall-ad" to any image
   you want to keep extra tall.
*/

body.adult-page .sidebar-photo-scroll img.tall-ad {
   height: 560px;
    width: auto;

    max-width: 280px;
    max-height: none;

    object-fit: contain;

    flex-shrink: 0;
    align-self: flex-start;
}

body.adult-page .sidebar-photo-scroll img.wide-tall-ad {
    width: 180px;
    height: 560px;

    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center;

    flex-shrink: 0;
}

/* =========================================================
   MEN MEN MEN MARQUEE
   ========================================================= */

.men-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    background: transparent;

    margin: 15px 0 5px;
    padding: 4px 0;

    box-sizing: border-box;
}


.men-marquee-track {
    display: flex;
    width: max-content;

    animation: men-marquee-scroll 35s linear infinite;
}


.men-marquee-track span {
    display: block;

    flex-shrink: 0;

    font-size: 1.2rem;
    font-weight: bold;

    letter-spacing: 3px;

    color: var(--adult-heading);
}


@keyframes men-marquee-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}