@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Serif+JP:wght@400;700&display=swap');

body {
    font-family: "Noto Serif JP", "MS PMincho", "ＭＳ Ｐ明朝", serif;
    background-color: #F5FBF6; /* Light background from Material palette */
    color: #171D1A; /* Dark text from Material palette */
    margin: 0;
    padding: 0;
    text-align: center;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8HCTAAAAAXNSR0IArs4c6QAAABJJREFUGFdjYGBgYGBgYGBgYAAABAADcQCEAAAAAElFTkSuQmCC'); /* Simple tiled pattern */
}

.container {
    width: 80%;
    margin: 20px auto;
    border: 2px solid #707974; /* Outline color from Material palette */
    background-color: #EFF5F0; /* surfaceContainerLow from Material palette */
    padding: 15px;
    box-shadow: 5px 5px 0px #404944; /* onSurfaceVariant for shadow */
}

.header {
    background-color: #196B52; /* Primary color from Material palette */
    padding: 10px;
    border-bottom: 2px solid #707974;
    margin-bottom: 15px;
}

.header h1 {
    color: #FFFFFF; /* onPrimary color */
    font-family: "Mochiy Pop One", cursive, sans-serif;
    font-size: 2.5em;
    text-shadow: 3px 3px 0px #00513C; /* Darker primary for shadow */
    margin: 0;
}

.header p {
    font-size: 0.9em;
    color: #FFFFFF; /* onPrimary color for better visibility */
}

#hit-counter {
    display: inline-block; /* To contain the individual digit spans */
}

.hit-digit {
    display: inline-block;
    width: 0.8em; /* Adjust as needed for digit spacing */
    text-align: center;
    font-weight: bold;
    color: #BA1A1A; /* error from Material palette */
    border: 1px solid #707974; /* outline from Material palette */
    background-color: #FFFFFF; /* surfaceContainerLowest from Material palette */
    margin: 0 1px; /* Small margin between digits */
    padding: 1px 0;
}

.navigation {
    background-color: #4C6359; /* Secondary color from Material palette */
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #707974;
}

.navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navigation li {
    margin: 0 15px;
}

.navigation a {
    color: #FFFFFF; /* onSecondary color */
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px outset #707974; /* Outline color for border */
    background-color: #4C6359; /* Secondary color */
}

.navigation a:hover {
    background-color: #CEE9DB; /* secondaryContainer on hover */
    color: #354C42; /* onSecondaryContainer on hover */
    border: 1px inset #707974;
}

.content {
    text-align: left;
    padding: 10px;
    background-color: #EFF5F0; /* surfaceContainerLow from Material palette */
    border: 1px solid #707974;
    margin-bottom: 15px;
}

.content h2 {
    color: #196B52; /* Primary color for headings */
    font-family: "Impact", sans-serif;
    font-size: 2em;
    border-bottom: 1px dashed #707974;
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.content p,
.content ul {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 10px;
}

.content ul {
    list-style-type: square;
    margin-left: 20px;
}

a {
    color: #196B52; /* Primary color for links */
    text-decoration: underline;
}

a:hover {
    color: #00513C; /* onPrimaryContainer on hover */
}

.work-item {
    border: 1px solid #707974;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #E9EFEA; /* surfaceContainer from Material palette */
}

.work-item h3 {
    color: #196B52; /* Primary color for project titles */
    margin-top: 0;
}

.bbs-new-post-form {
    border: 1px solid #707974;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #E9EFEA; /* surfaceContainer from Material palette */
    box-shadow: 3px 3px 0px #404944;
}

.bbs-new-post-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.bbs-new-post-form input[type="text"],
.bbs-new-post-form textarea {
    width: calc(100% - 20px); /* Adjust for padding */
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #707974;
    background-color: #DBE5DE; /* surfaceVariant for input fields */
    color: #404944; /* onSurfaceVariant for input text */
}

.bbs-new-post-form button {
    background-color: #196B52; /* Primary color for button */
    color: #FFFFFF; /* onPrimary color */
    padding: 10px 20px;
    border: 1px outset #707974;
    cursor: pointer;
    font-weight: bold;
}

.bbs-new-post-form button:hover {
    background-color: #A6F2D2; /* primaryContainer on hover */
    color: #00513C; /* onPrimaryContainer on hover */
    border: 1px inset #707974;
}

.bbs-post {
    border: 1px solid #707974;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #E9EFEA;
}

.bbs-post p {
    margin: 5px 0;
}

.bbs-post strong {
    color: #196B52;
}

.main-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.left-column {
    flex: 2;
    margin-right: 15px;
    text-align: left;
    padding: 10px;
    background-color: #EFF5F0; /* surfaceContainerLow from Material palette */
    border: 1px solid #707974;
}

.right-column {
    flex: 1;
    text-align: left;
    padding: 10px;
    background-color: #EFF5F0; /* surfaceContainerLow from Material palette */
    border: 1px solid #707974;
}

.footer {
    background-color: #196B52; /* Primary color for footer */
    padding: 10px;
    border-top: 2px solid #707974;
    font-size: 0.8em;
    color: #FFFFFF; /* onPrimary color for better visibility */
    margin-top: 20px;
}

.footer a {
    color: #FFFFFF; /* onPrimary color */
    text-decoration: underline;
}

.footer img {
    vertical-align: middle;
    margin-left: 5px;
}

/* GIF styles */
img[alt="Under Construction"],
img[alt="Best Viewed With Netscape"],
img[alt="Powered By"],
img[alt="Email Me"],
img[alt="Hit Counter"] {
    border: none;
    margin: 5px;
}

@media (max-width: 768px) {
    .container {
        width: 95%;
        margin: 10px auto;
        padding: 10px;
    }

    .navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .navigation li {
        margin: 5px;
    }

    .main-content {
        flex-direction: column;
    }

    .left-column,
    .right-column {
        flex: none;
        width: auto;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .right-column {
        order: -1; /* 自己紹介とスキルを上部に表示 */
    }
}