/* ----------
/*
/* author: AuIII
/* log:
/*		v1.0.1, 2026.09.18, 使用flex布局
/*		v1.0.0, 2025.10.09, 
/*		v0.0.1, 2023.08.08, create
/*
/* ---------- */




/* 自定义变量, 变量名以'--'开头
selector{	//生效选择器
	--varname: 16px;	定义变量
	font-size: var(--varname);	使用变量
}
*/
body {
	--color-nav: royalblue;
	--radius: 5px;
	margin: auto;
	/*background-color: #eee;*/
	/* font-family: consolas; */
}

.text-center {
	text-align:center;
}
/* 内容居中对齐 */
.center {
	/* max-width: max-content; */
	margin-left: auto;
	margin-right: auto;
}
/*
.h-center {
	display: flex;
	flex-direction: column;
	align-items: center;
}*/

/* link */
/* :active仅当点击时生效, 点击后失效 */
/* a:active{ color: red } */
/* a:link, a:visited  */
a {
	color: dodgerblue;
	text-decoration: none;
}
.a{
	color:dodgerblue;
}
a:hover, .a:hover {
	text-decoration: underline;
}
a:empty::after {
	content: attr(href);
}

button {
	font: unset;
	background: none;
	border: none;
	cursor: pointer;
}

.p {
	/* padding:0.5em; */
	margin:1em 0;
}
em{
	font-weight:bold;
	font-style: normal;
	color:red;
}
.large {
	font-size: large;
}



/* --- header --- */
/* header | navgation bar */
#header {
	background-color: var(--color-nav);
}
#nav-bar {
	/* overflow: auto; */
	display: flex;
	justify-content: space-evenly;
	max-width: 40em;
	margin: auto;
}
#header .nav-btn, .dp-conteiner {
	flex: auto
}
#header .nav-btn, .dp-btn {
	padding: 20px 0;
	color: aliceblue;
}
#header a.nav-btn{
	/* display: inline-block; */
	text-decoration: none;
	text-align: center;
}
#header .active{
	color:#ff9;
}
.dp-conteiner:has(.active)>.dp-btn{
	color:#ff9;
	/* font-weight: bold; */
	/* 加粗会改变英文字体宽度, 改用text-shadow增加文字阴影 */
	/* text-shadow: 0 0 1px black; */
}
#header .nav-btn:hover, .dp-conteiner:hover>.dp-btn {
	background-color: #358;
	/* color: #039; */
	text-shadow: 0 1px 1px;
	border-radius: var(--radius);
}
/* .right { */
	/* float: right; */
/* } */

/* dropdown-menu */
.dp-conteiner {
	display:inline-block;
	position: relative;
	/*overflow: unset;*/
}
.dp-btn::after {
	/* content: '  \0022ee' */
	content: ' \0002c5';
}
.dp-conteiner:hover > .dp-btn::after{
	/* content: '  \0000bb' */
	content: ' \0002c4';
 }

.dp-btn {width:100%}
.dp-content {
	width: 100%;
	display:none;
	position:absolute;
	background-color: var(--color-nav);
	border-radius: var(--radius);
}
.dp-conteiner:hover > .dp-content {
	display: block;
	/* border-bottom-left-radius: 8px; */
	/* border-bottom-right-radius: 8px; */
}
.dp-content>.nav-btn{
	display:block;
	/* padding: 1em initial; */
	/* border-radius: 5px; */
	/* float: unset; */
}
.dp-content>button{
	width: 100%;
}


/* --- content --- */
#content {
	/* width: fit-content; */
	max-width: max-content;
	margin: 2em auto;
	min-height: calc(100vh - 300px);
}
#content>.nav-target{
	display: none;
}
#content>.active{
	display:block;
}
/* :target { */
	/* display: block; */
/* } */


/* login form */
/* #login-conteiner:nth-last-child(2){ */
	/* display:none; */
/* } */
#login-form {
	background: #eee;
	padding: 2em 3em;
	border-radius: 1em;
}
/* fieldset { */
	/* width: fit-content; */
	/* margin: auto; */
/* } */
label{
	cursor:pointer
}
.form-header {
	display:block;
	font-size: 1.25em;
	text-align:center;
	color: #37b;
}
input, form button{
	font:unset;
	/* height: 2em; */
	padding: 0.5em 0;
	display: block;
	margin: 1em auto;
	text-align:center;
	border-radius: 5px;
	width: 100%;
}
input{
	border-color: #ccc;
	border-style:double;
	/* padding-left: 1.5em; */
}
input:focus{
	/* outline-style: auto; */
	outline-color: cadetblue;
	/* border-style:inset; */
}
/* #user { */
	/* background: url("/src/user.svg") no-repeat 2px; */
	/* background-color: #eff; */
/* } */
/* #pass { */
	/* background-image: url('/src/lock.svg'); */
	/* background-repeat: no-repeat; */
	/* background-position: 2px; */
	/* background-size: */
/* } */
/* svg{ */
	/* stroke: #ccc; */
/* } */
form button {
	width: 100%;
	/* height: 2.3em; */
	/* padding: 0.5em; */
	background: dodgerblue;
	color: #fff;
}
form button:hover {
	background: #36a;
	font-weight: bold;
}

#ip > form {
	width: 18em;
}

.note {
	font-weight: 200;
	font-size: small;
}
#myip:empty + .note {
	display: none;
}
#myip:not(:empty) ~ :is(#ip-load, #bt-myip) {
	display: none;
}
#ip-load:not(:empty) + #bt-myip {
	display: none;
}

output{
	display: block;
	margin: 2em auto;
	max-width: 100%;
	/* white-space:pre; */
	text-align: center;
	height: 2em;
}
/* .pre{} */


table {
	/* width: 100%; */
	/* display:block; */
	margin: 0.5em;
	overflow-x: auto;
    border-collapse: collapse;
}
caption {
	font-size: large;
	font-weight:bold;
}
th, td {
    border: 1px solid grey;
	max-width:350px;
	padding: 0.5em 1em;
}
/* tr:nth-child(even) th,  */
tr:nth-child(even) td{
	background-color: lightgrey;
}

.lnk{
	margin: 1em;
}

#about div {
	line-height: 2em;
}
.del {
	text-decoration: line-through;
}

/* hr | div */
.rainbow{
	min-height: 2em;
	border: none;
	background: linear-gradient(to right, 
		red,orange,yellow,green,blue,indigo,violet);
}
.tvtest{
	min-height: 2em;
	background: linear-gradient(to right, white 0 12.5%,
		yellow 0 25%, cyan 0 37.5%, green 0 50%, magenta 0 62.5%,
		red 0 75%, blue 0 87.5%, black 0 100%);
}


/* --- footer --- */
#footer {margin-bottom: 1em}
#footer .active {
	color:chocolate;
	text-shadow: 1px 1px 1px yellow;
}



@media (max-width: 500px) {
	#header .nav-btn, .dp-btn{
		padding: 1em 0;
	}
	/* .nav:firstchild */
	.mobile-hide{
		display: none; /*!important*/
	}
	/* #content{ margin-bottom: 2em;} */
	#about {
		margin-left: 1em;
		margin-right: 1em;
	}
	.lnk{margin: 8px;}
}