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;}
#exit {left: 0;top: 0;}
#search_term {
    position: absolute;width: calc(99vw - 14vh);height: 4vh;left: 7vh;top: 1.5vh;
    font-size: 2.5vh;padding-left: 0.5vw;padding-right: 0.5vw;border: none;border-radius: 0;border-bottom: 2px solid white;
}
#search_term:focus {border-bottom: 2px solid #fff;box-shadow: 0 1px 0 0 #fff;}
#search {right: 0;top: 0;}

#choicebar {position: absolute;width: 100vw;height: 5.5vh;left: 0;top: 7vh;border-bottom: 1px solid #e0e0e0;}
.tabs .tab {height: 100%;}
.tabs .tab a {height: 100%;display: flex;justify-content: center;align-items: center;font-size: 2.3vh;color: black;padding-left: 3vh;padding-right: 3vh;}
.tabs .tab a:hover {color: #81d4fa;}
.tabs .tab a.active {background-color: #ffffff;color: #81d4fa;}
.tabs .indicator {background-color: #81d4fa;}

#containerbar {
    position: absolute;width: 100vw;height: 87.5vh;left: 0;top: 12.5vh;
    display: flex;flex-wrap: wrap;align-content: flex-start;overflow-x: hidden;overflow-y: auto;
}

.search_container {
    position: relative;width: 100vw;height: auto;left: 0;top: 0;
    display: flex;flex-wrap: wrap;align-content: flex-start;overflow-x: hidden;overflow-y: auto;
}
#videobar {padding: 0 1vw;}

#userbar_2 {
    position: relative;width: 100vw;height: auto;left: 0;top: 0;
    padding: 0 1vw;display: flex;overflow-y: hidden;overflow-x: auto;
}
.user_card_2 {position: relative;width: 26vw;height: calc(17vw + 10vh);left: 0;top: 0;border-radius: 1vw;border: 1px solid #e0e0e0;margin: 1vw;margin-top: 2vw;flex-shrink: 0;}
.user_avatar_2 {position: absolute;width: 15vw;height: 15vw;left: 5.5vw;top: 1.5vw;}
.user_avatar_2 img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
.user_title_2 {
    position: absolute;width: calc(100% - 2vw);height: 3.5vh;left: 1vw;top: 17vw;
    font-size: 2.5vh;overflow: hidden;white-space: nowrap;display: flex;align-items: center;
}
.user_subtitle_2 {
    position: absolute;width: calc(100% - 2vw);height: 5.5vh;left: 1vw;top: calc(17vw + 3.5vh);
    font-size: 2.2vh;line-height: 1.25;overflow: hidden;word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;white-space: pre-wrap;
}

.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;
}

.blog_card {position: relative;width: 100vw;height: 16vh;left: 0;top: 0;border-bottom: 1px solid #e0e0e0;}
.blog_avatar {position: absolute;width: 7vh;height: 7vh;left: 1vh;top: 1vh;}
.blog_avatar img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
.blog_title {
    position: absolute;width: calc(100% - 10vh);height: 3vh;left: 9vh;top: 1vh;
    font-size: 2.4vh;overflow: hidden;white-space: nowrap;display: flex;align-items: center;
}
.blog_subtitle {
    position: absolute;width: calc(100% - 10vh);height: 4vh;left: 9vh;top: 4vh;
    font-size: 2.2vh;overflow: hidden;white-space: nowrap;display: flex;align-items: center;
}
.blog_content {
    position: absolute;width: calc(100% - 10vh);height: 7vh;left: 9vh;top: 8vh;
    font-size: 2.4vh;overflow: hidden;word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;white-space: pre-wrap;
}

.user_card {position: relative;width: 100vw;height: 9vh;left: 0;top: 0;border-bottom: 1px solid #e0e0e0;}
.user_avatar {position: absolute;width: 7vh;height: 7vh;left: 1vh;top: 1vh;}
.user_avatar img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
.user_title {
    position: absolute;width: calc(100% - 10vh);height: 3.5vh;left: 9vh;top: 1vh;
    font-size: 2.4vh;overflow: hidden;white-space: nowrap;display: flex;align-items: center;
}
.user_subtitle {
    position: absolute;width: calc(100% - 10vh);height: 3.5vh;left: 9vh;top: 4.5vh;
    font-size: 2.2vh;overflow: hidden;white-space: nowrap;display: flex;align-items: center;
}