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

body {

    background-color: #000000;

    background-image:
        linear-gradient(
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.55)
        ),
        url("../images/backgrounds/nightsky.gif");

    background-repeat:
        repeat,
        repeat;

    background-position:
        top left,
        top left;

    color: white;

    margin: 0;

    padding-top: 280px;

    padding-bottom: 20px;

    font-family: Verdana, sans-serif;

    position: relative;
}


/* =========================
   DECORATION LAYER
========================= */

#decoration-layer {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 1050px;

    height: 400px;

    pointer-events: none;

    z-index: 100;
}

/* =========================
   C00LKIDD
========================= */

#c00lkidd-banner {

    position: absolute;

    width: 480px;

    left: 60px;

    top: 95px;

    z-index: 101;
}

/* =========================
   CAT
========================= */

#banner-cat {

    position: absolute;

    width: 240px;

    right: 70px;

    top: 40px;

    z-index: 101;
}

/* =========================
   MASTER FRAME
========================= */

#site-frame {

position: relative;
z-index: 10;

    width: 1050px;

    margin: auto;

    background-color: rgba(17, 17, 17, 0.95);

    border: 3px solid #555555;

    box-shadow:
        0px 0px 30px rgba(255, 0, 0, 0.15),
        inset 0 0 0 2px #222222,
        inset 0 0 0 4px #880000;

    padding: 10px;
}

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

header {
    margin-bottom: 10px;
}

#title-bar {

    background-color: #880000;

    border: 2px solid #999999;

    padding: 8px;

    font-weight: bold;
}

/* =========================
   BANNER FRAME
========================= */

#banner-frame {

    background-color: #111111;

    border: 4px solid #777777;

    box-shadow:
        inset 0 0 0 2px #222222,
        inset 0 0 0 4px #aa0000;

    padding: 10px;
}

#banner {

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;
}

.banner-line {

    width: 70%;

    height: 2px;

    background-color: #aa0000;

    margin: 10px 0;
}

#site-title {

    font-size: 42px;

    font-weight: bold;

    letter-spacing: 4px;
}

#site-subtitle {

    margin-top: 10px;

    color: #cccccc;

    letter-spacing: 2px;

    font-size: 18px;
}

/* =========================
   NAVIGATION
========================= */

nav {

    margin-top: 10px;

    border: 2px solid #666666;

    background-color: #1a1a1a;

    padding: 10px;

    text-align: center;
}

nav a {

    display: inline-block;

    padding: 6px 15px;

    margin: 0 3px;

    text-decoration: none;

    color: white;

    background-color: #222222;

    border: 2px outset #888888;
}

nav a:hover {

    background-color: #aa0000;
}

/* =========================
   COUNTER
========================= */

#counter-bar {

    margin-top: 10px;

    border: 2px solid #666666;

    background-color: #1a1a1a;

    text-align: center;

    padding: 10px;

    font-weight: bold;

    font-size: 18px;
}

/* =========================
   GRID
========================= */

#main-layout {

    display: grid;

    grid-template-columns: 220px 1fr 220px;

    gap: 10px;

    margin-top: 10px;
}

/* =========================
   PANELS
========================= */

.panel,
footer {

    background-color: #151515;

    border: 2px solid #666666;

    box-shadow:
        inset 0 0 0 1px #333333;
}

.panel-title {

    background-color: #880000;

    border-bottom: 1px solid #444444;

    padding: 8px;

    font-weight: bold;
}

.panel-content {

    padding: 15px;
}

/* =========================
   CONTENT BOXES
========================= */

.content-box {

    background-color: #1b1b1b;

    border: 1px solid #555555;

    margin-bottom: 15px;
}

.content-box-title {

    background-color: #550000;

    padding: 6px;

    font-weight: bold;
}

.content-box-content {

    padding: 10px;
}

.content-box-content img {

    max-width: 100%;

    height: auto;

}

.content-box:hover {

    border-color: #aa0000;
}

/* =========================
   HEIGHTS
========================= */

aside.panel {

    min-height: 550px;
}

main.panel {

    min-height: 550px;
}

footer {

    margin-top: 10px;

    min-height: 180px;
}

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

a {

    color: #ff6666;
}

a:hover {

    color: white;
}
/* =========================
   V3.0 GUESTBOOK
========================= */

.guestbook-area {

    text-align: center;

    margin-bottom: 15px;

}

.guestbook-link {

    display: inline-block;

}

.guestbook-button {

    image-rendering: auto;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;

}

.guestbook-button:hover {

    transform: scale(1.15);

    filter:
        drop-shadow(0 0 8px #ff0000)
        drop-shadow(0 0 16px #ff0000);

}

/* =========================
   V3.0 COMMUNITY GIF
========================= */

.community-gif {

    padding: 8px;

    text-align: center;

}

.community-gif img {

    width: 100%;

    height: auto;

    display: block;

    border: none;

}

/* =========================
   ABOUT PAGE
========================= */

.about-sidebar-scroll {

    max-height: 700px;

    overflow-y: auto;

}

.about-main-scroll {

    max-height: 700px;

    overflow-y: auto;

}

.collectibles {

    text-align: center;

}

.collectibles img {

    max-width: 100%;

    margin-bottom: 6px;

    display: block;

    margin-left: auto;

    margin-right: auto;

}
/* =========================
   ABOUT PAGE ONLY
========================= */

.about-layout {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 10px;

    margin-top: 10px;

}
/* =========================
   READ ME PAGE
========================= */

.readme-layout {

    margin-top: 10px;

}

.readme-row {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

    align-items: stretch;

}

.readme-row .content-box {

    flex: 1;

    margin-bottom: 0;

}

.readme-art {

    width: 280px;

    min-width: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #999999;

    font-weight: bold;

    padding: 15px;

    box-sizing: border-box;
    
}

.readme-art img {

    width: 100%;

    height: auto;

    display: block;

}

.readme-scroll {

    max-height: 900px;

    overflow-y: auto;

    padding-right: 10px;

}
/* =========================
   V0.9 ART PAGE
========================= */

.art-layout {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 10px;

    margin-top: 10px;

}

.art-sidebar {

    background-color: #151515;

    border: 2px solid #666666;

    min-height: 800px;

}

.art-gallery-panel {

    background-color: #151515;

    border: 2px solid #666666;

}

.art-gallery-scroll {

    height: 800px;

    overflow-y: scroll;

    padding: 15px;

}

.art-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

}

.art-card {

    background-color: #1b1b1b;

    border: 2px solid #555555;

    display: block;

    text-decoration: none;

    transition: 0.2s;

}

.art-card:hover {

    border-color: #aa0000;

    transform: scale(1.02);

}

.art-card img {

    width: 100%;

    height: 200px;

    object-fit: contain;

    display: block;

    background-color: #111111;

}

.home-button {

    display: block;

    margin-top: 20px;

    text-align: center;

    padding: 10px;

    background-color: #111111;

    border: 2px solid #880000;

    color: white;

    text-decoration: none;

    font-weight: bold;

}

.home-button:hover {

    background-color: #880000;

}

/* =========================
   ARTWORK PAGE
========================= */

.artwork-layout {

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 10px;

    margin-top: 10px;

}

.artwork-image {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

}

.artwork-image img {

    max-width: 100%;

    max-height: 800px;

    height: auto;

    display: block;

}

.art-nav {

    margin-top: 20px;

}

.art-nav a {

    display: inline-block;

    margin-right: 10px;

}
/* =========================
   GOOBERS
========================= */

#floating-goobers {

    position: fixed;

    bottom: 60px;

    right: 40px;

    width: 200px;

    z-index: 999;

    pointer-events: none;

    animation: goobers-wiggle 4s ease-in-out infinite;

}

/* =========================
   GOOBER WIGGLE
========================= */

@keyframes goobers-wiggle {

    0% {
        transform: rotate(-6deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(3deg) translate(-4px, -8px);
    }

    50% {
        transform: rotate(6deg) translate(0px, 0px);
    }

    75% {
        transform: rotate(-3deg) translate(4px, -8px);
    }

    100% {
        transform: rotate(-6deg) translate(0px, 0px);
    }

}
/* =========================
   HOMEPAGE EXTRAS
========================= */

.homepage-extras {

    display: grid;

grid-template-columns: 1.4fr 1fr;

    gap: 15px;

    margin-bottom: 15px;

}

.extras-box {

    background-color: #1b1b1b;

    border: none;

}

.extras-box iframe {

    display: block;

}

/* =========================
   FEATURED IMAGE
========================= */

.featured-image {

    width: 100%;

    max-height: 480px;

    object-fit: contain;

    display: block;

    margin: auto;

}

/* =========================
   STAMP COLLECTION
========================= */

.stamp-section {

    padding: 10px;

}

.stamp-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding: 12px;

    justify-content: center;

    align-items: center;

}

.stamp-grid img {

    height: 56px;

    width: auto;

    object-fit: contain;

    transition: transform 0.2s ease;

}

.stamp-grid img:hover {

    transform: scale(1.1);

}
/* =========================
   VERSION 1.0 WELCOME BOX
========================= */

.welcome-box {

    background-image:
        linear-gradient(
            rgba(0,0,0,0.60),
            rgba(0,0,0,0.60)
        ),
        url("../images/backgrounds/fire.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}