@media (pointer: coarse) {
/* ^ Mobile Media Query */

html, body {
	min-width: 307px;
}

/* Header ==================================================================================================== */
/* =========================================================================================================== */

header {
	height: 49px;
	width: calc(100vw - 24px);
	padding-left: 16px;
	padding-right: 8px;
}

.logos > div:first-of-type {
	height: 24px;
	margin: 0 13px 0 11px;
}

.logos a:nth-of-type(3) {
	display: none;
}

.logos a:nth-of-type(2) img:first-of-type {
	display: none;
}

.logos a:nth-of-type(2) img:nth-of-type(2) {
	display: unset;
}

.icons {
	width: unset;
	gap: 8px;
}

.icons > :first-child > img, .icons > :nth-child(2) > img,
.icons > :nth-child(3) > img {
	display: none;
}

.icons > :first-child span, .icons > :nth-child(2) span,
.icons > :nth-child(3) span {
	display: contents;
}

.icons, .logos {
	height: 49px;
	background-color: #ffffff;
    border-bottom: 1px solid #e2e2e2;
}

/* Main ====================================================================================================== */
/* =========================================================================================================== */

main {
	width: 100vw;
	min-width: 307px;
}

/* Banner ==================================================================================================== */
/* =========================================================================================================== */

.banner {
	height: 155px;
	background-color: #efefef;
}

.banner a {
	display: none;
}

.banner > img {
	display: unset;
	height: auto;
	max-height: 155px;
	object-fit: contain;
}

/* Blog Header =============================================================================================== */
/* =========================================================================================================== */

.blog-header {
	display: none;
}

/* Blog Body ================================================================================================= */
/* =========================================================================================================== */

.blog-body {
	justify-content: flex-start;
}

/* Blog Profile ============================================================================================== */
/* =========================================================================================================== */

.blog-body .wrapper:has(.profile) {
	width: unset;
	flex-direction: column;
	padding: 0;
	border-bottom: 8px solid #efefef;
}

.profile {
	display: flex;
    align-items: center;
	width: calc(100% - 32px);
	padding: 16px;
	padding-bottom: 0;
}

.profile *:not(.image):not(.image a):not(.image a img):not(.profile > *:last-child):not(.profile > *:last-child) {
	display: none;
}

.profile a, .profile img {
	width: 36px;
	height: 36px;
}

.profile > *:last-child {
	display: inline;
	width: unset;
	height: unset;
}

.image {
	margin: 0;
	display: inline-flex;
}

/* Blog Main ================================================================================================= */
/* =========================================================================================================== */

.main {
	align-items: flex-start;
	width: 100%;
	padding: 0;
}

.article {
	min-width: 307px;
}

.article-head,
.text-content, .interactions {
	width: calc(100% - 32px);
	padding: 0 16px;
}

.article-head {
	padding-top: 24px;
}

.article-head hr {
	display: none;
}

.article-body {
	margin-bottom: 70px;
	line-height: 1.7;
}

.nav-buttons {
	display: none;
}

.mobile-nav {
	display: flex;
}

.article {
	width: unset;
}

.image-container {
	max-width: unset;
	-webkit-tap-highlight-color: transparent;
}

.image-container > :first-child {
	display: none;
}

.image-container img {
	width: 100vw;
	min-width: 307px;
	max-width: unset;
}

.interactions {
	justify-content: flex-start;
}

.likes, .reblog {
	width: 106px;
}

.likes a:first-of-type > div,
.reblog a:first-of-type > div {
	width: 106px;
	height: 38px;
	border-radius: 20px;
}

.likes > a:first-of-type, .reblog > a:first-of-type {
	width: 106px;
	height: 38px;
    border-radius: 20px;
}

.likes a div span, .reblog a div span {
	display: none;
}

.bubble {
	display: flex;
}

.nav.navBottom {
	display: none;
}

.article > hr {
	display: none;
}

.blog-footer {
	margin: 0;
}

.mobile-footer {
	display: flex;
}

/* Blog Navigation =========================================================================================== */
/* =========================================================================================================== */

.navigation {
	width: calc(100% - 60px);
	margin-top: 50px;
}

.calendar h3 {
	margin-bottom: 8px;
}

.calendar, .articles, .days {
	width: 100%;
}

.year-nav > div:first-of-type {
	width: 75%;
	padding: 8px 0;
}

.calendar .hitbox {
	display: flex;
	position: absolute;
	width: calc(100% - 61px);
	height: 35px;
	min-width: 246px;
}

.days {
	border-right: 1px solid #e3e3e3;
	border-top: 1px solid #e3e3e3;
}

.row div {
	border-left: 1px solid #e3e3e3;
}

.has-link {
	background-color: #f1f1f1;
	cursor: pointer;
}

.has-link span::before {
	all: unset;
}

.has-link span {
	display: none;
}

.articles {
	display: flex;
	flex-direction: column;
}

.articles h3 {
	margin: 8px 0;
	margin-left: 6px;
}

.articles hr, .articles br {
	display: none;
}

.articles span {
	padding: 0 6px;
}

.articles a {
	padding: 8px 6px;
	border: 1px solid #e3e3e3;
}


/* Footer ==================================================================================================== */
/* =========================================================================================================== */

footer {
	width: 100vw;
	min-width: 307px;
}

/* LightBox ================================================================================================== */
/* =========================================================================================================== */

.lightbox {
	height: calc(var(--vh, 1vh) * 100);
	height: 100dvh;
}

.lightbox::before { 
	opacity: 0.8;
}

.lightbox > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: unset;
}

.lightbox > div > img {
	max-width: unset;
	max-height: unset;
	z-index: -1;
	/* filter: brightness(0.2);*/
	transition:
		top 0.4s ease,
		transform 0.4s ease,
		max-width 0.4s ease,
		max-height 0.4s ease,
		/* filter  0.4s ease, */
		z-index 0.4s ease,
		
		width 0.4s ease,
		height 0.4s ease;
}

.lightbox div div:first-child {
	all: unset;
	display: flex;
	padding: 11px 15px;
	width: calc(100% - 30px);
	height: 32px;
	background-color: rgba(0, 0, 0, 0.51);
	z-index: 2;
}

.lightbox div div:has(img) img {
	width: 24px;
	height: 24px;
	padding: 1px;
	padding-bottom: 5px;
}

.lightbox div > div:last-child {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: calc(100% - 18px);
	height: 36px;
	padding: 12px 9px;
	background-color: rgba(0, 0, 0, 0.51);
	z-index: 2;
}

.lightbox div > div:last-child img {
	padding: 7px;
	padding-top: 3px;
}

/* Unique styles for the Media/Media container */
/* =========================================== */

.center {
	display: flex;
	left: 50%;
	transform: translateX(-50%);
	justify-content: center;
	width: 100vw;
}

.left {
	width: 100vw;
	margin-left: 16px;
}

.center > img, .left > img {
	width: 220px;
	min-width: unset;
}

/* v Mobile Media Query */
};