body
* {
    box-sizing: border-box;}

body {
margin: 0px;
padding: 40px 20px;
background: #eee;
font-family: 'Crimson text', georgia, serif;
font-size: 13px;
line-height:1.3;
letter-spacing:1px;
color: #555;}
b {color:#555;}
i {color:#999;}
a {color:#555;text-decoration:none;}
a:hover {color:#999;}


.container {
margin: auto;
background:#fff;
padding:8px;
max-width: 800px;}


.banner {
background: #fff;
border: 1px solid #cccccc;
height: 120px;
padding-top:40px;
text-align:center;}


.site-name {
font:23px  georgia, serif;
margin-bottom:8px;
letter-spacing:3px;}


.slogan {
font:italic 12px georgia, serif;
letter-spacing:1px;}


.navi {
margin-top: 8px;
padding: 5px 10px 4px 10px;
letter-spacing:1px;
font:italic 12px georgia, serif;
background: #fff;
border: 1px solid #ccc;
text-transform:lowercase;
text-align:center;}

.navi a {
display:inline-block;
padding-right:20px;
color: #555;
text-decoration: none;}

.navi a:last-child {
    padding-right: 0;}

.navi a:hover {
text-decoration: underline;}


.lay {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px;
margin-top: 8px;}


.aside {
display: flex;
flex-direction: column;
gap: 8px;}


.main {
display: flex;
flex-direction: column;
gap: 8px;}


.box {
padding: 8px;
background: #fff;
border: 1px solid #ccc;}


.title {
margin-bottom: 7px;
padding-bottom: 4px;
border-bottom: 1px solid #ddd;
text-transform:uppercase;}


.side-link {display:block;
border-left:5px solid #999;
padding-left:5px;
margin-bottom:3px;}


.footer {
margin-top: 8px;
padding: 8px;
text-align: center;
background: #fff;
border: 1px solid #ccc;}


@media (max-width: 670px) {

body { padding: 30px 20px;}

.lay {grid-template-columns: 1fr;}

.main {order: 1;}

.aside {order: 2;}

.navi a {
    display: block;
    padding-right: 0;}

}