*{
    font-family: "STSong","Songti SC","SimSun","Microsoft YaHei",serif;
    font-weight: 700;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    line-height: 1.1;
}
.dark{
    background-color: rgb(18,19,20);
    --BackgroundColor2: rgb(30,31,32);
    --TextColor: rgb(245,245,245);
    --ButtonYinYing: -4px 4px 8px rgb(5,5,5);
    --ButtonHoverBackgroundColor: rgb(50,51,52);
}
.light{
    background-color: rgb(250,250,253);
    --BackgroundColor2: rgb(230,230,230);
    --TextColor: rgb(10,10,10);
    --YinYing: -4px 4px 8px rgb(100,100,100);
    --ButtonHoverBackgroundColor: rgb(210,210,210);
}
.full-width {
  flex-basis: 100%;
}
.half-width {
  flex-basis: 45%;
}
.tip-error {
  display: block;
  margin-top: 8px;
  color: red;
  font-size: 14px;
}
.tip-right {
  display: block;
  margin-top: 8px;
  color: green;
  font-size: 14px;
}
/*button*/
button{
    align-items: center;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 20px;
    background-color: var(--BackgroundColor2);
    color: var(--TextColor);
    box-shadow: var(--YinYing);
}
button:hover{
    background-color: var(--ButtonHoverBackgroundColor);
}
button:active{
    transform: scale(0.98);
}
button:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  background: #555;
  color: #aaa; 
}
/*p*/
p{
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    font-size: 30px;
    color: var(--TextColor);
    width: 100%;
    text-align: center;
    margin: 10px 0;
}
p.title{
    font-size: 50px;
}
/*label*/
label{
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    font-size: 30px;
    color:var(--TextColor);
    text-align: center;
    height: min-content;
}
/*input*/
input{
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--BackgroundColor2);
    color: var(--TextColor);
    border: 1px solid rgb(40,41,42);
    border-radius: 10px;
    padding: 10px 10px;
    font-size: 30px;
    outline: none;
    transition: border-color 0.2s;
}
input::placeholder{color:#888}
input:focus {
    border-color: var(--BackgroundColor2);
    background: var(--ButtonHoverBackgroundColor);
}

select{
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--BackgroundColor2);
    color: var(--TextColor);
    border: 1px solid rgb(40,41,42);
    border-radius: 10px;
    padding: 10px 10px;
    font-size: 30px;
    outline: none;
    transition: border-color 0.2s;
}

br{
    width:100%;
    display: block;
}