/* Base styles */
        body {
            font-family: "MS UI Gothic", "MS Gothic", "Verdana", "Meiryo UI";
            font-size: 12px;
            background-image: url("../img/bg_tile.gif");
            color: #333;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Main container */
        .container {
            display: flex;
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            min-height: 100vh;
        }

        /* Wrapper for main content and footer */
        .main-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
			min-height: 100vh;
		}

        /* Sidebar navigation */
        .sidebar {
            width: 200px;
            background-image: url("../img/sidebar_bg.png");
			background-size: cover;
            border-right: 1px solid #839dd4;
            border-left: 1px solid #839dd4;
            padding: 10px;
            flex-shrink: 0;
			filter: drop-shadow(3px 0px 5px rgba(131, 157, 212, 0.75));
			position: relative;
            display: flex;
            flex-direction: column;
        }

        /* Site logo/header */
        .site-header {
            width: 100%;
            height: 80px;
            background-image: url("../img/logo.png");
            border: 1px solid #819cd5;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

		/* Last Update Date */
		.last-update {
			color: #4e6796;
			text-align: left;
		}

		/* Horizontal Line */
		hr.def {
			width: 200px;
 			border-top: 1px solid #839dd4;
			border-bottom: 1px solid #fff;
			margin-bottom: 10px;
			margin-top: 12px;
		}

        /* Menu items */
        .menu-item {
			width: 200px;
			background-image: url("../img/nav/top.png");
            border: 1px solid #839dd4;
			font-size: 17px;
            margin-bottom: 5px;
			padding: 17px 0px;
          	cursor: pointer;
            text-align: center;
            transition: background-color 0.2s;
			filter: drop-shadow(2px 2px 2px rgba(131, 157, 212, 1));
        }

		.menu1 {background-image: url("../img/nav/top.png");}
		.menu2 {background-image: url("../img/nav/about.png");}
		.menu3 {background-image: url("../img/nav/alley.png");}
		.menu4 {background-image: url("../img/nav/portfolio.png");}
		.menu5 {background-image: url("../img/nav/sketchbook.png");}

        .menu-item:hover {
            background-color: #fdbada;
        }

		.menu1:hover {background-image: url("../img/nav/top_hover.png");}
		.menu2:hover {background-image: url("../img/nav/about_hover.png");}
		.menu3:hover {background-image: url("../img/nav/alley_hover.png");}
		.menu4:hover {background-image: url("../img/nav/portfolio_hover.png");}
		.menu5:hover {background-image: url("../img/nav/sketchbook_hover.png");}

		/* Decorative line */
		.linebreak {
			font-family:'Verdana';
			text-align: center;
			color:#839dd4;
			margin: -20px 0px 5px 0px;
			inline-size: 735px;
			overflow: hidden
		}

        /* E-Mail */
        .mailto {
            margin-top: 10px;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap; /* Prevent wrapping */
            gap: 2px; /* Use gap instead of padding-right */
        }
		.mailto img {
            flex-shrink: 0; /* Prevent the image from shrinking */
        }
        .mailto a {
            min-width: 0; /* Allow text to shrink */
        }

        /* Chibis */
        .chibis-container {
            margin-top: auto; /* Push to bottom of sidebar */
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            height: 161px;
            position: relative;
        }

        .chibis-container img {
            max-width: 100%;
            height: auto;
            max-height: 161px;
        }

        /* Main content area */
        .main-content {
            flex: 1;
            padding: 20px;
			border-right: 1px solid #839dd4;
            background-color: white;
			display: flex;
            flex-direction: column;
        }

        /* News container */
        .news-container {
            flex: 1;
        }

        /* Header image section */
        .header-image {
            height: 423px;
            background-image: url('../img/banner.gif');
			box-shadow: inset 0px 0px 5px 5px #fff;
            margin-bottom: 20px;
            display: flex;
            background-size: cover; /* Default for desktop */
            background-position: center;
        }

        /* News post container */
        .news-post {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
            border: 1px solid #6a8bca;
            background-color: #eaf4fd;
            margin-bottom: 20px;
            overflow: hidden;
			text-shadow: 1px 1px 0px white;
			filter: drop-shadow(5px 5px 0px rgba(200, 220, 239, 0.7));
        }

        /* Post header */
        .post-header {
            background: linear-gradient(180deg,rgba(251, 254, 254, 1) 5%, rgba(230, 243, 254, 1) 20%, rgba(141, 197, 252, 1) 85%, rgba(135, 184, 245, 1) 100%);
            padding: 8px 15px;
            border-bottom: 1px solid #6a8bca;
			font-family: "Verdana";
			font-weight: bold;
            color: #333;
        }

        /* Post content */
        .post-content {
            padding: 15px;
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }

        /* Post image */
        .post-image {
            width: 90px;
            height: 90px;
            background-color: #e0e0e0;
            border: 1px solid #ccc;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 10px;
        }

        /* Post text */
        .post-text {
            flex: 1;
            line-height: 1.4;
        }

        .post-title {
            font-weight: bold;
            color: #ff6cb0;
            margin-bottom: 5px;
        }

        /* Footer */
        .footer {
            background-color: #8bc2fa;
            border: 1px solid #839dd4;
            padding: 8px 20px;
            text-align: center;
			font-size: 12px;
			font-family: "Meiryo UI";
            color: #fff;
            margin: 20px 0 0 -21px;
			margin-top: auto;
		}

        /* Pagination styles */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin: 20px 0 0 0;
            padding: 10px;
            background-color: #e6f0fc;
            border: 3px double #6a8bca;
            margin-top: auto;
        }

        .pagination button {
            background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%);
            border: 1px solid #839dd4;
            padding: 5px 8px;
            cursor: pointer;
            border-radius: 3px;
            font-family: "MS UI Gothic", "MS Gothic", "Verdana", "Meiryo UI";
            font-size: 12px;
            transition: all 0.2s;
            filter: drop-shadow(1px 1px 1px rgba(131, 157, 212, 0.5));
        }

        .pagination button:hover:not(:disabled) {
            background: linear-gradient(180deg, #fdbada 0%, #ff6cb0 100%);
            color: white;
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination button.active {
            background: linear-gradient(180deg, #ff6cb0 0%, #e55a9f 100%);
            color: white;
            font-weight: bold;
        }

        .page-info {
            font-family: "Verdana";
            font-size: 11px;
            color: #4e6796;
            margin: 0 10px;
        }

        /* Hidden class for posts */
        .hidden {
            display: none;
        }

@media screen and (max-width: 1015px) {
    /* Container becomes vertical stack */
	
	body {
		background-size: 150px;
		overflow-x: hidden;
	}
	
    .container {
        flex-direction: column;
		border-right: 1px solid #839dd4;
		border-left: 1px solid #839dd4;
        max-width: 80%;
    }

    /* Main wrapper adjustments */
    .main-wrapper {
        min-height: auto;
    }

    /* Sidebar becomes horizontal header */
    .sidebar {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 5px;
		border-right: none;
		border-left: none;
        border-bottom: 1px solid #839dd4;
        filter: drop-shadow(0px 3px 5px rgba(131, 157, 212, 0.75));
        position: relative;
        align-items: flex-start;
        gap: 5px;
    }

    /* Site header in top left corner - smaller */
    .site-header {
		display: none;
        width: 15vw;
        height: 6vw;
        margin-bottom: 0;
        flex-shrink: 0;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Navigation container */
    .nav-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    /* Top row with last update and email */
    .top-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 5px;
    }

    .last-update {
		display: none;
    }

    .mailto {
		display: inline-flex;
        margin: 0;
        font-size: 10px;
    }

    .mailto a {
        word-break: break-all;
    }

    /* Navigation buttons in rows */
    .nav-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: flex-start;
    }

    /* Menu items - smaller and inline */
    .menu-item {
		align-content: center;
		flex-wrap: nowrap;
		margin-top: 0px;
        margin-bottom: 5px;
        font-size: 14px;
        background-size: cover;
    }

    /* Hide horizontal rules */
    hr.def {
        display: none;
    }

    /* Banners container */
    .banners-container {
        display: flex;
        gap: 10px;
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .banners-container a {
        flex-shrink: 0;
    }

    .banners-container img {
        width: 120px;
        height: auto;
    }

    /* Hide chibis on mobile or make them smaller */
    .chibis-container {
        display: none; /* or you can make them smaller if you prefer */
    }

    /* Alternatively, if you want to keep chibis but smaller: */
    /*
    .chibis-container {
        margin-top: 0;
        height: 80px;
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    
    .chibis-container img {
        max-height: 80px;
    }
    */

    /* Main content adjustments */
    .main-content {
        padding: 15px;
        border-right: none;
		background-image: url("../img/sidebar_bg_mobile.png");
		background-size: cover;
    }

    /* Header image responsive */
    .header-image {
		height: 43vw;
		width: 70%vw;
        background-size: cover;
        background-position: center;
        margin-bottom: 15px;
		box-shadow: inset 0px 0px 3px 3px #fff;
    }

	/* Decorative line */
	.linebreak {
		font-family:'Verdana';
		font-size: 1.2vw;
		text-align: center;
		color:#839dd4;
		padding-top: 5px;
		margin-left: 1.2vw;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
	}
	
    /* News posts adjustments */
    .news-post {
        margin-bottom: 15px;
		filter: drop-shadow(5px 5px 0px rgba(131, 157, 212, 0.3));
    }

    .post-content {
        flex-direction: row;
		background-color: #f5fafe;
        gap: 10px;
    }

    .post-image {
		width: 10vw;
		height: 10vw;
    }

    .post-text {
        width: 100%;
    }

    /* Footer adjustments */
    .footer {
        margin-left: -1px;
        margin-right: -1px;
    }

    /* Pagination adjustments */
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
        padding: 5px;
		background-color: white;
    }

    .pagination button {
        padding: 5px 8px;
        font-size: 11px;
		margin-left: 2px;
		margin-right: 2px;
    }

    .page-info {
        order: -1; /* Move page info to top */
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
	}
}