body {padding: 0;border: 0;margin: 0;background-color: #eee;overflow: hidden;}
::-webkit-scrollbar {width: 0;}
::-webkit-scrollbar:horizontal {height: 0;}

#topbar {position: absolute;width: 100vw;height: 7vh;left: 0;top: 0;z-index: 1000;}
#topbar .waves-effect {position: absolute;width: 7vh;height: 7vh;}
#topbar .waves-effect img {position: absolute;width: 4vh;height: 4vh;left: 1.5vh;top: 1.5vh;}
#menu {left: 0;top: 0;}
#logo {position: absolute;width: calc(100vw - 35vh) !important;height: 7vh;left: 7vh;top: 0;font-size: 3vh;display: flex;justify-content: center;align-items: center;}
#brightness {width: 0 !important;height: 0 !important;right: 28vh;top: 0;}
#search {right: 21vh;top: 0;}
#submit {right: 14vh;top: 0;}
#message {right: 7vh;top: 0;}
#user {right: 0;top: 0;}
#new_message_num {
    position: absolute;width: 3.5vh;height: 2.5vh;right: 7.5vh;bottom: 1vh;
    font-size: 2vh;border-radius: 0.7vh;display: flex;justify-content: center;align-items: center;z-index: 998;pointer-events: none;
}

#userbar {position: absolute;width: 100vw;height: 11vh;left: 0;top: 7vh;border-bottom: 1px solid #e0e0e0;}
#avatar {position: absolute;width: 8vh;height: 8vh;left: 1.5vh;top: 1.5vh;}
#avatar img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
#username {position: absolute;width: calc(100vw - 12.5vh);height: 4vh;left: 11vh;top: 1.7vh;font-size: 2.7vh;display: flex;white-space: nowrap;align-items: center;overflow-x: auto;overflow-y: hidden;}
#profile {position: absolute;width: calc(100vw - 12.5vh);height: 3.5vh;left: 11vh;bottom: 1.7vh;font-size: 2.4vh;display: flex;white-space: nowrap;align-items: center;overflow-x: auto;overflow-y: hidden;}
.badge {height: 90%;font-size: 2.2vh !important;border-radius: 0.7vh;padding: 1vh !important;display: flex;justify-content: center;align-items: center;flex-shrink: 0;}

#databar {
    position: absolute;width: 100vw;height: 9vh;left: 0;top: 18vh;
    border-bottom: 1px solid #e0e0e0;padding-left: 14vw;padding-right: 14vw;display: flex;
}
#databar .num_card {position: relative;width: 18vw;height: 100%;left: 0;top: 0;}
#databar .num_card .num {position: absolute;width: 100%;height: 55%;left: 0;top: 0;font-size: 3.5vh;display: flex;justify-content: center;align-items: center;}
#databar .num_card .tip {position: absolute;width: 100%;height: 45%;left: 0;top: 55%;font-size: 2.2vh;display: flex;justify-content: center;align-items: flex-start;}

#videobar {position: absolute;width: 100vw;height: 73vh;left: 0;top: 27vh;}
#videobar_title {
    position: absolute;width: 100vw;height: 6vh;left: 0;top: 0;
    font-size: 2.3vh;font-weight: bold;padding-left: 2vh;padding-right: 2vh;border-bottom: 1px solid #e0e0e0;display: flex;justify-content: start;align-items: center;
}
#videobar_container {
    position: absolute;width: 100vw;height: 67vh;left: 0;top: 6vh;
    display: flex;flex-wrap: wrap;align-content: flex-start;overflow-x: hidden;overflow-y: auto;padding-left: 1vw;padding-right: 1vw;
}
.video_card {position: relative;width: 49vw;height: calc(30vw + 9vh);left: 0;top: 0;}
.video_cover {position: absolute;width: 47vw;height: 27vw;left: 1vw;top: 2vw;border-radius: 1vw;overflow: hidden;}
.video_cover img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
.video_avatar {position: absolute;width: 5vh;height: 5vh;left: 1vw;top: calc(30vw + 0.5vh);border-radius: 1vw;overflow: hidden;}
.video_avatar img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
.data {position: absolute;width: 12vw;height: 5vw;font-size: 3vw;background-color: rgba(0, 0, 0, 0.3);border-radius: 1vw;display: flex;justify-content: center;align-items: center;white-space: nowrap;}
.video_view_count {left: 2vw;top: 23vw;}
.video_like_count {left: 15vw;top: 23vw;}
.video_favorite_count {left: 28vw;top: 23vw;}
.video_title {
    position: absolute;width: calc(47vw - 6vh);height: 6vh;left: calc(1vw + 6vh);top: 30vw;
    line-height: 1.5;font-size: 2vh;overflow: hidden;word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;white-space: pre-wrap;
}
.video_subtitle {
    position: absolute;width: 47vw;height: 3vh;left: 1vw;top: calc(30vw + 6vh);
    font-size: 2vh;overflow: auto;white-space: nowrap;overflow-x: auto;overflow-y: hidden;display: flex;align-items: center;
}
#bottom {position: relative;width: 98vw;height: 2vw;left: 0;top: 0;}

#login_prompt {position: absolute;width: 100vw;height: 93vh;left: 0;top: 7vh;z-index: 999;}
#waao {position: absolute;width: 70vw;height: 70vw;left: 15vw;top: 15vh;}
#waao img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
#tip {
    position: absolute;width: 70vw;height: 15vw;left: 15vw;top: calc(15vh + 70vw);
    font-size: 6vw;display: flex;justify-content: center;align-items: center;cursor: pointer;
}

#mask {position: absolute;width: 100vw;height: 100vh;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.2);z-index: 1001;}

#sidebar {
    position: absolute;width: 80vw;height: 100vh;left: -80vw;top: 0;z-index: 1002;
    display: flex;flex-wrap: wrap;align-content: flex-start;
}
#cover {position: relative;width: 100%;height: 22vh;left: 0;top: 0;}
#cover img {width: 100%;height: 100%;object-fit: cover;}
.sidebar_button {position: relative;width: 100%;height: 6vh;left: 0;top: 0;}
.sidebar_button img {position: absolute;width: 4vh;height: 4vh;left: 1vh;top: 1vh;}
.sidebar_button span {position: absolute;width: calc(100% - 7vh);height: 4vh;left: 6vh;top: 1vh;font-size: 2.2vh;display: flex;align-items: center;}

.toast {background-color: #81d4fa !important;color: white !important;}