* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  border: none;
  font-family: sans-serif;
}

body {
  margin: 0;
  padding: 0.3em 0.5em;
  font-size: 14pt;
  background-color: #fff0e0;
  color: black;
}

body.editor {
	background-color: #eff;
}

body.admin {
	background-color: #fef;
}

@media screen and (max-width: 519px) {
  body {
    padding: 0.1em 0.2em;
    font-size: 12pt;
  }
  h1 { font-size: 14pt; }
  h2 { font-size: 14pt; }
  h3,h4,h5,h6 { font-size: 12pt; }
}

h1 {
  font-weight: bold;
}
h2, h3, h4, h5, h6 {
  font-weight: bold;
  padding: 0.1em 0.5em;
  color: #fff0e0;
  background-color: #705040;
}
h1 {
  font-size: 18pt;
}
h2 {
  font-size: 16pt;
}
h3, h4, h5, h6 {
  font-size: 14pt;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #fff0e0;
  text-decoration: none;
}

p {
  margin: 0.2em 0;
}

ul {
  margin: 0.2em 0;
}

ol {
  margin: 0.2em 0;
}

strong {
	font-weight: bold;
	color: red;
}

blockquote {
	border: 1px solid black;
	padding: 0.5ex 1em;
}

/* ========== ========== Generic Classes ========== ========== */

div.image {
  margin: 0.5em 0;
  text-align: center;
}
div.image img {
  width: 80%;
}

.invisible {
  display: none;
}

.fullwidth {
  width: 95%;
  margin: 0.3em auto;
}

div.timestamp {
  text-align: right;
  margin-bottom: 0.5em;
}

.simple-heading {
  background-color: #fff0e0;
  color: black;
  border-bottom: 1px solid #705040;
}

img.autofit {
  max-width: 100%;
  height: auto;
}

.flex-h {
  display: flex;
  flex-direction: row;
}

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

.flex-g {
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-f {
  flex-grow: 0;
  flex-shrink: 0;
}

.gap1 > li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.gap2 > li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* ========== ========== Tables ========== ========== */

table {
  border-collapse: collapse;
  border: 1px solid black;
}
thead {
  background-color: #e8e8f0;
}

th, td {
  padding: 0.2em 0.3em;
  border-style: none solid;
  border-width: 0 1px;
}
tbody th, tbody td {
  background-color: #e8e8f0;
}
tbody tr:nth-child(odd) th, tbody tr:nth-child(odd) td {
  background-color: #f8f8f8;
}

/* ========== ========== Inputs ========== ========== */

textarea {
  width: 90%;
  margin: 0.3em auto;
  font-size: 100%;
}

input , button {
  font-size: 100%;
}

/* ========== ========== Code Area ========== ========== */

/* from: https://qiita.com/RinoTsuka/items/4a4f78a41f598e0117e6 , https://chienomi.org/articles/technology/201910-web-font-settings.html*/
pre, code, var, samp, kbd, .mono {
	font-family: 
			"SourceHanCodeJP-Regular",
			'Source Han Code JP', 
			"M+ 1m",
			"Rounded M+ 1m regular",
			"Rounded M+ 2m regular",
			"Rounded Mgen+ 1m regular",
			"Rounded Mgen+ 2m regular",
			"Yutapon coding Regular",
			"Myrica M",
			"MyricaM M",
			"Ricty Diminished Discord",
			"Ricty Diminished",
			"Migu 1M",
			"Migu 2M",
			'VLGothic', 
			"VL ゴシック",
			'Operator Mono', 
			'monofur', 
			'Hermit', 
			'Input Mono Compressed', 
			'Fira Mono Condensed', 
			'Fira Code Condensed', 
			'mononoki', 
			'agave', 
			'Monoid', 
			'Cica', 
			'Menlo', 
			'Meslo LG S', 
			'Monaco', 
			'Ricty', 
			'Consolas', 
			'Inconsolata', 
			"MeiryoKe_Gothic",
			monospace;
	font-size: medium;
}

pre.code {
	white-space: pre-wrap;
	border: 1px solid black;
	background-color: white;
	padding: 0.5em;
}

/* ========== ========== Pulldown Menu ========== ========== */

.pulldown_menu_checkbox {
  display: none;
}

.pulldown_menu_label {
  display: block;
  margin-top: 1em;
  background-color: #f0e0d0;
  color: black;
  text-align: center;
  text-decoration: none;
}

.pulldown_menu_items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pulldown_menu_items li {
  margin: 0.2em 0;
}

.pulldown_menu_item {
  display: block;
  text-decoration: none;
  background-color: #ffe0d0;
  color: black;
}

.pulldown_menu_item:hover {
  background-color: #404040;
  color: #fff0e0;
}

/* (for smartphones) */

@media screen and (max-width: 519px) {
  .pulldown_menu_container {
    display: inline-block;
  }

  .pulldown_menu_label_container {
    display: block;
    position: relative;
    margin: 0.4em 0.2em 0 0;
    text-align: right;
  }
  
  .pulldown_menu_label {
    display: inline;
    padding: 0.2em 0.5em;
    margin: 0;
    background-color: #fe7f00;
    color: black;
    text-align: center;
    text-decoration: none;
  }
  
  .pulldown_menu_label:hover {
    background-color: #404040;
    color: #fe7f00;
  }
  
  .pulldown_menu_items {
    position: relative;
    visibility: hidden;
    opacity: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .pulldown_menu_checkbox:checked ~ .pulldown_menu_items {
    visibility: visible;
    opacity: 1;
  }

  .pulldown_menu_items li {
    margin: 0;
  }
  
  .pulldown_menu_item {
    display: block;
    position: relative;
    padding: 0.2em 0.5em;
    background-color: #feb080;
    color: black;
    text-decoration: none;
  }
  
  .pulldown_menu_item:hover {
    background-color: #404040;
    color: #feb080;
  }
}
/* end of smartphone styles */

/* ========== ========== Large Buttons ========== ========== */
/*
  Usage:  <a href="..." class="largebutton"><span>button message</span></a>
*/

a.largebutton {
  text-decoration: none;
}

a.largebutton span , a.largebutton div {
	background : #ffcc99;
	border-radius : 6px;
	border : 2px #aa6633 solid;
	padding : 0.2em 0.5em;
}

a.largebutton:hover span , a.largebutton:hover div {
	background : #ffff99;
}

/* ========== ========== Specific Elements ========== ========== */

.errormsg {
	margin: 4px 10%;
	padding: 4px;
	border: 2px solid red;
	background-color: fdd;
	color: red;
	font-weight: bold;
	font-size: medium;
	text-align: center;
}

#global_menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

@media screen and (max-width: 519px) {
  #global_menu_apps {
    display: none;
  }
}

.my_content {
  line-height: 140%;
}

@media screen and (min-width: 520px) {
  .my_content , .user_commands {
    width: calc(100% - 16ch);
  }
}

.user_commands {
  background-color: #ffffff;
}
.user_commands a {
  margin : 0.2em 0 0 0;
  padding : 1px 5px;
  border-color : #eee;
  border-width : 2px;
  border-style : outset;
  background-color : #ffc;
  text-decoration : none;
  line-height : 220%;
}

.notice {
  width: 80%;
  margin: 0.3em auto;
  padding: 0.1em 0.5em;
  background-color: #f0e0d0;
  border: 1px solid #808080;
}

.my_footer {
	text-align : center;
}