.wrapper {
display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    /* 左右に80pxの余白を追加 */
    padding-left: 80px;
    padding-right: 80px;
    
    /* パディングを幅に含める設定（これが無いとはみ出します） */
    box-sizing: border-box;
    width: 100%;
}
.page-header {
    text-align: center;
}
.page-body {
    /* 残りのスペースをすべてメインコンテンツが占有するようにする */
    flex: 1;
}

.page-footer {
    text-align: center;
    padding: 20px 0;
    background-color: #f0f0f0;
    /* コンテンツが少なくても一番下に留まる */
}


/* ついでに一番下の横線もwrapperに合わせる */
hr {
    width: 100%;
    border: 0;
    border-top: 1px solid #ccc;
}


H1 {text-align: left;
	font-size : 14pt;}

H2 {text-align: left;
	background-color: #d3d3d3;
	font-size : 12pt;}

H3 {text-align: left;
	background-color: #add8eb;
	font-size : 10pt;}

a:link {color: #ffa500;
		text-decoration: none}

a:active {color: #87CEEB;
		text-decoration: none}

a:visited { color: #696969;
		text-decoration: none}


table { border : 1px outset black }
th, td { border : 1px inset black }

code {
    background-color: #f4f4f4;
    color: #333;
}

/* After typing command,I use this to display result */
/* When I need to display some contents in a file, I use this. */
.PROGRAMLISTING {
	padding: 1ex;
	background-color: #eee;
	border: 1px solid #ccc;
}

/* When I need to explain example. I use this. */
.EXAMPLE {
	background: #eee;
	border: 1px solid #f1bb16;
	margin: 1em 0;
	padding: 0.2em 2em;
	width: 90%;
}

/* When I need to introduce useful link, I use this. */
.USEFUL_LINK {
	background: #fefde6;
	border: 1px solid #f1bb16;
	margin: 1em 0;
	padding: 0.2em 2em;
	width: 90%;
}

/* When I need to give some tips, I use this. */
BLOCKQUOTE.TIP {
	color: #004F00;
	background: #d8ecd6;
	border: 1px solid green;
	padding: 0.2em 2em;
	width: 85%;
}

/* When I need to warn something, I use this */
BLOCKQUOTE.WARNING {
	color: #9F1313;
	background: #f8e8e8;
	border: 1px solid #e59595;
	padding: 0.2em 2em;
	width: 85%;
}

td.nowrap {
white-space: nowrap;
}