html, body {
    height: 100%;
    padding: 0;
    margin: 0;
	overflow: auto;
}

img {
    width: 100%;
    object-fit: contain;
}

table, th, td, .picture-grid, .picture-grid > div {
    border: 1px solid;
    text-align: left;
    vertical-align: top;
}

footer {
    margin-top: 1rem;
}

code {
    display: inline-block;
    background: rgba(0,0,0,.1);
    white-space: pre;
    font-family: monospace;
    overflow: auto;
    max-width: calc(100vw - 9.5rem);
}

.comment {
    margin: 1rem 0;
    white-space: pre-line;
}

.activity {
    background-color: lightblue;
}

.major-project {
    background-color: lightyellow;
}

#visit-numbers {
    font-size: 0;
    margin-bottom: 1rem;
}

.visit-number {
    display: inline-block;
    width: 2rem;
}

#email {
    overflow-wrap: anywhere;
}

#content {
	word-wrap: break-word; /* Break long words */
	word-break: break-word; /* Ensure long words break */
	overflow-wrap: break-word;
}

#post-comment {
    margin-left: 2rem;
}

#post-comment th, #post-comment td, #post-comment table {
    border: none;
}

#post-comment input, #post-comment textarea {
    width: 20rem;
}

#post-content {
    margin-left: 2rem;
    width: 50%;
}

#body {
    width: 100%;
    height: 100%;
}

#top {
    height: 3rem;
}

#logo {
    font-size: 2rem;
}

#page-list {
    width: 12rem;
}

.post-card {
    width: 25rem;
}

.holiday-christmas span:nth-of-type(even) {
	color: red;
}
.holiday-christmas span:nth-of-type(odd) {
	color: green;
}

.holiday-halloween span:nth-of-type(even) {
	color: darkorange;
}
.holiday-halloween span:nth-of-type(odd) {
	color: green;
}

.holiday-newyears span:nth-of-type(even) {
	color: #FF664B;
}
.holiday-newyears span:nth-of-type(odd) {
	color: gold;
}

.holiday-valentines span:nth-of-type(even) {
	color: pink;
}
.holiday-valentines span:nth-of-type(odd) {
	color: crimson;
}

.holiday-fourth span:nth-of-type(even) {
	color: red;
}
.holiday-fourth span:nth-of-type(odd) {
	color: blue;
}

.picture-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2px;
	padding: 2px;
}

.picture-grid > div {
	padding: 1px
}

#page-list-and-content {
	display: flex;
flex-direction: row;
	gap: 2px;
}
#content {
	order: 2;
	width: 100%;
}
#page-list {
	order: 1;
}

@media screen and (max-width: 36rem) {
	.picture-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 36rem) {
    .post-card {
        width: 100%;
    }

	#page-list-and-content {
		flex-direction: column;
  }
	#content {
		order: 1;
	}
    #page-list {
        width: 100%;
		order: 2;
    }
}

@media screen and (max-width: 55rem) {
    #post-content {
        margin-left: 0;
        width: 100%
    }

    #post-comment input, #post-comment textarea {
        width: 90%;
    }
}