/* All */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Posts */

.entry-header, .entry-content {
    margin: 0 0 1em 0; }
.entry-footer {
    margin: 0; }
.entry-content p:last-child {
    margin: 0;
}


/*--------------------------------------------------------------
## Navigation
--------------------------------------------------------------*/
/* Main */
.main-navigation {
	display: flex;
	justify-content: center;
	background: rgb(181, 199, 179);
}
.main-navigation ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 20px;
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
	background: rgb(137, 173, 133);
}
.main-navigation ul ul.children {
	display: none;
	flex-direction: column;
	justify-content: right;
	position: absolute;
	z-index: 99;
	background: rgb(181, 199, 179);
}
.main-navigation ul li:hover ul.children,
.main-navigation ul li.focus ul.children {
	display: flex;
}
.main-navigation a {
	display: block;
	text-transform: uppercase;
	text-wrap-mode: nowrap;
	text-decoration: none;
	background: rgb(112, 141, 109);
	padding: 0.5em 1em;
}
.main-navigation a:hover,
.main-navigation li.current_page_item > a,
.main-navigation li.focus > a {
	background: rgb(151, 191, 146);
}
.main-navigation ul ul a::before {
	content: "- ";
}
/* Main Mobile */
@media screen and (max-width: 768px) {
	.menu-toggle {
		display: block;
		font-size: 0;
		padding: 0.5em 1em;
		height: 2rem;
	}
	.menu-toggle:before {
		content: "X";
		font-size: initial;
	}
	.main-navigation {
		flex-direction: column;
	}
	.main-navigation ul {
		display: none;
	}
	.main-navigation.toggled ul {
		display: flex;
		flex-direction: column;
		flex-wrap: none;
		position: absolute;
		z-index: 99;
	}
	.main-navigation.toggled ul ul.children {
		display: flex;
		position: unset;
		z-index: unset;
	}
}
/* Footer */
.footer-navigation {
    display: flex;
    flex-direction: row;
    gap: 0 20px;
}
.footer-navigation div {
    padding: 20px 0;
    width: 50%;
    background: rgb(181, 199, 179);
}
.footer-navigation div ul {
	display: flex;
    flex-direction: column;
    gap: 20px 0;
	list-style: none;
	margin: 0;
	padding-left: 0;
    background: rgb(151, 191, 146);
}
.footer-navigation div ul ul {
    margin-left: 20px;
    padding-top: 20px;
}
.footer-navigation ul li a {
    display: block;
	text-wrap-mode: nowrap;
	text-decoration: none;
	background: rgb(112, 141, 109);
	padding: 0.5em 1em;
}
/* Footer Mobile */
@media only screen and (max-width: 768px) {
    .footer-navigation {
        display: flex;
        flex-direction: column;
        gap: 20px 0;
    }
    .footer-navigation div {
        padding: 20px 0;
        width: 100%;
        background: rgb(181, 199, 179);
    }
}

/*--------------------------------------------------------------
## Layout
--------------------------------------------------------------*/
/* Mobile */
@media only screen and (max-width: 390px) {
    html {
        background-color: rgb(202, 96, 88);}
    header.site-header  {
        padding: 1em;
        background-color: rgb(209, 124, 118);}
    header .header-container {
        padding: 1em;
        background-color: rgb(221, 164, 160);}
    main {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(202, 96, 88);}
    aside {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(209, 124, 118);}
    article.post, article.page, #comments, section.widget, .page-header, .site-info {
        width: 100%;
        margin: 0 auto;
        padding: 1em;
        background-color: rgb(221, 164, 160);}
    .comment-list {
        margin: 0;
    }
    footer.site-footer {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(221, 164, 160);}
    footer .footer-container {
        padding: 1em;
        background-color: rgb(202, 96, 88);}
}
/* Tablet */
@media only screen and (min-width: 391px) and (max-width: 768px) {
    html {
        background-color: rgb(156, 131, 102);}
    header.site-header  {
        padding: 1em;
        background-color: rgb(179, 151, 120);}
    header .header-container {
        padding: 1em;
        background-color: rgb(212, 189, 162);}
    main {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(156, 131, 102);}
    aside {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(179, 151, 120);}
    article.post, article.page, #comments, section.widget, .page-header, .site-info {
        width: 100%;
        margin: 0 auto;
        padding: 1em;
        background-color: rgb(212, 189, 162);}
    .comment-list {
        margin: 0 0 0 1em;
    }
    footer.site-footer {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(212, 189, 162);}
    footer .footer-container {
        padding: 1em;
        background-color: rgb(156, 131, 102);}
}
/* Desktop */
@media only screen and (min-width: 769px) {
    html {
        background-color: rgb(102, 102, 156);}
    header.site-header  {
        padding: 1em;
        background-color: rgb(119, 119, 173);}
    header .header-container {
        max-width: 960px;
        margin: 0 auto;
        padding: 1em;
        background-color: rgb(182, 182, 221);}
    main {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(102, 102, 156);}
    aside {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(119, 119, 173);}
    article.post, article.page, #comments, section.widget, .page-header, .site-info {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        padding: 1em;
        background-color: rgb(182, 182, 221);}
    .comment-list {
        margin: 0 0 1em 2em;
    }
    footer.site-footer {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 1em;
        background-color: rgb(182, 182, 221);}
    footer .footer-container {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        padding: 1em;
        background-color: rgb(102, 102, 156);}
}

#header { 
    background: rgba(128,128,255,1)}