.Top-Background{
    position: absolute;
        /* z-index: 101; */
        top: -8px;
        left: 50%;
        transform: translate(-50%);
    /* background-image: url("../Assets/Graphics/Pictures/MyPainting/Pattern/snowflake-4-19-2026-unfinished.png"); */
        background-color: white;
        background-repeat: no-repeat;
        background-position: center;
    width: 100%;
    height: 14%;
    /* max-height: 160px; */
}

.center-side{
    position: absolute;
        left: 50%;
        /* left: 0px; */
        /* top: 46%; */
        transform: translate(-50%, 3%);

    height: 2100px;
    width: 85%;
    max-width: 1600px;

    /* 
    Display Test
     */
    outline: 4px solid white;
    box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}

/* --- */
#Center-box{
    background-image: url("../Assets/Graphics/Pictures/Astro/noao-ngc7023.jpg");
    /* background-image: url("../Assets/Graphics/Pictures/Common/masato\ nakagawa\,\ buckminster\ fuller\'s\ dome\,\ demonstration\ of\ plastic\ skin.\ black\ mountain\ college\,\ summer\ 1949\ \(courtesy\ of\ the\ state\ archives\ of\ north\ carolina\).jpg"); */
        background-color: white;
        background-repeat: no-repeat;
        background-position: bottom;
    z-index: 10;
    /* background-color: white; */
    position: relative;
        left: 0px;
        top: 84px;
        height: 300px;
        width: 100%;

    outline: 3px solid white;
    box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}
#update{
    position: absolute;
        right: 12px;
        top: 40px;
    width: 200px;
    height: 150px;
    outline: 1px solid white;
    overflow-y: auto;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: rgb(255, 255, 255) transparent;
}
#update::-webkit-scrollbar { width: 6px;}
#update::-webkit-scrollbar-track { background: transparent;}
#update::-webkit-scrollbar-thumb {background: white; border-radius: 3px; }
#update::-webkit-scrollbar-thumb:hover { background: #ccc;}

/* --- */
#Center-box2{
    background-color: white;
    /* background-image: url("../Assets/Graphics/Pictures/Astro/noao-ngc7023.jpg");
        background-repeat: no-repeat;
        background-position: bottom; */
    z-index: 10;
    /* background-color: white; */
    position: relative;
        left: 0px;
        top: 89px;
        height: 800px;
        width: 100%;

    outline: 3px solid rgb(255, 255, 255);
    box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}
.neighbor-box {
    width: 300px;
    height: 35px;
    overflow: hidden;
    /* background: rgba(0,0,0,0.3); */
        outline: 1px solid black;
        /* scrollbar-color: rgb(20, 0, 69, 0.8) transparent; */
        border: 1px solid white;
    mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
}
.neighbor-box:hover .scroll-track {
    animation-play-state: paused;
}
.scroll-track {
    display: flex;
        align-items: center;   
        gap: 10px;
    width: max-content;
    animation: scroll-left 20s linear infinite;
}
.scroll-track img {
    height: 31px;
    width: auto;
    object-fit: contain;
    image-rendering: pixelated;
}
@keyframes scroll-left {
    from {transform: translateX(0);}
    to {transform: translateX(-50%);}
}

.guestbook-box {
    position: absolute;
        top: 120px;
        left: 10px;
        width: 300px;
        height: 300px;
    overflow: hidden;
    background: #fff;
    /* box-shadow: 0 8px 20px rgba(74, 15, 101, 0.12); */
    outline: 1px solid rgb(33, 5, 47);
    display: flex;
    flex-direction: column;
}
.guestbook-box iframe {
    flex: 1;
    border: none;
}
.guestbook-box a {
    text-align: center;
    padding: 8px;
    font-size: 14px;
    text-decoration: none;
    color: #4e2d5a;
    font-family: "Arbutus Slab", serif;
    background: #f5f5f5;
    transition: 0.2s;
}
.guestbook-box a:hover {
    /* background: #eaeaea; */
    color: #6a0e95;
    text-shadow: 
                1px 0px 1px rgb(106, 12, 98);
}




/* --- */
#Second-Box{
    z-index: 10;
    background-color: white;
    position: relative;
        left: 0px;
        top: 82px;
        height: 300px;
        width: 100%;

    outline: 3px solid white;
    box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}
.calendar-container {
        background: black;
        border: 1px solid #333;
        font-family: 'Arbutus Slab', serif;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .calendar-header {
        color: #eee;
        font-size: 14px;
        text-align: center;
        margin-bottom: 10px;
        border-bottom: 1px solid #222;
        padding-bottom: 5px;
    }
    .calendar-grid {
        display: grid;
        /* grid-template-cols: repeat(7, 1fr); */
        gap: 1px;
        background: #222; /* 网格线颜色 */
    }
    .weekday {
        background: black;
        color: #444;
        font-size: 9px;
        text-align: center;
        padding: 5px 0;
    }
    .day-cell {
        background: black;
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: crosshair;
    }
    .day-number { font-size: 11px; color: #333; }
    .day-has-content { color: #aaa; }
    .day-label {
        font-size: 7px;
        color: #555;
        position: absolute;
        bottom: 2px;
        text-transform: uppercase;
    }
    
    .calendar-tooltip {
        position: absolute;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        background: #0a0a0a;
        border: 1px solid #444;
        color: #ccc;
        padding: 8px;
        font-size: 10px;
        z-index: 999;
        display: none;
        pointer-events: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    }
    .day-cell:hover .calendar-tooltip { display: block; }
    .day-cell:hover { background: #111; }

/* --- */
#Bottom-box{
    z-index: 20;
    position: relative;
        left: 0px;
        top: 120px;
        height: 380px;
        width: 100%;

    outline: 3px solid white;
    box-shadow: 
        1px 1px 9px #ffffff, 
        1px 1px 1px #ffffff, 
        0px 1px 1px #00ccff;
}

/* --- */
#Top-Box-Title{
    z-index: 100;
    background-image: url("../Assets/Graphics/Pictures/Astro/noao-ngc7023.jpg");
    background-repeat: no-repeat;
    position: absolute;
        left: 0px;
        top: 0px;
        height: 80px;
        width: 100%;
    display: flex;
        align-items: center;
        gap: 30px;
        box-sizing: border-box;
        padding: 20px 40px;
        /* justify-content: right; */
        justify-content: center;

    /* 
    Display Test
     */
    /* outline: 3px solid white; */
}
.Top-Box-Title-Link{
    /* font-family: "Orbitron-light", sans-serif; */
    font-family: "Fredericka the Great", serif;
    /* font-family: "Arbutus Slab", serif; */
    /* font-family:'Courier New', Courier, monospace; */
        font-size: 17px;
    text-decoration: none;
        color: #e0f7ff;
        text-shadow: 
            1px 1px 9px #ffffff, 
            1px 1px 1px #ffffff, 
            0px 1px 1px #00ccff;
        letter-spacing: 2px;
}
.Top-Box-Title-Link:hover{
    color: #ffffff;

    text-shadow:
        0 0 8px #00a6ff,
        0 0 16px #00eaff,
        0 0 32px #00ccff,
        0 0 64px #0099ff,
        0 0 100px #0066ff;
}

.drop-down{
    position: relative;
    display: flex;
    align-items: center;
}
.drop-down-list{
    /* background-color: rgb(255, 255, 255, 0.7);  */
    /* background-color: rgba(0, 0, 0, 0.7);  */
    background-image: url("../Assets/Graphics/Pictures/Astro/noao-ngc7023.jpg");
    
    display: none;
        /* border-radius: 1px; */
        /* box-shadow: 0 0 20px lch(32.3% 133.82 306.29); */
    position: absolute;
        width: 150px;
            outline: 2px solid white; 
            box-shadow:
                1px 0px 1px white;
            /* for test */
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
}
.drop-down:hover .drop-down-list{
    display: block;
}
.drop-down-list:hover .drop-down-list{
    display: block;
}
.drop-down-list-link{
    /* font-family: "Orbitron-light", sans-serif; */
    font-family: "Fredericka the Great", serif;
        font-size: 21px;
    position: relative;
        top: 0px;
        bottom: 3px;
    text-decoration: none;
        color: white;
        text-shadow: 1px 1px 6px rgb(255, 255, 255), 1px 1px 1px blue, 0px 1px 1px blue;
}
.drop-down-list-link:hover{
    text-shadow:
        0 0 8px #00a6ff,
        0 0 16px #00eaff,
        0 0 32px #00ccff,
        0 0 64px #0099ff,
        0 0 100px #0066ff;
}