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

body {
    font-family: serif;
    color: #000;
    background: #fff;
    min-width: 620px;
}

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

.sidebar {
    position: absolute;
    top: 400px;
    left: 20px;
    width: 280px;
    font-size: 14px;
    line-height: 1.5;
    font-family: "Arial Black", Gadget, "Helvetica Black", Impact, sans-serif;
}

.sidebar ul {
    list-style: none;
}

.sidebar .shop {
    color: orange;
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 16px;
    text-align: right;
    padding-right: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid orange;
    padding-bottom: 4px;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
}

.sidebar li {
    margin-bottom: 6px;
    font-weight: 800;
    text-shadow: 0.3px 0.3px 0 rgba(0, 0, 0, 0.7);
    position: relative;
    padding-left: 15px;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.sidebar li:hover {
    transform: translateX(10px);
}

.sidebar li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: orange;
    font-weight: bold;
}

.sidebar li.shop {
    padding-left: 0;
}

.sidebar li.shop::before {
    content: none;
}

.sidebar ul li:nth-child(9),
.sidebar ul li:nth-child(10),
.sidebar ul li:nth-child(11) {
    margin-left: 130px;
}

.sidebar ul li:nth-child(9)::before,
.sidebar ul li:nth-child(10)::before,
.sidebar ul li:nth-child(11)::before {
    left: 0;
}

.sidebar .ape {
    position: absolute;
    top: 260px;
    left: 0;
    width: 120px;
    pointer-events: none;
}

.sidebar .disclaimer {
    margin-top: 50px;
    font-size: 13px;
    font-weight: 900;
    color: orange;
    line-height: 1.2;
    position: relative;
    padding-left: 40px;
    text-align: center;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.1);
}

.sidebar .disclaimer p {
    margin-bottom: 4px;
}

.sidebar .disclaimer .mann {
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 40px;
    pointer-events: none;
}

.page-wrapper {
    max-width: 1100px;
    margin: 20px auto;
    position: relative;
}

.main-content {
    position: absolute;
    top: 20px;
    left: 260px;
    width: 800px;
    padding-top: 20px;
}

.dschungel {
    position: absolute;
    top: 0;
    left: 20px;
    width: 250px;
    pointer-events: none;
    z-index: 10;
}

.main-content .logo {
    display: block;
    margin: 0 auto;
    width: 300px;
    filter: grayscale(100%) drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
}

.frame-container {
    position: relative;
    width: 600px;
    margin: 20px auto 0;
}

.frame-container .frame {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: grayscale(100%) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
}

.frame-container .text-container {
    position: absolute;
    top: 50px;
    left: 45px;
    right: 45px;
    bottom: 70px;
    overflow: hidden;
}

.frame-container .text-container .above-horizon-text {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    font-style: italic;
    z-index: 2;
    height: 88px;
}

.frame-container .text-container .above-horizon-text p {
    margin: 0;
    padding: 0;
}

.frame-container .text-container .above-horizon-text #quote-text-p {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 5px;
    overflow-y: auto;
    text-align: center;
    white-space: normal;
    padding: 0 5px;
    line-height: 1.2; /* Added this line */
}

.frame-container .text-container .above-horizon-text #quote-author-p {
    position: absolute;
    bottom: -23px;
    right: 10px;
    left: auto;
    text-align: right;
    font-size: 17px;
    line-height: 1.2;
    font-style: normal;
    color: #555;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frame-container .text-container .above-horizon-text #quote-date-p {
    position: absolute;
    bottom: -45px;
    right: 10px;
    left: auto;
    text-align: right;
    font-size: 15px;
    line-height: 1.2;
    font-style: normal;
    color: #666;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frame-container .text-container .horizon-svg {
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}

.frame-container .text-container .silhouette {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    pointer-events: none;
    filter: brightness(0.5);
    z-index: 1;
}

.frame-container .text-container .plain-text-display {
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    position: absolute;
    top: 170px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-right: 10px;
}

.footer-menu {
    position: relative;
    margin: 20px auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.mobile-footer {
    display: none;
}

.footer-menu ul {
    list-style: none;
    display: inline-flex;
    gap: 40px;
}

.footer-menu li {
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.footer-menu li:hover {
    color: orange;
}

.footer-menu .tapir {
    position: absolute;
    bottom: 0px; /* Moved down by 20px */
    right: 142px; /* Moved right by 3px */
    width: 120px;
    pointer-events: none;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid orange;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 80%;
    text-align: center;
}

.popup-content {
    color: orange;
    font-weight: bold;
    margin-bottom: 15px;
}

.close-popup {
    display: inline-block;
    padding: 5px 15px;
    background-color: orange;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}

.large-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
}

.large-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 3px solid orange;
    border-radius: 10px;
    width: 80%;
    max-width: 800px;
    height: 80%;
    max-height: 600px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.large-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.large-popup-title {
    color: orange;
    font-weight: bold;
    font-size: 24px;
    text-transform: uppercase;
}

.large-popup-close {
    background: orange;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.large-popup-close:hover {
    background-color: #ff8c00;
}

.large-popup-text {
    flex: 1;
    overflow-y: auto;
    color: #333;
    line-height: 1.6;
    font-size: 14px;
    padding-right: 10px;
}

.large-popup-text p {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .page-wrapper {
        margin: 10px auto;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
    }

    .main-content {
        position: static;
        left: auto;
        width: 100%;
        min-width: 600px;
        padding-top: 10px;
        margin: 0 auto;
        order: 1;
    }

    .sidebar {
        display: flex; /* Changed from block */
        flex-direction: column;
        order: 2;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 20px 0;
        padding: 20px 15px;
        background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
        border: 2px solid orange;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-size: 16px;
    }

    .dschungel {
        display: none;
    }

    /* Removed .sidebar .shop and .sidebar .shop:hover rules as their styles are consolidated into .sidebar li.shop */

    .sidebar ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        margin-bottom: 20px;
        order: 2;
    }

    .sidebar li {
        padding: 18px 20px;
        margin-bottom: 0;
        font-weight: 700;
        font-size: 26px;
        background: rgba(255, 165, 0, 0.05);
        border-radius: 8px;
        transition: all 0.2s ease;
        cursor: pointer;
        min-height: 64px;
        display: flex;
        align-items: center;
        line-height: 1.3;
        white-space: normal;
        word-wrap: break-word;
        border: 2px solid orange;
    }
    
    .sidebar li:hover {
        transform: translateX(3px);
        background: rgba(255, 165, 0, 0.15);
        box-shadow: 0 2px 4px rgba(255, 165, 0, 0.2);
    }

    .sidebar li::before {
        content: none;
    }

    .sidebar li.shop {
        grid-column: 1 / -1; /* Keep for layout */
        display: block; /* Revert from flex */
        padding: 0; /* Remove padding */
        margin-bottom: 10px; /* Or 15px, let's use 10px from li.shop original */
        background: orange;  /* Restore background */
        color: white;        /* Restore text color (for a to inherit) */
        border-radius: 25px;
        box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3); /* from .sidebar .shop */
        border: none;
        text-shadow: none; /* from .sidebar .shop */
        transition: all 0.3s ease; /* from .sidebar .shop */
        position: relative;
        /* min-width: 120px; from .sidebar .shop - might not be needed if it's full width */
        /* align-items and justify-content are removed as it's display:block now */
    }

    .sidebar li.shop::before {
        content: none;
    }

    .sidebar li.shop:hover {
        transform: none;
        /* background: none; */ /* Let hover effect from .sidebar .shop:hover apply if desired or define specific here */
        /* box-shadow: none; */
        /* We might want to ensure the hover on li.shop still works as expected.
           The original .sidebar .shop:hover had background: #ff8c00 !important; color: white !important; transform: scale(1.05);
           If li.shop is now the main button, its hover should reflect that.
           Let's assume for now the goal is to restore li.shop styling and then make 'a' transparent.
           The hover on .sidebar .shop might still apply if specific enough.
        */
        /* For now, keeping it simple as per the immediate revert instruction for li.shop background */
        background: #ff8c00; /* Match .sidebar .shop:hover, remove !important if not needed */
        color: white; /* Match .sidebar .shop:hover */
        transform: scale(1.05); /* Match .sidebar .shop:hover */

    }

    .sidebar li.shop a {
        display: block; /* Changed from flex */
        width: 100%;
        padding: 8px 15px; /* This was already correct */
        line-height: 50px; /* Adjusted */
        text-align: center; /* Add this back */
        background: transparent; /* Keep */
        color: inherit; /* Keep */
        text-decoration: none; /* Keep */
        font-weight: bold; /* Keep */
        font-size: 30px;   /* Adjusted */
    }

    .sidebar ul li:nth-child(9),
    .sidebar ul li:nth-child(10),
    .sidebar ul li:nth-child(11) {
        margin-left: 0;
        grid-column: auto;
    }

    .sidebar ul li:last-child {
        grid-column: 1 / -1;
    }

    .sidebar ul li:nth-child(9),
    .sidebar ul li:nth-child(10),
    .sidebar ul li:nth-child(11) {
        font-size: 26px;
    }

    .sidebar ul li:nth-child(9)::before,
    .sidebar ul li:nth-child(10)::before,
    .sidebar ul li:nth-child(11)::before {
        content: none;
    }

    /* .sidebar-bottom rule removed as its functionality is replaced by .sidebar flex properties */

    .sidebar .ape {
        position: absolute;
        width: 80px;
        height: 80px;
        top: 5px;
        left: calc(50% - 275px);
        z-index: 5;
        transform: none;
        display: block; /* Ensure display block is maintained if not implicitly covered */
    }

    .sidebar .disclaimer {
        position: relative;
        margin: 0; /* Adjusted from margin-right: 10px */
        padding: 10px;
        font-size: 20px;
        background: rgba(255, 165, 0, 0.1);
        border-radius: 8px;
        /* flex: 1; removed */
        order: 3; /* Changed from order: 2 */
        text-align: center;
        line-height: 1.3;
    }

    .sidebar .disclaimer p {
        margin-bottom: 2px;
    }

    .sidebar .disclaimer .mann {
        position: absolute;
        bottom: -15px;
        right: 5px;
        width: 55px;
        height: auto;
    }

    /* .page-wrapper and .main-content rules moved higher in the media query for clarity */

    .main-content .logo {
        margin: 20px auto;
        width: 80%;
        max-width: 250px;
    }

    .frame-container {
        margin: 20px auto;
    }

    .footer-menu {
        margin: 30px auto;
    }

    .footer-menu:not(.mobile-footer) {
        display: none;
    }

    .mobile-footer {
        display: block;
        order: 3;
    }

    .popup {
        max-width: 95%;
        padding: 25px;
    }

    .popup-content p {
        font-size: 1.1em;
        line-height: 1.4;
    }

    .large-popup-content {
        width: 90%;
        height: 90%;
        padding: 15px;
    }

    .large-popup-title {
        font-size: 28px;
    }

    .large-popup-text {
        font-size: 22px;
    }

    /* Removed p rule */

    #quote-text-p {
        font-size: 23px;
        line-height: 1.2; /* Added this line */
    }

    #quote-author-p {
        position: absolute; /* Ensure this is set */
        left: auto;       /* Override desktop's left: 10px */
        right: 10px;
        text-align: right;
        font-size: 22px;  /* As per last update */
        /* bottom, max-width, etc., are inherited or already correctly handled */
    }

    #quote-date-p {
        position: absolute; /* Ensure this is set */
        left: auto;       /* Override desktop's left: 10px */
        right: 10px;
        text-align: right;
        font-size: 20px;  /* As per last update */
        /* bottom, max-width, etc., are inherited or already correctly handled */
    }

   /* Removed div rule */

   /* Added rule for .plain-text-display container */
   .frame-container .text-container .plain-text-display {
       font-size: 20px; /* For mobile view, affecting JS calculation and inherited by lines */
   }

   .footer-menu .tapir {
       right: 1px;
   }

    .footer-menu li {
        font-size: 22px;
        padding: 10px 15px;
        margin-bottom: 10px;
    }

    .footer-menu ul {
        gap: 20px;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.plain-text-display a {
    color: blue;
    text-decoration: underline;
}