/* :root { 
    --shadow-highlight: 0px 0px 0px 3px rgba(70, 145, 208, 0.25);
    --backdrop-blur-radius: 10px;
    --default-transition-option: 0.15s ease-in-out;
    --shadow-large:
            0px 0.6px 2.2px rgba(0, 0, 0, 0.02),
            0px 1.3px 5.3px rgba(0, 0, 0, 0.028),
            0px 2.5px 10px rgba(0, 0, 0, 0.035),
            0px 4.5px 17.9px rgba(0, 0, 0, 0.042),
            0px 8.4px 33.4px rgba(0, 0, 0, 0.05),
            0px 20px 80px rgba(0, 0, 0, 0.07)
 */
*,:after,:before {
    border: 0 solid #d9d9e3;
    box-sizing: border-box
}

:root {
    --color-background: white;
	--color-text: black;
	--color-secondary: #333;
	--color-shadow: #eee;
	/* --color-link: #0000bb;
	--color-link-active: #223fbf; */
	--border-width: 2px;
	--link-color: #778087;
	--link-hover-color: #4d5256;
	--link-visited-color: #afb9c1;
}

/* @media (prefers-color: light) {
	:root {
		--color-background: #ffffff;
		--color-text: #000000;
		--color-secondary: #333;
		--color-shadow: #eee;
		--color-link: #0000bb;
		--color-link-active: #223fbf;
	}
}

@media (prefers-color: dark) {
	:root {
		--color-background: #000000;
		--color-text: #ffffff;
		--color-secondary: #eee;
		--color-shadow: #333;
		--color-link: #00bcff;
		--color-link-active: #79a8ff;
	}
} */

@font-face {
    font-family: huiwen-mincho;
    src: url(./huiwen-mincho.woff2) format('woff2');
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box
}

html {
    border-top: 3px solid #990000;
    padding: 0px 10px;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* margin: 5% 5% 5% 5%; */
    padding: 5% 5% 5% 5%;
    /* width: 80%; */
    border: 1px solid LightGrey;
/*    background: #F0F1EE none repeat scroll 0% 0%; */
    background: #FFFFFF none repeat scroll 0% 0%;
    box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
    border-radius: 4px;
    max-width: calc(1000px - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin: 32px auto;
    position: relative;
}

p,
li {
    line-height: 1.6
}

/* ul {
    list-style-type: none;
    margin-left: -40px;
} */

/* li {
	padding-bottom: 0.3em;
} */

figure {
	/* padding: 1em; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

#content {

    max-width: 55rem;
    margin: auto;
    padding-top: 1em;
}
#content video {
    margin: auto;
    border-radius: 6px;
    width: 100%;
    max-width: 1200px;
    box-shadow: 0 0 10px #555;
    -webkit-box-shadow: 0 0 10px #555;    
}

#content img {
	/* border: var(--border-width) solid var(--color-text);
	max-width: 95vw;
    max-height: auto; */
    box-shadow: 0 0 10px #555;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 0 10px #555;
    width: 100%;
    max-width: 1200px;
    padding: 8px;
    background-color: inherit;
/*    background-color: bisque;*/
}
/* img {
    box-shadow: 0 0 10px #555;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 0 10px #555;
    width: 100%;
    max-width: 1200px;
    background-color: bisque;
} */


/* nav li {
	padding: 0.5ex 0;
} */

/* nav a {
	padding: 0.2ex 0.4ex;
	text-decoration: none;
} */

#content > * {
	grid-column: 2;
/*    padding-left: 0; */
/*    list-style: none; */
}

#content .org-ul {
    padding-left: 14px;
}

#postamble {
    max-width: 54rem;
    margin: auto;
}

#org-div-home-and-up {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    position: sticky;
    top: 0px;
    float: left;
    background: #EEE;
    border: 0.5px solid #d4cbb6;
    border-radius: 4px;
}

#org-div-home-and-up a {
    font-family: monospace;
    font-size: 1.4em;
    margin: 0 0.5ex;
    padding: 0.2ex 0.4ex;
    text-decoration: none;
    text-transform: uppercase;
    color: #990000;
    font-weight: 600;
}

#updated {
    font-family: monospace;
    float: right;
}

.title {
	font-family: monospace;
	font-size: 2.8em;
	max-width: 80rem;
}

i {
    word-break: break-all;
}

a:active,a:link {
    color: var(--link-color);
    text-decoration: none;
    word-break: break-word
}

a:hover {
    color: var(--link-hover-color);
    border-bottom: 1px dashed #990000;		     
}

a:visited {
    color: var(--link-visited-color);
    text-decoration: none;
    word-break: break-word
}
a:hover, a:active {
    color: var(--link-hover-color);
}
/*
a:link {
    color: #0969da;
    text-decoration: none;
    word-break: break-all;
}

a:visited {
    text-decoration: purple
}

a:hover {
    border-bottom: 1px dashed #990000;    
}

a:hover, a:active {
    color: #587e72;
}
*/
.todo {
    color: #CA0000;
}

.done {
    color: #006666;
}

figcaption {
	font-family: monospace;
	padding: 1ex;
}

blockquote {
	border-left-style: solid;
	padding-left: 1em;
}

table {
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-collapse: separate;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    width: 100%;

    font-size: .875em;
    line-height: 1.7142857;
    margin-bottom: 2em;
    margin-top: 2em;
    table-layout: auto;
    text-align: left;
    overflow-x: auto;
    display: inline-table;
}

/*tr:nth-child(even) {
    background-color: #eee;
}*/

caption {
    padding: 10px;
    caption-side: bottom;
}

.org-svg {
    width: 226px;
    height: auto;
}

/**th[scope='col'] {
    background-color: #696969;
    color: #fff;
}
th[scope='row'] {
    background-color: #d7d9f2;
}*/

tr:hover {
    background-color: rgba(236 236 241,.3);
}

th {
    background-color: rgba(236,236,241,.2);
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-width: 1px;
    padding: 0.25rem 0.75rem;
}


th:first-child {
    border-top-left-radius: 0.375rem;
	
}

th:last-child {
/* 	border-top-right-radius: 0.375rem; */
	border-right-width:1px;
	border-top-right-radius:.375rem
}

tr:last-child td:first-child {
    border-bottom-left-radius: .375rem
}

tr:last-child td:last-child {
    border-bottom-right-radius: .375rem
}

td {

/* 	border: 1px solid var(--color-text); */
/* 	padding: 0.25em; */
	border-bottom-width:1px;
	border-left-width:1px;
	padding:.25rem .75rem
}

/*tr:first-child td{
	border-top-width:1px;
}*/
td:last-child{border-right-width:1px}

kbd {
	background-color: var(--color-shadow);
	border-radius: 3px;
	border: 1px solid var(--color-secodnary);
	color: var(--color-text);
	display: inline-block;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	/* white-space: nowrap; */
    word-break: break-all;
}

.tag {
    background-color: #eee;
    font-family: monospace;
    padding: 2px;
    font-size: 80%;
    font-weight: normal;
}



.timestamp {
	color:  #990000;
}

/* If in heading display above */
h1 .timestamp,
h2 .timestamp,
h3 .timestamp,
h4 .timestamp,
h5 .timestamp,
h6 .timestamp {
    display: block;
}

.published {
    font-size: 1.3em;
    font-family: monospace;
    color: var(--color-secondary);
}

.footdef {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.footpara {
    display: inline;
}

footer {
    margin: auto;
    font-size: 80%;
    line-height: 1.5em;
}

.copyright-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0.5ex;
}

.banner {
    text-align: center;
    max-width: 100%;
    padding: 1ex 0.5ex;
}

.banner img {
    max-width: 95vw;
    max-height: auto;
}

.generated {
    font-family: monospace;
    text-align: center;
}

/* Inserts */
table.cartouche td {
    padding: 1.5em;
}

div.display,
div.lisp,
div.smalldisplay,
div.smallexample,
div.smalllisp {
    margin-left: 3%;
}

div.example {
    padding: .8em 1.2em .4em;
}

pre {
    overflow: auto;
    scrollbar-color: grey lightgrey;
    scrollbar-width: thin;
    /* border: var(--border-width) solid var(--color-text); */
    /* margin: 1em 0 1em 3%; */
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    border: 1px solid #d4cbb6;
    background-color: #f2efe4;
    box-shadow: 4px 4px 6px var(--color-shadow);
    padding: 1em;
}

pre.example {
    padding: .8em 1.2em;
}

div.example,
pre.example {
    /* margin: 1em 0 1em 3%; */
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    border: 1px solid #d4cbb6;
    background-color: #f2efe4;
}

div.example>pre.example {
    padding: 0 0 .4em;
    margin: 0;
    border: none;
}

pre.menu-comment {
    padding-top: 1.3em;
    margin: 0;
}


/* h */
h1 {
    /* margin-bottom: 1.5em;
    margin-right: 7%; */
    text-align: center;
}

h2 {
    color: #587e72;
    border-bottom: 1px solid #ddd;
#    margin-top: 1.5em;
    padding-bottom: 8px;
}

.outline-text-2 {
    margin-left: 0.1em
}

h3 {
    color: #587e72;
    margin-left: 0.6em;
}

/* #A34D32;*/

.outline-text-3 {
    margin-left: 0.9em;
}

h4 {
    color: #587e72;
    margin-left: 1.2em;
}

.outline-text-4 {
    margin-left: 1.45em;
}

/* TOC */
/* #table-of-contents {
    float: right;
    border: 1px solid;
    overflow: auto;
    font-size: 14px;
    position: fixed;
    right: 0;
    top: 24px;
    background: white;
    z-index: 999;
    max-height: 80%;
}

#table-of-contents h2 {
    font-size: 14px;
    padding: 10px;
}

#table-of-contents:hover #text-table-of-contents {
    display: block;
}

#text-table-of-contents {
    display: none
}

#text-table-of-contents ul {
    padding-left: 20px
} */

/**toc2 */
#table-of-contents {
    z-index: 1;
    margin-top: 66px;
    font-size: 10pt;
    font-family: sans-serif;
    position: fixed;
    right: 0em;
    top: 0em;
    line-height: 12pt;
    text-align: right;
    background: #EEE;
    border: 0.5px solid #d4cbb6;
    border-radius: 4px 0px 0px 4px;

    background-image: linear-gradient(135deg, #fff 60%, transparent 50%), linear-gradient(45deg, #fff 60%, transparent 50%);
    background-position: top left, top left, top right, top right;
    background-size: 5px 5px;
    background-repeat: repeat-y;
    box-shadow: 1px 1px 2px 1px rgb(34 36 38 / 15%);
    /* box-shadow: 0 0 1em #777777;
    -webkit-box-shadow: 0 0 1em #777777;
    -moz-box-shadow: 0 0 1em #777777;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px; */
    /* ensure doesn't flow off the screen when expanded */
    max-height: 80%;
    overflow: auto;
}

#table-of-contents h2 {
    font-size: 12pt;
    /* max-width: 9em; */
    color: #990000;
    border: 0;
    /* font-weight: normal; */
    text-align: center;
    margin-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin-bottom: 0.5em;
}

#table-of-contents #text-table-of-contents {
    display: none;
    text-align: left;
}

#table-of-contents:hover #text-table-of-contents {
    display: block;
}

#postamble:after {
    text-align: center;
    display: block;
    content: "\2742";
    font-size: 34px;
}

/* Index */

@media	(min-width: 43em) {
	.logo {
		float: left;
	}
}

/* Index */

@media	(min-width: 43em) {
	.profile-pic {
	    float: right;
	    padding: 20px;
	}
}

.profile-pic {
    width: 266px;
    margin: 0 auto;
}

.logo {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #990000;
    position: absolute;
    top: 16px;
    left: 16px;
}
  
.logo::before {
    content: '';
    position: absolute;
    border-radius: 37% 2px 5px 9%;
/*     border-top-left-radius: 37%;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 12%; */
    background: #FFFFFF;
    width: 20px;
    transform: rotate(+90deg);
    height: 4px;
    top: 22px;
    left: 10px;
}

.logo::after {
    content: '';
    position: absolute;
    /* border-radius: 50%; */
    /* border-radius: 37% 54% 46% 46%; */
    border-top-left-radius: 1.4px;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 1px;
    border-bottom-left-radius: 1.4px;
    background: #FFFFFF;
    width: 20px;
    height: 4px;
    top: 10px;
    left: 11px;
}