.yx-game-settings {
    width: 100%;
    height: 100%;
    background-image: url("/static/image/menu/huru.jpg");
    background-size: 100% 100%;
    user-select: none;
}

.yx-game-settings-login {
    height: 41vh;
    width: 20vw;
    position: relative;
    top :50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,0.7);
}

.yx-game-settings-login-title {
    color: white;
    font-size:3vh;
    text-align: center;
    height:7vh;
    padding-top: 2vh;
    margin-bottom:2vh;

}

.yx-game-settings-login-username {
    display: block;
    height: 7vh;
}

.yx-game-settings-login-password {
    display: block;
    height: 7vh;
}

.yx-game-settings-login-submit {
    height:7vh;
    display:block;
}

.yx-game-settings-login-qq {
    display: block;
    height: 7vh;
}

.yx-game-settings-item {
    width:100%;
    height:100%;
}

.yx-game-settings-item > input {
    width: 90%;
    line-height: 3vh;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.yx-game-settings-item > button {
    color: white;
    background-color: #4CAF50;
    width: 90%;
    line-height: 3vh;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.yx-game-settings-login-error {
    color: red;
    font-size: 0.8vh;
    display: inline;
    float: left;
    padding-left: 1vw;
}
.yx-game-settings-login-option {
    color: white;
    font-size: 2vh;
    display: inline;
    float: right;
    padding-right:1vw;
    cursor: pointer;

}

.yx-game-settings-login-qq > img {
    position: relative;
    top :50%;
    left:50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    display:block;
}

.yx-game-settings-login-qq > div {
    color: white;
    font-size: 1.5vh;
    text-align: center;
    display: block;
}

.yx-game-settings-register {
    height: 49vh;
    width: 20vw;
    position: relative;
    top :50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,0.7);
}

.
.yx-game-menu {
    width: 100%;
    height: 100%;
    background-image: url("/static/image/menu/qiao.jpg");
    background-size: 100% 100%;
    user-select: none;
}



.yx-game-menu-field {
    width: 40vw;
    position: relative;
    top: 25vh;
    left: 20vw;

}


.yx-game-menu-field-item {
    color: red;
    height: 10vh;
    width: 40vw;
    font-size : 8vh;
    font-style: italic;
    padding: 1vh;
    text-align: center;
    background-color: rgba(39,21,28,0.6);
    border-radius: 10px;
    letter-spacing: 0.5vw;
    cursor: pointer;

}


.yx-game-menu-field-item:hover {
    transform: scale(1.2);
    transform: 100ms;

}


.yx-game-menu-unity-file {
    width: 40vw;
    position: relative;
    top: 25vh;
    left: 20vw;

}

.yx-game-menu-unity-file-item {
    color: red;
    height: 10vh;
    width: 40vw;
    font-size : 8vh;
    font-style: italic;
    padding: 1vh;
    text-align: center;
    background-color: rgba(39,21,28,0.6);
    border-radius: 10px;
    letter-spacing: 0.5vw;
    cursor: pointer;

}

.yx-game-menu-unity-file-item:hover {
    transform: scale(1.2);
    transform: 100ms;

}

.yx-game-playground {
    width: 100%;
    height: 100%;
    user-select: none;
    background-color: grey;
}

.yx-game-playground > canvas {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

.yx-game-chat-field-history {
    position: absolute;
    top: 66%;
    left: 20%;
    transform: translate(-50%,-50%);

    width: 20%;
    height:32%;

    color: white;
    font-size:2vh;

    padding:5px;
    overflow: auto;

}

.yx-game-chat-field-history::-webkit-scrollbar {
    width:0;
}

.yx-game-chat-field-input {
    position: absolute;
    top: 86%;
    left: 20%;
    transform: translate(-50%,-50%);
    width: 20%;
    height:3vh;

    color:white;
    font-size:2vh;
    background-color: rgba(222,225,230,0.2);
}