/* set base colours */
:root { --color_main: #27D996; --color_contrast: #04160F; --color_highlight: #00e0bb; --color_highlight2: #185c38;}

/* fonts */
@font-face  { font-family: andalemo; src: url(andalemo.ttf); font-weight: normal; font-style: normal; }
@font-face { font-family:wakuwaku; src: url(mini-wakuwaku-maru.otf); font-weight: normal; font-style: normal; }

/* pages share these styles */
body { font-size: 18px; background-image: url("../../siteimages/Brown1.png"); color: var(--color_contrast); font-family: andalemo, monospace; font-smooth: antialiased; -webkit-font-smoothing: antialiased; }
div#container { max-width: 98%; vertical-align: middle; margin: 2%;}
div.title { font-size: 1em; text-align: center; color: var(--color_contrast); background-color: var(--color_highlight);}
div.title span { display: inline-block; vertical-align: middle;}
div#navmenu { position: sticky; top: 0; display: flex; text-align: center; background: var(--color_highlight); overflow-x:auto; margin-bottom: 1em; padding: 0.5em; filter: drop-shadow(2.5px 10px 10px #333);}
div.navmenu-item 
{
	text-align:center;
	cursor: pointer;
}
div.navmenu-item a { color: var( --color_contrast); background-color: var(--color_highlight); }
div.navmenu-item a:hover { background-color: var(--color_main); }
div.navmenu-item a:visited { color: var( --color_contrast); }
div.navmenu-item::first-letter { background-color: var(--color_main); }

span.decoration { color: var(--color_highlight);}

.image-container img { width: 100%; height: 100%; object-fit: scale-down;}

.image-container-post img { width: 97.5%; height: 100%; object-fit: scale-down;}

div#content { background-color: var(--color_main); color: var(--color_contrast); }

/* pages */
div.page_content
{
	display: block;
//	border: 0.3em solid var(--color_highlight);
	padding: 0.5em;
	margin: 1em;
	overflow-x: hidden;
	overflow-y: auto;
	img margin-right: 1em;
}

/* container */
.responsive-two-column-grid {
    display:block;
}

/* columns */
.responsive-two-column-grid > * {
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:960px) {
    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


.home_left
{
	align: left;
	color: var(-color-contrast);
	display: block;
	width: 97.5%;
	object-fit: scale-down;
	padding: 0.5em;
	margin: 0.5 em;
	overflow-x: hidden;
	overflow-y: auto;

}

.home_right_box
{
	align: right;
	display: block;
	width: 97.5%;
	object-fit: scale-down;
	padding: 0.5em;
	margin: 0.5em;
	overflow-x: auto;
	overflow-y: auto;
	img margin-right: 1em;
}

.home_right_contents
{
	display: block;
//	border: 0.3em solid var(--color_highlight);
	padding: 0.5em;
	margin: 1em;
	overflow-x: hidden;
	overflow-y: auto;
	img margin-right: 1em;
}

div.subtitle { font-size:4em; font-family: wakuwaku; font-smooth: antialiased; -webkit-font-smoothing: antialiased; }
div.subtitle2 { font-size: 2em; font-family: wakuwaku; font-smooth: antialiased; -webkit-font-smoothing: antialiased; }

div.page {
	display: block;
	padding: 0.5em;
	border: 0.3em solid var(--color_highlight);
	margin-top: 1em;
}
div#page_menu { text-align:right; }
div.page_title { font-weight: bold; padding-left: 1.5em;}
div.page_body { padding: 0.5em; }

/* page headers */
div.page_header { padding: 0.5em; }
div.page_date { color: var(--color_highlight); }
div.page_time { color: var(--color_highlight);}
div.page_author { color: var(--color_highlight);}

/* links */
a:link {color: var( --color_main); text-decoration: none; }
div.page, div#content a { color: var(--color_contrast); text-decoration: underline; } 
div.page, div#content a:visited { color: var(--color_highlight2);} 
div.page, div#content a:hover{ color: var(--color_highlight2); }
div.page h1, h2, h3, h4, h5, h6 { color: var(--color_highlight); }
div#content div.title span a, div#content div.title span a:visited { color: var( --color_main);}
div#content div.title span a:hover, div#content div.title span a:hover {color: var(--color_highlight2);}
a:hover { color: var(--color_highlight2); }
div.page a:hover, div.page_content a:hover { color: var(--color_highlight2);}

/* errors */
div.error { text-align: center; background-color:var(--color_highlight); color: var( --color_main);}

/* footer */
div.footer { font-size: small; text-align: right; color: var(--color_contrast);}
div.footer a { color: var(--color_contrast);}

/* code */
code { color:var(--color_highlight);}

/* pre */
pre { white-space:pre-wrap; }

/* input */
textarea { width: 100%; min-height: 15em; }

/* buttons */
span.edit_button { text-align: right; color: var( --color_main); background-color: var(--color_contrast); }
span.edit_button a:visited { color: var( --color_main);}
span.edit_button a:hover { background-color: var(--color_highlight);}
button, span.button
{
  /* restyle form buttons to look like text */
  align-items: normal;
  border: none;
  box-sizing: content-box;
  color: var( --color_main); 
  background-color: var(--color_contrast);
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  appearance: none;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
span.button a:visited { color: var( --color_main); }
span.button a:hover { color: var(--color_highlight); }
button:hover { background-color: var(--color_highlight);}