@font-face {
    font-family: 'ContentFont';
    src: url('../YuFanZhenSu.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'UbuntuMono';
    src: url('../Ubuntu Mono derivative Powerline.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}  

body {
    margin: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("../background.jpg");
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat; 
    font-family: 'ContentFont', sans-serif;
    min-height: 100vh;
}

.null-area{
    height: 50px;
}

.big-title, .sub-title{
    text-shadow: #000000 3px 3px 2px;
}

.big-title{
    font-weight: bold;
    width: 100%;
    padding: 24px 8px;
    font-size: 40px;
    text-align: center;
    color: rgb(231, 229, 101);
}

.sub-title{
    width: 100%;
    font-size: 30px;
    text-align: center;
    color: rgb(101, 212, 231);
}

.content-area{
    display: flex;
}

.content-null-area{
    width: 2%;
}

.attach-rules{
    width: 96%;
    min-height: 72vh;
    font-size: 20px;
    text-align: center;
    color: rgb(101, 212, 231);
    background-color: rgba(32, 32, 32, 0.7);
    font-weight: 100;
    text-shadow: #000000 1px 1px 2px;
}

.warn-highlight{
    color: rgb(216, 164, 205);
    font-weight: 700;
    display: inline;
}

.tips-highlight{
    color: rgb(231, 229, 101);
    font-weight: 500;
    display: inline;
}

.normal-highlight{
    color: rgb(101, 212, 231);
    font-weight: 100;
    display: inline;
}

#font-tips{
    font-family: 'UbuntuMono', sans-serif;
}

.divide-line{
    height:5px;
    margin: 0px;
    background: repeating-linear-gradient(
        0deg,
        rgba(101, 212, 231, 0) 0px,
        rgb(101, 212, 231) 2.5px,
        rgba(101, 212, 231, 0) 5px
    )
}

select{
    border-bottom: 3px solid rgb(231, 229, 101); 
    outline: none;   
    padding: 10px; 
    font-size: 16px;
    color: rgb(101, 212, 231);
    background: rgb(32, 32, 32);
}

input{
    border-bottom: 3px solid rgb(231, 229, 101); 
    background: none; 
    outline: none;   
    padding: 10px; 
    font-size: 16px;
    color: rgb(231, 229, 101);
}

input::placeholder {
    color: rgba(101, 212, 231, 0.5);
    opacity: 1; 
}

.button-style{
    border: 3px solid rgb(231, 229, 101);
}

footer {
    margin: 0;
    display: grid;
    justify-content: center;

}

.foot-info{
    font-size: 15px;
    color: rgb(101, 212, 231);
    justify-content: center;
    margin: 10px 0px 10px 0px;
}