@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');
* { box-sizing:border-box; }
body { font-family:"Commissioner", sans-serif; font-weight:400; font-variation-settings:"slnt" 0, "FLAR" 0, "VOLM" 0; font-optical-sizing:auto; font-size:1.2rem; margin:0; padding:0; line-height:1.4; background:#cfcfcf; color:#262626; }
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
a { color:#2d578d; text-decoration:none; font-weight:500; }
a:hover { color:#50689a; text-decoration:none; }
a:active { opacity:0.75; }
h1 { color:#2b496b; font-weight:800; font-size:2rem; line-height:1.25; }
h2, h3 { font-weight:700; color:#2b496b; line-height:1.25; }
#c2_category h4 { font-weight:700; color:#2b496b; line-height:1.25; font-size:1.4rem; margin-bottom:0; }
header { background-color:#3475db; color:white; padding:1rem 0 0; }
nav { background-color:rgba(0,20,60, 0.2); backdrop-filter:blur(2px); margin-top:1.2rem; padding-bottom:5px; border-top: 1px solid rgba(151, 160, 83, 0.2); }
nav ul { list-style-type:none; padding:0; margin:0; display:flex; justify-content:flex-start; }
nav li { padding:0.5rem 1rem; }
nav ul li:first-child { padding-left:0; }
nav a { color:white; text-decoration:none; transition:color 250ms; }
nav a:hover { color:#ead566; text-decoration:none; }
main { display:flex; flex-wrap:wrap; padding:1rem 0; }
.content { flex:1 1 70%; min-width:300px; padding-right:1rem; }
.sidebar { flex:1 1 30%; min-width:250px; background-color:#2b496b; padding:1rem; border-radius:8px; }
footer { background-color:#1f2e40; color:#5f7989; padding: 1rem 0; font-size:80%; }
aside h4:first-child { margin-top:0; }
aside h4 { background:#2968b9; color:white; padding:10px; border-radius:6px; }
aside h5 { padding:0 10px; margin:0 0 15px; line-height:1.25; }
blockquote { border-left:4px solid #2961b9; padding-left:24px; }
#c2navi { margin:40px 0; line-height:2.5; }
#c2navi a { padding: 8px 7px 9px; background:lightblue; border-radius:4px; margin-right:3px; line-height: 1; }
#c2navi a.current { opacity:0.5; }
section.content img { max-width:99%; height:auto; border-radius:8px; }
.content table { background:#2b496b; border-radius:8px 8px 0 0; overflow:hidden; }
.content table th, .content table td { text-align:left; padding:8px 16px; }
.content table td { background:#cfcfcf;  }
.content table th { background:#2b496b; color:#eee; }
.sidebar img.bu { vertical-align:-4px; }
.sidebar img.il { max-width:100%; margin-bottom:8px; margin-top:12px; }
.sidebar h5 a { color:#78a5df; }
.sidebar h5 a:hover { color:#eee; }
.sidebar hr { height:0; border-bottom:1px solid #1b2a37 !important; border: 0; }
.table-container table th, .table-container table td { vertical-align:top; }

#bread { font-size:50%; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee; }

@media (max-width:768px) {
    nav ul { flex-direction:column; align-items:flex-start; }
    nav ul li { padding-left:0; }
    main { flex-direction:column; }
    .content, .sidebar { width:100%; padding-right:0; }
    .table-container { overflow-X:scroll; max-width:100%; }
    .table-container table { min-width:100%; max-width:960px; }
}