/* ============== DEFAULT SETTINGS ============== */

:root {
    --content-width: 60%;

    --left-column-width: 20%;
    --main-column-width: 40%;
    --right-column-width: 40%;

    --divider-size: 3px;
}

/* ============== PAGE-SPECIFIC LAYOUTS ============== */

/* ------------ NARROW RIGHT ------------ */

body.narrow-right {
    --content-width: 60%;

    --left-column-width: 20%;
    --main-column-width: 50%;
    --right-column-width: 30%;
}


/* ------------ CENTER ------------ */

body.center-heavy {
    --content-width: 60%;

    --left-column-width: 20%;
    --main-column-width: 80%;
    --right-column-width: 0%;
}


/* ============== RESET ============== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============== BODY ============== */

body {
    background: #000;
    font-family:
        'Courier New',
        Courier,
        monospace;
}
/*  "Liberation Mono", "Source Code Pro", "Courier New", monospace; */

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

header {
    text-align: center;
}

#BUTTONS {
    width: var(--content-width);
    margin: auto;
}

.banner {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

header a,
header a:visited {
    text-decoration: none;
    color: #fcfcfc;
}


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

.container {
    display: flex;
    width: var(--content-width);
    margin: 0 auto;
    overflow: hidden;
}


/* ============== COLUMNS ============== */

.left-column {
    flex: 0 0 var(--left-column-width);
    width: var(--left-column-width);
    min-width: 0;
}

.main-content {
    flex: 0 0 var(--main-column-width);
    width: var(--main-column-width);
    min-width: 0;
}

.right-column {
    flex: 0 0 var(--right-column-width);
    width: var(--right-column-width);
    min-width: 0;
}

.button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.links-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 5px 15px;
}

.links-row a {
    color: black;
    text-align: center;
    display: block;

    padding: 0.15em;
    margin: 0;

    text-decoration: none;
    transition: ease-in 0.1s, ease-out 0.1s;
}

.links-row a:visited {
    color: black;
    text-decoration: none;
}

.left-column,
.main-content,
.right-column {
    box-sizing:border-box;
}

/* ============== COLUMN BACKGROUNDS ============== */

.side-column,
.main-content {
    background-color: rgba(240, 240, 240, 0.60);
    padding: 10px;
    overflow: auto;
}


/* ============== SECTION HEADERS ============== */

.box-header {
    background-color: rgba(180, 180, 180, 0.80);
    color: #000;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}


/* ============== SECTION CONTENT ============== */

.box-content {
    padding: 10px;
    background: none;
}

.side-column > div,
.main-content > div {
    margin-bottom: 10px;
}


/* ============== Current Song ============== */

.image-text {
    display: flex;
    align-items: center;
    gap: 15px;
}

.image-text img {
    width: 150px;
    height: auto;
    display: block;
}

.image-text-content {
    flex: 1;
}
/* ============== LEFT COLUMN DIVIDERS ============== */

.left-column {
    border-right:
        var(--divider-size)
        solid
        rgba(180, 180, 180, 0.8);
}

.left-column .box-content {
    border-bottom:
        var(--divider-size)
        solid
        rgba(180, 180, 180, 0.8);
}

.left-column .box-content:last-child {
    border-bottom: none;
}


/* ============== SOLO IMAGES ============== */

.box-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============== IMAGE GALLERY ============== */

.image-gallery {
    columns: 3;
    column-gap: 10px;
}

.image-gallery a {
    display: block;
    margin-bottom: 10px;
}

.image-gallery img {
    width: 100%;
    height: auto;
}

.image-gallery img:hover {
    opacity:0.8;
}

.image-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
}

/* ============== IMAGE LIGHTBOX ============== */

.image-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.75);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1000;

    padding: 20px;

    overflow: auto;

    cursor: pointer;
}

.image-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: 100%;

    justify-content: center;

    cursor: default;
}

.image-overlay-img {
    display: block;

    width: auto;
    height: auto;

    max-width: 90vw;
    max-height: 80vh;

    object-fit: contain;

    margin: 0 auto 15px;
}

.image-overlay-caption {
    color: white;

    font-family:
        'Courier New',
        Courier,
        monospace;

    font-size: 18px;
    font-weight: bold;

    text-align: center;

    max-width: 90vw;

    padding-bottom: 10px;
}

/* ============== Books ============== */
.book-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.book-gallery a {
    display: block;
}

.book-gallery img {
    height: 150px;       /* Change this to control image height */
    width: auto;         /* Maintains the image's aspect ratio */
    display: block;
}

/* ============== BOOK LIGHTBOX ============== */

.book-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    cursor: pointer;
}

.book-overlay-content {
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    cursor: default;
}

.book-overlay-image {
    max-width: 80vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 15px;
}

.book-overlay-title {
    color: white;
    font-family:
        'Courier New',
        Courier,
        monospace;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.book-overlay-link {
    color: #ffcc00;
    font-family:
        'Courier New',
        Courier,
        monospace;
    font-size: 16px;
    text-decoration: underline;
}

.book-overlay-link:hover {
    color: white;
}

/* ============== Sidebar Button Links ============== */

.button-links {
    padding: 0;
    text-align: center;
}

.button-links a {
    color: black;
    text-align: center;
    display: block;

    padding: 0.15em;
    margin: 0;

    text-decoration: none;

    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: bold;

    transition: ease-in 0.1s, ease-out 0.1s;
}

.button-links a:visited {
    color: black;
    text-decoration: none;
}

.button-links a:hover {
    color: black;
    background: #e7aa61;
    text-decoration: none;

    transition: ease-in 0.1s, ease-out 0.1s;
}

/* ============== HOVER TEXT ============== */
.image-overlay img {
    max-width:90%;
    max-height:90%;
}

.hover-header {
    position: relative;
}

.hover-header::after {
    content: "For those of you that still know how to use one of these";
    font-size: 10px;
    display: none;
}

.hover-header:hover::after {
    display: block;
}
/* ============== MARQUEE ============== */

.marquee-wrapper {
    width: var(--content-width);
    margin: 0 auto;
}

marquee {
    display: block;
    background: ;
    padding-top: 10px;
}


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

footer {
    text-align: center;
    margin: 20px auto;
}

footer a {
    color: #ffcc00;
    text-decoration: underline;
}



/* ============== Guestbook ============== */
.guestbook-frame {
    width: 100%;
    max-width: 500px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
}

.guestbook-frame iframe {
    width: 100%;
    height: calc(100% + 60px);
    border: none;
    display: block;
    transform: translateY(-120px);
}


/* ============== STAR BACKGROUND ============== */

.stars,
.twinkling {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background-attachment: fixed;
    background-size: cover;
}

.stars {
    background:
        #000
        url('../media/bg/stars.png')
        repeat
        top
        center;

    z-index: -2;
}

.twinkling {
    background:
        transparent
        url('../media/bg/twinkling.png')
        repeat
        top
        center;

    z-index: -1;

    animation:
        move-twink-back
        200s
        linear
        infinite;
}

@keyframes move-twink-back {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -10000px 5000px;
    }
}