/* set base colours */
:root {
  --color_main: #093048;        /*border*/
  --color_contrast: #090A0B;    /*background*/
  --color_highlight: #81C4EF;   /*menu text*/
  --color_highlight2: #E42548;  /*don't know*/
  --color_text: #FFF1E8;        /*white text, don't change*/
}

/* fonts */
@font-face  { font-family: DepartureMono; src: url(DepartureMono-Regular.woff); 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: 14px; background-color: var(--color_contrast); color: var(--color_text); font-family: DepartureMono; font-smooth: antialiased; -webkit-font-smoothing: antialiased; }
div#container {
  max-width: 1000px; /* 1440px / 2 = 720px */
  width: 100%;
  margin: 0 auto; /* Center the container */
}
div.title { font-size: 1.2em; text-align: center; color: var(--color_contrast); background-color: var(--color_main);}
div.title span { display: inline-block; vertical-align: middle;}
div#navmenu { position: sticky; top: 0; display: flex; text-align: center; background: var(--color_main); overflow-x:auto;}
div.navmenu-item 
{
	margin: auto;
	padding: 0.5em;
	text-align:center;
	background-color: var(--color_main);
	cursor: pointer;
	color: var(--color_highlight);
}
div.navmenu-item a { color: var(--color_highlight); }
div.navmenu-item a:visited { color: var(--color_contrast); }
div.navmenu-item a:hover { 	color: var(--color_highlight2); }

div.navmenu-item span a 
{
	margin:auto;
	padding-top: 0.5em;
}

div#content 
{
	color: var(--color_text);
}

/* pages */
div.page_content
{
	display: block;
	border: 0.3em solid var(--color_main);
	padding: 0.5em;
	overflow-x: auto;
	overflow-y: auto;
	word-wrap: break-word;
    max-width: 100%;  /* Prevents overflow */
}

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

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

/* page headers */
div.page_header { padding: 0.5em; }
div.page_date { }
div.page_time { }
div.page_author {}

/* links */
a:link {color: var(--color_contrast); text-decoration: none; }
div.page, div.page_content { a { color: var(--color_highlight); } a:visited { color: var(--color_highlight);} }
a:hover { color: var(--color_highlight2); text-decoration: none; }
div.page a:hover, div.page_content a:hover { color: var(--color_highlight2);}

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

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

/* code */
pre, code {
  white-space: pre-wrap;        /* Wrap long lines */
  word-wrap: break-word;        /* Ensure word breaks */
  overflow-wrap: break-word;    /* Another way to force breaks */
  max-width: 100%;              /* Limit the width */
  width: 100%;                  /* Ensure it takes up available space */
  color: var(--color_highlight);     /* Restore text color */
  font-family: monospace;       /* Restore font */
}

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

/* buttons */
span.edit_button { text-align: right; color: var(--color_contrast); background-color: var(--color_main); }
button, span.button
{
  /* restyle form buttons to look like text */
  align-items: normal;
  border: none;
  box-sizing: content-box;
  color: var(--color_contrast); 
  background-color: var(--color_main);
  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_contrast); }
span.button a:hover { color: var(--color_contrast); background-color: var(--color_highlight); }
button:hover { background-color: var(--color_highlight);}

h5 {
  font-size: 10px;
  margin: 0;
  line-height: 0.1;
}