html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
    font: unset;
    margin: 0;
    padding: 0;
}


body {
    background-color: #e1e1e1;
    font-family: Tahoma, sans-serif; 
    font-size: 16px;
    line-height: 1.5;
}

header, footer {
    text-align: center;
    margin: 0 auto;
    padding: 8px;
    background-color: #2980b9;
}

main {
    background-color: #e1e1e1;
    background-image: url("../image/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../image/bg.jpg");
    background-image: url("../image/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../image/bg.jpg");
    background-image: url("../image/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../image/bg.jpg");
    background-image: url("../image/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../image/bg.jpg");
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 100px 100px, cover, cover;
    background-position: top left, center center, bottom center;
    background-attachment: fixed, fixed, fixed;

}

nav {
    text-align: center;
    margin: 0 auto;
    background-color: white;
    max-width: 840px;
}

a:link, a:visited, a:active {
    text-decoration: none;
    color: #2980b9;
}


.hr0 {
    margin: 12px auto;
    padding: 0 auto;
    height: 2px;
    background-color: #cdcdcd;
    border: none;
    min-width: fit-content;
    max-width: 600px;
}

.hr1 {
    margin: 8px auto;
    padding: 0px;
    height: 2px;
    background-color: #2980b9;
    border: none;
    width: 100%;
}

.box, .xbox, .hbox {
    display: inline-block;
}

.fa-circle-up {
    font-size: 20px;
}
.gotop {
    float: right;
}









.tagline, .navtop, .home, .page {
    max-width: 840px;
    margin: 0 auto;
}

.navtop {
    border-bottom: 8px double #2980b9;
    padding: 4px 0;
}

.home, .page {
    background-color: white;
}

.page {
    padding: 2px 16px;
}



.webinfo {
    color: white;
}

.tagline, .navtop {
    font-weight: bold;
    font-size: 18px;
    color: white;
}

.tagline .box {
    padding: 0 8px;
    width: fit-content;
}

.navtop .xbox {
    width: fit-content;
    margin: 0;
    padding: 0;
}

.navtop .box {
    border: 2px solid #2980b9;
    width: 54px;
    margin: 4px 1px;
    border-radius: 8px;
    line-height: 2;
}

.navtop .box:hover {
    background: #2980b9;
    color: white;
}

.home {
    text-align: center;
    padding: 16px 24px;
}
.home img {
    border-radius: 50%;
}

.home h1 {
    line-height: 2;
    font-size: 32px;
    font-weight: bold;
}
.home h2 {
    line-height: 2;
    font-size: 20px;
    font-weight: bold;
}
.home h3 {
    line-height: 2;
    font-size: 16px;
    font-weight: bold;
}

.home .my-contact {
    width: fit-content;
    text-align: left;
    margin: 0 auto;
}



.home .p-note {
    font-size: 12px;
    color: gray;
}

.home .my-pages {
    margin: 16px auto 8px;
}

.home .hbox {
    width: fit-content;
}

.home .fa-solid, .home .fa-brands {
    color: #2980b9;
}

.home .box {
    border: 2px solid #2980b9;
    border-radius: 8px;
    font-size: 20px;
    width: 60px;
    line-height: 2;
    margin: 2px;
}
.home .box:hover {
    color: white;
    background: #2980b9;
}

.toc {
    padding: 0 16px;
}

.toc .box {
    margin: 4px;
    padding: 4px 8px;
    border: 1px solid #2980b9;
    border-radius: 5px;
}

.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
    margin: 16px 0;
    font-weight: bold;
    background-color: #f6f6f6;
}


.page h1 {
    font-size: 24px;
    text-align: center;
    line-height: 2;
    border: 3px dotted #2980b9;
}

.page h2 {
    padding: 6px 18px;
    font-size: 20px;
    border-left: 8px solid #2980b9;
}

.page h3 {
    padding: 6px 18px;
    font-size: 18px;
    border-left: 8px double #2980b9;
}

.page h4 {
    padding: 6px 18px;
    font-size: 16px;
    border-left: 8px dotted #2980b9;
}

.page h5 {
    padding: 6px 18px;
    font-size: 16px;
    border-left: 8px solid #64b5f6;
}
.page h6 {
    padding: 6px 18px;
    font-size: 16px;
    border-left: 8px solid #ffd54f;
}

.page > p {
    padding: 0 1em;
}

.page ol, .page ul {
    padding: 0 0 0 1em; 
}

.page li {
    margin: 0 1em;
}

.page li > p {
    margin: 0.5em 0;
}

.page blockquote {
    margin: 0.5em 0;
    padding: 0.5em 0;
    border: 1px solid #aaa;
    border-left: 6px solid #aaa;
    background-color: #f7f7f7;
}

.page blockquote p {
    padding: 0em 1em;
}

footer a:link, 
footer a:visited, 
footer a:active {
    color: white;
}