#main {
padding: 8px;
}

#nav img {
cursor: pointer;
}

.border1 {
border-top: 1px solid #000000;
}

.border2 {
border-left: 2px solid #000000;
}

.border3 {
border-left: 1px solid #000000;
}

.box {
border: 1px solid #000000;
padding: 6px;
}

.bt,
.tf {
border: 1px solid #0E2675;
}

.nobr {
white-space: nowrap;
}

.text {
font-size: 14px;
line-height: 22px;
}

.tree ul {
margin: 0px;
}

.tree {
white-space: nowrap;
display: inline-block;
position: relative;
}

A:HOVER {
text-decoration: underline;
}

A:VISITED {
color: #AA2400;
}

A {
text-decoration: none;
color: F94F01;
}

BODY {
font-family: Verdana, Geneva, Helvetica, sans-serif;
background-color: #FFFFFF;
border: none;
}

DIV, P, TD, TH, UL, LI {
font-size: 14px;
line-height: 2em;
}

H1 {
font-size: 22px;
color: #0E2675;
}

H2 {
font-size: 18px;
color: #0E2675;
margin-top: 22px;
}

H3 {
font-size: 16px;
color: #0E2675;
margin-top: 18px;
}

H4 {
font-size: 14px;
color: #0E2675;
font-weight: normal;
margin-top: 14px;
}

H5 {
font-size: 13px;
color: #0E2675;
margin-top: 12px;
}

HTML {
scrollbar-width: thin;
scrollbar-color: orange rgba(220, 220, 220, 0.2);
}

INPUT {
font-size: 13px;
}

OL {
margin-left: -12px;
}

TH {
font-size: 13px;
background-color: #F0F0FF;
padding: 3px;
}

U {
background-color: #EFFB59;
}

UL {
margin-left: -26px;
}

@media (prefers-color-scheme: dark) {
.border1,
.border2,
.border3,
.box {
border-color: #FFFFFF;
}

.bt,
.tf {
border: 1px solid #4167E8;
}

A:VISITED {
color: #FF400D;
}

A {
color: #FE7B3E;
}

BODY {
color: #EDEDED;
background-color: #060606;
}

H1,
H2,
H3,
H4,
H5 {
color: #728FEE;
}

TH {
background-color: #00002B;
}

U {
background-color: #8F9A03;
}
}

@media (min-width: 560px) {
#nav div:hover > .list {
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity .2s linear .4s;
}

#nav input,
#nav label,
.mobile {
display: none;
}

.item0 > a {
color: white;
padding: 6px;
text-decoration: none;
}

.item0 > img + a,
.list1 img + a {
padding: 6px 34px 6px 6px;
}

.item0:hover > .list1,
.list0 a {
display: block;
}

.item0:hover {
background-color: red;
}

.item0 {
float: left;
white-space: nowrap;
}

.item1, .item2, .item3 {
position: relative;
}

.item1:hover, .item2:hover, .item3:hover, .item4:hover {
background-color: grey;
}

.list0 img {
float: right;
padding: 10px;
}

.list0 {
background-color: #333;
overflow: hidden;
margin: 0px;
padding: 0px;
}

.list1 a {
text-decoration: none;
color: black;
text-align: left;
display: block;
padding: 10px 12px 10px 12px;
}

.list1 {
background-color: #f9f9f9;
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.list {
background-color: #f9f9f9;
visibility: hidden;
z-index: 1;
position: absolute;
min-width: 160px;
top: 0px;
left: 152px;
opacity: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

div[active] {
background-color: orange;
}
}

@media (max-width: 559px) {
#nav > label > img {
border-top: 8px solid #FFFFFF;
border-right: 326px solid #FFFFFF;
border-bottom: 8px solid #FFFFFF;
border-left: 8px solid #FFFFFF;
}

#nav a {
text-decoration: none;
color: #ffffff;
display: inline-block;
width: 289px;
}

#nav div[active] > a {
color: #d20a11;
background-color: #DDDDDD;
}

#nav input[type="checkbox"] + .list0,
#nav input[type="checkbox"] + .list1,
#nav input[type="checkbox"] + .list,
#nav input[type="checkbox"],
.desktop {
display: none;
}

#nav input[type="checkbox"]:checked + .list0,
#nav input[type="checkbox"]:checked + .list1,
#nav input[type="checkbox"]:checked + .list {
display: inline;
}

#nav {
background-color: #2e2d2c;
position: absolute;
top: 0px;
left: 0px;
}

.item0 > a {
font-size: 16px;
line-height: 31px;
padding: 0px 34px 0px 8px;
}

.item0, .item1, .item2, .item3, .item4 {
white-space: nowrap;
display: block;
border-bottom: 1px solid #ffffff;
}

.item1 > a {
font-size: 15px;
line-height: 27px;
padding: 0px 20px 0px 22px;
}

.item1:last-child, .item2:last-child, .item3:last-child, .item4:last-child {
border: none;
}

.item2 > a {
font-size: 14px;
line-height: 25px;
padding: 0px 12px 0px 30px;
}

.item3 > a {
font-size: 13px;
line-height: 23px;
padding: 0px 6px 0px 36px;
}

.item4 > a {
font-size: 12px;
line-height: 21px;
padding: 0px 0px 0px 42px;
}

.list0 img {
vertical-align: middle;
padding: 0px 6px 0px 6px;
}
}

@media (prefers-color-scheme: dark) and (min-width: 560px) {

}

@media (prefers-color-scheme: dark) and (max-width: 559px) {
#nav > label > img {
border-top: 8px solid #0B0B0B;
border-right: 326px solid #0B0B0B;
border-bottom: 8px solid #0B0B0B;
border-left: 8px solid #0B0B0B;
}
}