<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800">
<style>
body {background-color: #e2edf8; font-family: Assistant, sans-serif; margin: auto; max-width: 1180px;}
a {text-decoration: none;}
a:link {color: #0008ff;}
a:visited {color: #1a4fb5;}
code {background-color: #e5e5e5; border-radius: 5px; padding: 3px; white-space: nowrap;}
header {background-color: #049; border-bottom: 1px solid #1a237e; height: 58px; display: flex; align-items: center;}
h1,h2,h3,h4 {font-weight: 550;}
h2 a:visited, h3 a:visited, h4 a:visited {color: inherit;}
h1 {color: #eff300;}
h2 {background-color: #eff3ff; color: #044a84; margin: 0; padding: 12px 30px;}
h3 {color: #007FFF; margin: 5px 0;}
h4 {color: #007FFF; margin: 0;}
h5 {color: #007FFF; font-size: 0.9em; font-weight: 500; margin: 0;}

/* Nav */
.menu {background: #eff3ff; font-size: 0.9em; padding: 0; width: 180px; flex-direction: column;}
.menu li {list-style-type: none;}
.menu li:hover {background-color: #09c;}
.menu p {background: #bdf; color: #048; margin: 0; padding: 4px; text-align: center;}
.menu a {background: #fff; color: #36f; border-left: solid #eff3ff 5px; display: block; margin: 2px; padding: 3px 0 3px 12px;}
.menu a:hover {background: #ffe000; color: #00f; border-left: solid #0c0 5px;}
.menu {display: none;}
.menu.active {display: flex;}

main {background-color: #fff; border-left: 1px solid #c4dbe7; border-right: 1px solid #c4dbe7;}
.content ul {margin-top: 10px;}
.content li {margin-bottom: 8px;}
.date {width: 68px;}
.flolft {display: inline-block; width: 250px; vertical-align: top;}

img {max-width: 100%; height: auto;}
i {color: red; font-style: normal;}
figure {margin: 0; text-align: center;}
figcaption {font-size: 0.8rem;}
.footnote {margin: 0; font-size: 0.8rem;}
hr {clear: left; height: 1px;}
.ctr {text-align: center;}
table {border: 1px solid #ddd; font-size: 0.9rem; margin-bottom: 16px;}
caption {color: #217A00; font-size: 1.0rem; font-weight: 550; margin: 10px 0;}
tr:nth-child(even) {background-color: #EDFAFC;}
th {background-color: #d9edf7; color: #00008B; border-bottom: 2px solid #36d; font-weight: 500; padding: 3px;}
td {padding: 4px 3px; vertical-align: middle;}
tbody tr:hover {background-color: #E5FFDA;}

/* DESKTOP */
@media only screen and (min-width: 769px) {
body {border-left: 1px solid #c4dbe7; border-right: 1px solid #c4dbe7;}
.container {display: grid;
grid-template-columns: 200px 1fr 302px; gap: 0 0;
grid-template-areas: 
"header header header"
"nav main ads"
"footer footer footer";}
header {grid-area: header;}
.menu {grid-area: nav; height: auto; display: flex; margin: 15px 10px;}
main {grid-area: main;}
.ads {grid-area: ads;}
footer {grid-area: footer;}
.menu-icon {display: none;}
.logo {width: 200px; text-align: center; margin-top: 5px;}
h1 {font-size: 1.2rem; margin-left: 30px;}
h2,h3 {font-size: 1.1rem;}
h4 {font-size: 1.0rem;}
main {max-width: 660px;}
.content {padding: 0 30px;}
.ads {box-sizing: border-box; padding-top: 50px; width: 302px; text-align: center;}
.adslot_l {display: inline-block; width: 200px; height: 600px;}
}

/* MOBILE */
@media only screen and (max-width: 768px) {
.logo {width: 110px; text-align: center; margin-top: 5px;}
.menu-icon {display: block; cursor: pointer; float: right; margin: 16px 2px 0 0;}
.menu-icon span {display: block; width: 25px; height: 4px; margin: 4px; background-color: #f00; transition: all .3s ease-in-out;}
.menu-icon.active span:first-child {transform: rotate(45deg) translate(5px, 5px);}
.menu-icon.active span:nth-child(2) {opacity: 0;}
.menu-icon.active span:last-child {transform: rotate(-45deg) translate(5px, -5px);}
h1 {font-size: 1.1rem; margin-left: 5px;}
h2 {font-size: 1rem; text-align: center;}
.menu {margin: 15px 0 15px 120px; overflow: hidden;}
.content {padding: 0 10px;}
p {font-size: 0.9rem;}
.adsbygoogle, .adslot_l, .adslot_v, .ads, .R200 {display: none;}
}

footer {background-color: #049; border: 1px solid #999; color: #fff; text-align: center;}
footer a:link {color: lightcyan;}
footer a:visited {color: lightgreen;}
.footermenu a {border: 1px solid #5ab6ff; display: inline-block; width: 60px;}
.footermenu a:hover {background: #ffd3d6; border: 1px solid #ff9a9c; color: #333;}
</style>

<script>
function toggleMenu() {
const menu = document.getElementById('menu');
const menuIcon = document.querySelector('.menu-icon');
menu.classList.toggle('active');
menuIcon.classList.toggle('active');}
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1096041231348694" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "ca-pub-1096041231348694",enable_page_level_ads: true,overlays: {bottom: true}});</script>
