:root {
	--text-color: #151515;
	--text-sub-color: #999999;

	--link-main:#199dee;
	--link-hover: #f89335;
	--link-visied: #6ba9ce;

	--bg-back: #f4f4f4;
	--bg-header: #f4f4f4;
	--bg-posts: #f4f4f4;
	--bg-menu: #f4f4f4;
	--bg-footer: #f4f4f4;
  }
  html,
  body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
  }
  html {
	scroll-behavior: smooth;
}
.scroll{display: flex;
	position: fixed;
	right: 30px;
	bottom: 30px;
	flex-flow: column;}
	.scroll a {
		padding: 5px;
	  }
  body {
	color: var(--text-color);
	background-color: var(--bg-back);
	font-size: 14px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3em;
  }
  a {
	color:var(--link-main);
	text-decoration: none;
  }
  a:hover {
	text-decoration: underline;
	color:var(--link-hover);
  }
  a:visited {
	color:#0090e6;
  }
  #header h1 {
	margin:30px 0 15px 0;
	font-weight: bold;
  }
  .caption {
	display: block;
	margin: 15px;
  }
  blockquote {
	background: #7f7f7f;
	color: #f4f4f4;
	padding: 20px;
	margin: 5px;
  }
  #base {
	display: grid;
	grid-template-columns:3fr 1fr;
	grid-template-rows: 0fr 1fr 0fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
  }
  #header {
	grid-area: 1 / 1 / 2 / 2;
  }
  #main {
	grid-area: 2 / 1 / 3 / 2;
  }
  #menu {
	grid-area: 1 / 2 / 4 / 3;
  }
  #footer {
	grid-area: 3 / 1 / 4 / 2;
  }
  #base {
	width: 900px;
	margin: auto;
	text-align: center;
	/*! width: 540px; */
  }
  #header {
	width: 100%;
	height: 100%;
	align-self: start;
	background: var(--bg-header);
  }
  #footer {
	font-size: 0.6em;
	margin-bottom: 15px;
	height: 100%;
	background: var(--bg-footer);
  }
  #main {
	text-align: center;
	background: #171d2a;
	width: 720px;
  }
  #menu {
	padding: 30px 15px;
	background: var(--bg-menu);
  }
  #menu div {
	margin-bottom: 30px;
  }
  textarea.tegalogpost {
box-sizing: border-box;
	resize: vertical;
	width: 540px;
  }
  ul {
	list-style: none;
	padding: 0;
	margin: 0;
  }
  ul.cattree  {
	display: flex;
	padding: 0 0 30px;
	margin: 0;
	justify-content: center;
  }
  li {
	margin: 0 5px 0 5px;
  }
  .hashtaglistarea,
  .latestpostarea {
	text-align: left;
  }
  .hashtaglist,
  .latestpostlist,
  .calendarplace {
	font-size:0.8em;
  }
  #postarea{
	padding: 0;
	width: auto;
	margin: auto;
  }
.postform {
  width: 540px;
  margin: auto;
}
  .ex_uploader{text-align: left;}
  .logstatus-fixed:before {
	display: block;
	text-align: center;
	content: url(keep.svg);
	color: var(--text-color);
  }
  .onelogbox {
	text-align: left;
	padding: 30px 60px;
  }
.onelogbox img{
	max-width: 100%;
height: auto;
}
  .onehaad {
	text-align: right;
	color: #bfc0d1a8;
	font-size: 0.8em;
  }
  .oneimage {
	width: 100px;
	height: 100px;
	object-fit: cover;
	margin: 5px 5px 0px 5px;
  }
  span.categoryname {
	display: block;
  }
  .dateseparator,
  .categoryname {
	margin: 0;
	padding: 30px;
  }
  .datetitle,
  .categoryname  {
	font-size: 1.2em;
	font-weight: bold;
  }
  .dateseparator.fixedseparator {
	display: none;
  }
  .datefunclinks {
	display: block;
	font-size: 0.6em;
  }
  .fixedlabel {
	display: none;
  }
  .listheading {
	display: block;
	color: var(--text-sub-color);
	font-size: 0.6em;
  }
  table.calendar {
	margin: auto;
  }
  .links {
	font-size: 0.8em;
  }
  @media (max-width: 900px) {
	#base {
	  display: flex;
	  flex-direction: column;
	  width:auto;
	}
	#header {
	  flex-shrink:1;
	}
	#main {
	  flex-shrink:1;
	  width: auto;
	}
	#menu {
	  flex-shrink:1;
	}
	#footer {
	  flex-shrink:1;
	}
	.onelogbox img{width: 100%;}
	textarea.tegalogpost{

		width: 100%;
}
	#postarea{
        padding: 0 20px;
		width: auto;
		margin: auto;}
	.postform {
		width: auto;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #bfc0d1;
		--text-sub-color: #bfc0d1a8;
	
		--link-main:#0090e6;
		--link-hover: #0090e6a8;
		--link-visied:#0090e6;
	
		--bg-back: #171d2a;
		--bg-header:#171d2a;
		--bg-posts:#171d2a;
		--bg-menu:#171d2a;
		--bg-footer:#171d2a;
	  }
}