/* =========================================================
   KRUMPLI'S WEB SITE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background-color: #171219;

    background-image:
        linear-gradient(
            rgba(15, 10, 17, 0.45),
            rgba(15, 10, 17, 0.45)
        ),
        url("images/carpet.jpg");

    background-repeat: repeat;
    background-attachment: fixed;

    color: #d8d3d5;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   MAIN WEBSITE
   ========================================================= */

.site {
    width: 1000px;
    max-width: 94%;

    margin: 28px auto;

    background:
        linear-gradient(
            135deg,
            #332d38,
            #201d26
        );

    border: 1px solid #918b92;
    border-radius: 4px;

    box-shadow:
        0 0 0 3px rgba(10, 8, 12, 0.75),
        0 10px 35px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


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

.header {
    min-height: 108px;

    display: flex;
    align-items: center;

    position: relative;

    padding: 20px 24px;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #442335,
            #302432 42%,
            #201e2b 100%
        );

    border-bottom: 1px solid #89828b;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -25px 45px rgba(0,0,0,0.25);
}

.header::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(220, 200, 220, 0.65),
            transparent
        );
}

.header-symbol {
    width: 56px;
    height: 56px;

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

    margin-right: 18px;

    border-radius: 50%;

    color: #302631;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f1dfaa,
            #c8a96b 55%,
            #806735
        );

    border: 1px solid #ead9ad;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(255,255,255,0.7);

    font-size: 22px;
}

.header-title {
    position: relative;
    z-index: 2;
}

.header-title h1 {
    margin: 0;

    color: #eee9e5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 36px;

    line-height: 1;

    letter-spacing: 5px;

    text-shadow:
        0 1px 0 #ffffff,
        0 2px 5px #000000;
}

.header-title p {
    margin: 5px 0 0 2px;

    color: #c8a96b;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 3px;
}

.header-decoration {
    margin-left: auto;

    position: relative;
    z-index: 2;

    color: #aaa3ab;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.layout {
    display: grid;

    grid-template-columns: 165px 1fr;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    padding: 14px 10px;

    background:
        linear-gradient(
            to bottom,
            #302c34,
            #211f27
        );

    border-right: 1px solid #7d7780;
}

.nav-title {
    margin: 3px 8px 10px;

    padding-bottom: 8px;

    color: #c8a96b;

    border-bottom: 1px solid #625d64;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 2px;
}

nav a {
    display: flex;
    align-items: center;

    min-height: 47px;

    margin-bottom: 3px;
    padding: 8px;

    color: #ded8da;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.08),
            rgba(0,0,0,0.18)
        );

    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(0,0,0,0.55);

    text-decoration: none;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    transition:
        background 0.15s ease,
        padding-left 0.15s ease,
        color 0.15s ease;
}

nav a span {
    width: 30px;

    color: #918895;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;
}

nav a:hover {
    padding-left: 12px;

    color: #f4ece9;

    background:
        linear-gradient(
            to right,
            #612b40,
            #382636
        );

    border-left: 3px solid #c8a96b;

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.08),
        0 0 8px rgba(150,60,100,0.20);
}

.sidebar-info {
    margin: 20px 8px 0;

    padding-top: 12px;

    border-top: 1px solid #5c5760;

    color: #7f7882;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 1px;
}


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

.content {
    min-width: 0;

    padding: 12px;
}


/* =========================================================
   WELCOME
   ========================================================= */

.feature {
    padding: 5px;

    background: #25212d;

    border: 1px solid #8d8495;
}

.feature-image {
    height: 300px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(173,145,91,0.20),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #211d2a,
            #302738 50%,
            #211d2a
        );
}

.feature-image::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0px,
            transparent 35px,
            rgba(255,255,255,0.035) 36px,
            transparent 37px
        );
}

.feature-overlay {
    position: absolute;

    left: 28px;
    bottom: 25px;

    z-index: 3;

    padding: 16px 22px;

    background:
        rgba(25,21,31,0.88);

    border-left: 3px solid #b59a61;

    box-shadow:
        8px 8px 18px rgba(0,0,0,0.35);
}

.feature-small {
    color: #c5aa6a;

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 6px;
}

.feature-title {
    color: #f1edf2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;

    line-height: 1;

    letter-spacing: 2px;
}

.feature-japanese {
    color: #a9a1ad;

    font-size: 10px;

    letter-spacing: 2px;

    margin-top: 5px;
}


/* =========================================================
   UPDATE BAR
   ========================================================= */

.update-bar {
    display: grid;

    grid-template-columns: 20px 90px 130px 1fr;

    align-items: center;

    margin-top: 5px;

    padding: 6px 8px;

    min-height: 27px;

    color: #aaa4aa;

    background:
        linear-gradient(
            to bottom,
            #3c3740,
            #25222a
        );

    border: 1px solid #77717a;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;
}

.update-bar strong {
    color: #c8a96b;
}

.update-text {
    text-align: right;

    color: #8f8790;
}


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

.section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 38px;

    background:
        linear-gradient(
            to bottom,
            #615a64,
            #403a44
        );

    border-bottom: 1px solid #89828b;
}

.section-heading h2 {
    flex: 1;

    margin: 0;

    padding: 7px 10px;

    color: #e1dcda;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: normal;

    text-shadow:
        0 1px 2px #000;
}


/* =========================================================
   COLLAPSE BUTTON
   ========================================================= */

.collapse-button {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    margin-right: 5px;

    padding: 0;

    color: #d7c89e;

    background:
        linear-gradient(
            to bottom,
            #4b424d,
            #2d2832
        );

    border: 1px solid #8a808d;

    border-radius: 2px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 19px;

    line-height: 25px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.collapse-button:hover {
    color: #ffffff;

    background:
        linear-gradient(
            to bottom,
            #68334b,
            #3c2638
        );

    border-color: #c8a96b;
}


/* =========================================================
   COLLAPSIBLE INTEREST CONTENT
   ========================================================= */

.collapsible-section {
    overflow: hidden;
}

.section-content {
    max-height: 2000px;

    overflow: hidden;

    opacity: 1;

    transition:
        max-height 0.28s ease,
        opacity 0.2s ease;
}

.collapsible-section.collapsed .section-content {
    max-height: 0 !important;

    opacity: 0;
}


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

.box-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 12px;
}

.panel {
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #39343d,
            #27242d
        );

    border: 1px solid #77717a;

    border-radius: 3px;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.13);
}

.panel-inner {
    min-height: 125px;

    padding: 12px;

    color: #3d3940;

    background:
        linear-gradient(
            to bottom,
            #e0dddd,
            #c9c6c8
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65);
}

.panel-inner p {
    margin: 0 0 10px;
}

.panel-inner strong {
    color: #403742;
}

.muted {
    color: #827982 !important;

    font-size: 10px;
}


/* =========================================================
   INTERESTS
   ========================================================= */

.interest-panel {
    margin-top: 12px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #39343d,
            #27242d
        );

    border: 1px solid #77717a;

    border-radius: 3px;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.35);
}

.interest-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    padding: 9px;
}

.interest {
    display: grid;

    grid-template-columns: 25px 1fr;

    gap: 5px;

    min-height: 78px;

    padding: 11px;

    color: #d5d0d3;

    background:
        linear-gradient(
            135deg,
            #302b35,
            #24212a
        );

    border: 1px solid #6e6871;

    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.interest:hover {
    color: #eee8e5;

    background:
        linear-gradient(
            135deg,
            #3b3040,
            #28232e
        );

    border-color: #9c8b72;
}

.interest-number {
    color: #c8a96b;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;
}

.interest h3 {
    margin: 0;

    color: #eee8e5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: normal;
}

.interest p {
    margin: 5px 0 0;

    color: #aaa3ab;

    font-size: 10px;
}


/* =========================================================
   INDIVIDUAL INTEREST SECTIONS
   ========================================================= */

.wide-panel {
    margin-top: 12px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #39343d,
            #27242d
        );

    border: 1px solid #77717a;

    border-radius: 3px;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.35);
}

.section-content > p {
    margin: 0;

    padding: 12px;

    color: #c9c3c7;
}

.wide-panel a {
    display: inline-block;

    margin: 0 12px 13px;

    color: #c8a96b;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    text-decoration: none;
}

.wide-panel a:hover {
    color: #ead7a9;

    text-decoration: underline;
}


/* =========================================================
   MOTORCYCLE GALLERY
   ========================================================= */

.motorcycle-gallery {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin: 4px 12px 16px;
}

.motorcycle-photo {
    min-width: 0;

    padding: 7px;

    background:
        linear-gradient(
            to bottom,
            #302b34,
            #211e26
        );

    border: 1px solid #716b74;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.motorcycle-photo img {
    display: block;

    width: 100%;
    height: 230px;

    object-fit: cover;

    border: 1px solid #57515a;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.motorcycle-photo img:hover {
    filter: brightness(1.08);

    transform: scale(1.01);
}

.motorcycle-photo p {
    margin: 8px 3px 3px;

    padding: 0;

    color: #aaa3ab;

    font-size: 10px;

    line-height: 1.5;
}


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

.image-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 35px;

    background:
        rgba(8, 6, 10, 0.90);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.image-lightbox.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

.image-lightbox img {
    display: block;

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

    width: auto;
    height: auto;

    object-fit: contain;

    border: 1px solid #a99ca9;

    box-shadow:
        0 0 0 5px rgba(20,15,23,0.8),
        0 15px 50px rgba(0,0,0,0.8);
}

.lightbox-close {
    position: absolute;

    top: 18px;
    right: 24px;

    width: 42px;
    height: 42px;

    padding: 0;

    color: #ded8dc;

    background:
        rgba(35, 28, 40, 0.9);

    border: 1px solid #857a88;

    font-size: 30px;

    font-family: Arial, Helvetica, sans-serif;

    line-height: 36px;

    cursor: pointer;
}

.lightbox-close:hover {
    color: #ffffff;

    background: #54283d;

    border-color: #c8a96b;
}

body.lightbox-open {
    overflow: hidden;
}


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

footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 14px 18px;

    color: #817a83;

    background:
        linear-gradient(
            to bottom,
            #25222a,
            #18161d
        );

    border-top: 1px solid #706a72;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 1px;
}

.footer-links {
    color: #938b94;
}

.copyright {
    color: #706a74;
}


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

a {
    color: #c8a96b;
}

a:hover {
    color: #ead7a9;
}


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

@media (max-width: 700px) {

    .site {
        width: 96%;
        max-width: 96%;

        margin: 10px auto;
    }

    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: none;

        border-bottom: 1px solid #817b83;
    }

    .box-grid,
    .interest-grid,
    .motorcycle-gallery {
        grid-template-columns: 1fr;
    }

    .header-title h1 {
        font-size: 28px;
    }

    .header-decoration {
        display: none;
    }

    .update-bar {
        grid-template-columns: 20px 90px 1fr;
    }

    .update-text {
        display: none;
    }

    .motorcycle-photo img {
        height: 220px;
    }

    .image-lightbox {
        padding: 20px;
    }

    .image-lightbox img {
        max-width: 94vw;
        max-height: 85vh;
    }

    .lightbox-close {
        top: 10px;
        right: 12px;
    }

    footer {
        flex-direction: column;

        gap: 5px;
    }
}