body, html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #FFFFF8;
    color: #333333;
    font-family: system-ui, -apple-system, sans-serif;
}

.layout-container {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    position: relative;
}

.fixed-left {
    position: fixed;
    left: calc(50% - 16rem);
    transform: translateY(-50%);
    top: 50%;
    z-index: 2;
    width: 16rem;
}

.title {
    font-size: 2rem;
    margin: 0;
    line-height: 1.1;
    font-family: 'Garamond', serif;
    color: #333333;
}

.subtitle {
    font-size: 2rem;
    margin: 0;
    line-height: 1.1;
    color: #333333;
}

.sun-icon {
    margin-top: 1rem;
    font-size: 2.5rem;
    color: #FFA500;
    display: inline-block;
    animation: rotate 20s linear infinite;
    transform-origin: center;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scrolling-content {
    padding: 8vh 2rem;
    margin-left: calc(50% + 2rem);
    width: 16rem;
    color: #333333;
}

.scroll-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    transition: all 0.2s ease;
    word-break: break-word;
    background: #FFFFFF;
    color: #333333;
}

.scroll-item:hover {
    border-color: #FFD700;
    transform: translateX(-0.5rem);
    background: #FFF7E0;
}

.contact-text {
    font-size: 0.875rem;
    color: #666666;
    margin-top: 0.5rem;
}

.md-content {
    max-width: 36rem;
    margin: 2rem auto;
    padding: 0 2rem;
    line-height: 1.6;
    font-size: 1.1rem;
    color: #333333;
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}

.md-content p {
    margin-bottom: 1.5rem;
}

.md-content a {
    color: #666666;
    text-decoration: none;
    border-bottom: 1px solid #CCCCCC;
}

.md-content a:hover {
    border-bottom-color: #666666;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .fixed-left {
        position: relative;
        left: auto;
        transform: none;
        top: auto;
        width: auto;
        text-align: center;
        padding: 2rem 1rem;
    }

    .scrolling-content {
        margin-left: 0;
        width: auto;
        padding: 2rem 1rem;
    }

    .scroll-item {
        width: auto;
    }

    .sun-icon {
        font-size: 3rem; /* Increase font size for better readability */
        animation: rotate 20s linear infinite; /* Ensure rotation works on mobile */
    }
}

/* Small Mobile Styles */
@media (max-width: 350px) {
    .title, .subtitle {
        font-size: 1.5rem;
    }

    .scrolling-content {
        padding: 1rem;
    }

    .scroll-item {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
}

.scrolling-content a {
    text-decoration: none;
    color: inherit;
    display: block;
}