@charset "utf-8";
/* CSS Document */
.rounded-125 {
    border-radius: 1.25rem;
}

.main-article {
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.6; /* 提高整体行高，增强可读性 */
}

/* 标题间距设置 */
.main-article h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    line-height: 1.3; /* 标题行高稍小 */
}

.main-article h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* 段落间距设置 */
.main-article p {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

/* 列表间距设置 */
.main-article ul {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.8rem; /* 增加左侧缩进 */
}

.main-article li {
    margin-bottom: 0.8rem; /* 列表项之间的间距 */
}

/* 第一个标题可以去除顶部间距，避免页面顶部留白过多 */
.main-article h2:first-of-type {
    margin-top: 0;
} 



.text-hollow{
    color: #FFFFFF;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.text-hollow a:hover {
    color: #FFFFFF;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;    
}

.text-hollow a:link {
    color: #FFFFFF;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;   
}

.text-hollow a:visited {
    color: #FFFFFF;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;   
}

.text-hollow a:active {
    color: #FFFFFF;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;   
}

.text-hollow a:focus {
    color: #FFFFFF;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;   
}

.text-hollow-bk{
    color: black;
	font-weight: bolder;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.btn-warning .text-hollow-bk a:hover {
	font-weight: bolder;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.tt-success {
	background: rgb(131,212,58);
	background: linear-gradient(180deg, rgba(131,212,58,1) 0%, rgba(69,145,25,1) 51%, rgba(83,175,30,1) 95%);
}

.tt-primary {
	background: rgb(3,177,252);
	background: linear-gradient(180deg, rgba(3,177,252,1) 0%, rgba(4,124,176,1) 51%, rgba(3,177,252,1) 95%);
}

.tt-warning {
	background: rgb(247,212,72);
	background: linear-gradient(180deg, rgba(247,212,72,1) 0%, rgba(222,154,27,1) 51%, rgba(247,212,72,1) 95%);
}

.tt-danger {
	background: rgb(232,46,84);
	background: linear-gradient(180deg, rgba(232,46,84,1) 0%, rgba(184,24,57,1) 51%, rgba(232,46,84,1) 95%);
}

.tt-secondary {
	background: rgb(215,41,227);
	background: linear-gradient(180deg, rgba(215,41,227,1) 0%, rgba(162,36,171,1) 51%, rgba(215,41,227,1) 95%);
}

.correct-ans {
	color: #390;
	text-align: justify;
	font-weight: 300;
	line-height: 30px;
}

.text-border {
	text-shadow: -1px 0px 0px black, 0 1px black, 1px 0 black, 0 -1px black;
}

.text-border-h1 {
	-webkit-text-stroke: 1px black;
	color: white; 
	text-shadow: 1px 1px 0 #000, 
	-1px -1px 0 #000, 
	1px -1px 0 #000, 
	-1px 1px 0 #000, 
	1px 1px 0 #000;
	font-weight: 500;
	font-size: 2.2rem;
}

.text-border-02 {
	-webkit-text-stroke: 1px black;
	color: white; 
	text-shadow: 2px 2px 0 #000, 
	-1px -1px 0 #000, 
	1px -1px 0 #000, 
	-1px 1px 0 #000, 
	1px 1px 0 #000;
}


.diagonal-container {
	border: 1px solid #000;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

.to-right {
	background: linear-gradient(135deg, transparent calc(50% - 1px), black 50%, transparent calc(50% + 1px));
}

.diagonal-container .middle {
	margin-top: -40px;
	margin-bottom: -30px;
	position: relative;
}

.diagonal-container-2 {
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

.to-right-2 {
	background: linear-gradient(135deg, transparent calc(50% - 1px), green 50%, transparent calc(50% + 1px));
}

.tt-1{
	background: rgb(131,212,58);
	background: linear-gradient(180deg, rgba(131,212,58,1) 0%, rgba(69,145,25,1) 51%, rgba(83,175,30,1) 95%);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	color: #FFFFFF;
	padding-left: 5px;
	margin-top: 0px;
	margin-right: 0px;
	/*margin-bottom: 5px;*/
	padding-top: 6px;
	padding-bottom: 6px;
	border-left-width: 8px;
	border-left-color: #076B18;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	border-radius: 5px;
}
.tt-2{
background: rgb(13,110,253);
background: linear-gradient(180deg, rgba(13,110,253,1) 0%, rgba(14,77,171,1) 61%, rgba(14,100,227,1) 95%);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	color: #FFFFFF;
	padding-left: 5px;
	margin-top: 0px;
	margin-right: 0px;
	/*margin-bottom: 5px;*/
	padding-top: 6px;
	padding-bottom: 6px;
	border-left-width: 8px;
	border-left-color: #0e4dab;
	font-weight: bolder;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	border-radius: 5px;
}		
.pf-1{
	background: #53af1e;
	color: #FFFFFF;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding-right: 3px;
	padding-left: 3px;
	display: inline;
	margin-right: 10px;
	margin-top: 3px;
	line-height: 1.7rem;
	font-size: 1.2rem;
	text-align: center;
}
.pf-3{
	background: #E9AA43;
	color: #FFFFFF;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding-right: 3px;
	padding-left: 3px;
	display: inline;
	margin-right: 10px;
	margin-top: 3px;
	line-height: 1.7rem;
	font-size: 1.2rem;
	text-align: center;
}

.ls-90{
	float: left;
	display: inline-block;
	width: 90px;
}			
.rs-100{
	display: block;
	margin-left: 100px;
}

/* MC */
.correct.active { 
	background-color: green;
	color: white;
}

.wrong.active { 
	background-color: red;
	color: white;
}	
/* MC */

.u {
    text-decoration:underline;
    white-space:nowrap;
    display: inline-block
}

/* double underline */
du
{
    text-decoration-line: underline;
    text-decoration-style: double;
}
/* double underline */


.updown-move {
  animation: updown 1s 1;
}

.leftright-move {
  animation: leftright 1s 1;
}
   
@keyframes updown {
    0% {opacity:0;}
    10% {transform: translateY(-4px); opacity:1;}
    20% {transform: translateY(4px); opacity:1;}
    30% {transform: translateY(-3px); opacity:1;}
    40% {transform: translateY(3px);opacity:1;}
    50% {transform: translateY(-2px);opacity:1;}
    60% {transform: translateY(2px);opacity:1;}
    70% {transform: translateY(-1px); opacity:1;}
    80% {transform: translateY(1px); opacity:1;}
    100% {transform: translateY(0px); opacity:1;}
}
    
@keyframes leftright {
    0% {opacity:0;}
    10% {transform: translateX(-4px); opacity:1;}
    20% {transform: translateX(4px); opacity:1;}
    30% {transform: translateX(-3px); opacity:1;}
    40% {transform: translateX(3px);opacity:1;}
    50% {transform: translateX(-2px);opacity:1;}
    60% {transform: translateX(2px);opacity:1;}
    70% {transform: translateX(-1px); opacity:1;}
    80% {transform: translateX(1px); opacity:1;}
    100% {transform: translateX(0px); opacity:1;}
}