style.css

.card-body {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    padding: 0px;
    color: var(--bs-card-color);
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

html, body{
    margin: 0;
    justify-content: center;
    align-items: center;
}

#body_div{
    width: 100%;
    height: 1025px;
}

#tabset{
    position: fixed;
    width: 100%;
    height: 40px;
    top: 0;
    left: 10px;
    background: white;
    z-index: 100;
}

#header_div{
    position: fixed;
    width: 100%;
    height: 60px;
    left: 0;
    top: 40px;
    background: #d9d9d9;
    z-index: 100;
}

#lower_header_div{
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0;
    top: 100px;
}



#master_div{
    position: absolute;
    width: 100%;
    height: 78%;
    top: 160px;
}

#chrome_left_side{
    width: 35%;
    margin-left: 20px;
    height: 100%;
    float: left;
    background: red;
}
#chrome_right_side{
    width: 59%;
    height: 100%;
    float: left;
    background: yellow;
}

#chrome_left_side_top{
    width: 100%;
    height: 15%;
    background: green;
}

#logo_type_1{
     width: 23%;
     float: left;
     height: 100%;
     background: brown;
}

#logo_type_2{
    width: 77%;
    float: left;
    height: 60%;
    background: #8A2BE2;
    margin-top: 30px;
}


#chrome_left_side_bottom{
    width: 100%;
    height: 50%;
    background: purple;
}

#chrome_info_holder{
    width: 100%;
    height: 35%;
    background: yellow;
}

#chrome_right_side_top{
    width: 100%;
    height: 50%;
    background: blue;
}

#chrome-right_side_bottom{
    width: 100%;
    height: 50%;
    background: pink;
}


#site_name_div{
    width: 46.5%;
    float: left;
    height: 20%;
    background: blue;
}

#search_name_div{
    width: 30%;
    float: left;
    height: 20%;
    background: orange;
    padding-top: 27px;

}


#footer_div{
    position: relative;
    width: 100%;
    height: 10%;
    left: 0%;
    top: 0%;
}

#logo_div{
    height: 150px;
    width: 700px;
    position: relative;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

#logo{
    font-size: 100px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.letter-0 { color: #4585f4; }
.letter-1 { color: #ea4335; }
.letter-2 { color: #fbbc05; }
.letter-3 { color: #4585f4; }
.letter-4 { color: #34a853; }
.letter-5 { color: #ea4335; }

#search_bar_div{
    position: relative;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    height: 40px;
    width: 700px;
    display: flex;
}

#search_div{
    width: 600px;
    height: 40px;
}

#search{
    width: 600px;
    height: 40px;
    border-radius: 25px;
    border: 2px solid #d9d9d9;
    color: #C7C7C7;
}

#lupa_div{
    width: 40px;
    height: 40px;
}

#lupa{
    width: 24px;
    height: 24px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#popup_window_div{
    width: 300px;
    height: 400px;
    position: relative;
    left: 82%;
    top: -20%;
    z-index: 10;
    justify-content: center;
    text-align: center;
}

#locker_button_div{
    width: 63px;
    height: 55px;
    background: #EFF4FC;

    border-radius: 15px;

    position: relative;
    left: 50%;
    top: 28%;
    transform: translate(-50%, -50%);
}

#locker_button_div:hover{
    background: #CBCFD6;
}

#locker_button{

    position: absolute;
    padding: 0px;
    z-index: 1;
    opacity: 0;

}

#locker_button:hover{
    background-color: #2980b9;
}

#locker_button:hover + .hide{
    display: block;
    color: green;
    width: 600px;
    height: 100px;

    position: relative;
    left: -300%;
    top: 120%;
}

.hide {
  display: none;
  width: 200px;
  height: 100px;
}

#popup_window{
    width: 300px;
    height: 200px;
    background: #E9EEF6;
    border-radius: 25px;

}

#first_person_login_div, #second_person_login_div, #third_person_login_div{
    height: 40px;
    width: 90%;
    background: #F8FAFD;
    margin-left: auto;
    margin-right: auto;

    border-radius: 10px;
}

#first_person_login_div{
    padding-top: 20px;
    margin-top: 20px;
}

#first_person_login_div:hover{
    background: #BABEC4;
}

#second_person_login_div:hover{
    background: #BABEC4;
}

#third_person_login_div:hover{
    background: #BABEC4;
}



#second_person_login_div, #third_person_login_div{
    padding-top: 10px;
    margin-top: 10px;
}

#first_person_login_left{
    width: 30%;
    height: 170%;
    float: left;
    padding-top: -18px;
    margin-top: -18px;
}

#second_person_login_left, #third_person_login_left{
     width: 30%;
     height: 110%;
     float: left;
}

#third_person_login_left, #second_person_login_left{
    padding-top: -6px;
    margin-top: -6px;
}

#first_person_login_right{
    /* background: blue; */
    width: 70%;
    height: 170%;
    float: left;
    padding-top: -10px;
    margin-top: -10px;
    text-align: center;
    justify-content: center;
    font-family: "Lucida Console", "Courier New", monospace;
}

#second_person_login_right, #third_person_login_right{
  /*  background: blue; */
    width: 70%;
    height: 110%;
    float: left;
    text-align: center;
    justify-content: center;
    font-family: "Lucida Console", "Courier New", monospace;
}


#popup_1row_div, #popup_2row_div, #popup_3row_div, #popup_4row_div{
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    z-index: 20;
}

#button11_div, #button12_div, #button13_div{
    height: 50%;
    width: 100%;
}

#button11, #button11_img, #button12, #button12_img, #button13, #button13_img{
    height: 40px;
    width: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#button11, #button12, #button13{
    z-index: 11;
    opacity: 0;
}

#button11_img, #button12_img, #button13_img{
    z-index: 10;
}


#menu_div{
    float: right;
    height: 100%;
    width: 7%;
}

#menu_button_div, #menu_button, #menu_image{
    height: 40px;
    width: 40px;
}

#menu_button_div{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#menu_button{
    position: absolute;
    padding: 0px;
    z-index: 1;
    opacity: 0;
}

#person_1_button{
    padding: 0px;
    z-index: 1;
    opacity: 0;
}

#person_2_button{
    padding: 0px;
    z-index: 1;
    opacity: 0;
}

#person_3_button{
    padding: 0px;
    z-index: 1;
    opacity: 0;
}


#menu_image{
    position: absolute;
    z-index: 0;
}

#url_div{
    width: 90%;
    height: 100%;
    right: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#url, #url2, #url3{
    width: 98%;
    height: 40px;
    border-radius: 25px;
    position: absolute;
    float: left;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid #d9d9d9;
}



#fun_buttons{
    width: 8%;
    height: 26px;
    left: 1%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
}

#small_button{
    width: 26px;
    height: 26px;
}

#padlock_graphics{
    width: 40px;
    height: 40px;
    position: absolute;
    transform: translateY(-50%);
    top: 47%;
    left: 17%;
}


#ILetter_login{
    width: 35px;
    height: 35px;
}

#GLetter_login{
    width: 35px;
    height: 35px;
}

#ALetter_login{
    width: 35px;
    height: 35px;
}


#text_output{
    height: 100px;
    width: 100px;

}

#activity_title{
    width: 50%;
    height: 100px;
    margin: auto;
    padding: 10px;
    text-align: center;
   /* border: 3px solid green; */
}

#main_activity_container{
    width: 100%;
    height: 720px;
    margin-top: 15px;

    margin-left: 20px;
    margin-right: auto;

    background: orange;

}

#sub_panel_main_left_activity{

    width: 14%;
    height: 650px;

    float: left;
}

#sub_panel_main_left_chooser_activity{

    width: 100%;
    height: 325px;

    background: pink;
}

#sub_panel_main_left_additional_activity{

    width: 100%;
    height: 325px;
    position: relative;

    background: yellow;

}

#sub_panel_main_left_chooser_together_activity{

    width: 100%;
    height: 100px;

    background: orange;

}

#btn_activity_type_changer_div{

}


#sub_panel_main_left_chooser_devices_activity{

    width: 100%;
    height: 225px;


}


#sub_panel_main_right_activity{

    width: 86%;
    height: 650px;

    background:blue;
    float: left;
}


#apps_to_choose_activity{
    width: 40%;
    height: 80px;
    margin-top: 20%;

    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
   /* background: orange; */
}

#first_app_to_choose_activity, #second_app_to_choose_activity, #third_app_to_choose_activity,
#fourth_app_to_choose_activity, #fifth_app_to_choose_activity
{
    width: 13%;
    height: 100%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    /* background: red; */

    justify-content: center;
    align-items: center;
}

#second_app_to_choose_activity{
   /* background: green; */
}

#third_app_to_choose_activity{
   /* background: blue; */
}

#fourth_app_to_choose_activity{
   /* background: purple; */
}

#fifth_app_to_choose_activity{
   /* background: yellow; */
}

#chrome_image_activity, #playstore_image_activity, #youtube_image_activity, #gmail_image_activity,
#photos_image_activity{
    position: absolute;
    padding-right: 5px;

    height: 8%;
    width: 4%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
   /* background: white; */
}

#chrome_image_additional{
    height: 8%;
    width: 4%;
    padding-top: px;
    position: absolute;
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    z-index: 0;
}


#youtube_image_activity, #gmail_image_activity, #gmail_image_activity{
    height: 8%;
    width: 5%;
}

#chrome_activity_button, #playstore_activity_button, #youtube_activity_button, #gmail_activity_button,
#photos_activity_button{
    position: absolute;
    padding: 0px;
    z-index: 1;
    opacity: 0;
}

#activity_plot_1_space, activity_plot_2_space{
    float: left;

}

#activity_plot_1_space, #activity_plot_2_space, #activity_plot_3_space, #activity_plot_4_space,
#activity_plot_5_space{
    width: 32%;
    height: 48%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    background: red;

    justify-content: center;
    align-items: center;
}

#activity_plot_2_space{

    background: yellow;
    margin-left: 10px;
}

#activity_plot_3_space{

    background: green;
    margin-left: 10px;
}

#activity_plot_4_space{

    background: brown;
    margin-top: 32px;
}

#activity_plot_5_space{

    background: pink;
    margin-top: 32px;
    margin-left: 10px;
}

#activity_plot_6_space{

    width: 32%;
    height: 48%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    background: red;

    margin-top: 32px;

    justify-content: center;
    align-items: center;

    background: purple;
    margin-left: 10px;
}

#map{
    height: 700px;
    z-index: 10px;
}


#youtube_logo{
    margin-top: 75px
}

#youtube_icon{
    height: 15%;
    width: 15%;
    margin: auto;
}



#videos_div{
    margin-top:20px
    height: 550px;
    background: red;
    overflow: hidden;
}


#youtube_videos_charts{
    float: left;
    width: 68%;
    height: 550px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}


#youtube_plot_chooser{
    float: left;
    width: 32%;
    height: 550px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#video_title{
    width: 80%;
    background: white;
    height: 40px;
    display: flex;

}


#youtube_play_button{
    background: white;
    height: 50px;
    width: 80%;
    margin-top: 10px;
    display: flex;
}

#choose_user{
    float: left;
    width: 60px;
    height: 50px;

}

#gabi_pic {
    height: 55px;
    width: 55px;

}


#nick_and_subscribers{
    float: left;
    width: 30%;
    height: 100%;
    background: white;
    margin-left: 10px;
    display: flex;
    flex-direction: column;

}

#nick{
    width: 100%;
    height: 50%;
    background: white;
}

#which_person{
    font-weight: bold;
    font-size: 110%;
}


#subscribers_count{
    width: 100%;
    height: 50%;
    background: white;
}

#how_many_subscribers{
    font-size: 80%;
}


#subscribe{
    float: left;
    width: 20%;
    height: 100%;
    background: #e9e9e9;
    margin-left: 10px;
    border-radius: 50px;
    display: flex;
    position: relative;
}

#bell{
    float: left;
    width: 33%;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

#subscribe_bell{
    height: 60%;
    width: 60%;
    position: absolute;
}

#subscribe_text{
    position: absolute;
    margin-left: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#click_subscribe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}


#likes{
    float: left;
    width: 20%;
    height: 100%;
    margin-left: 250px;
    background: #e9e9e9;
    border-radius: 50px;
    display: flex;

}

#like{
    float: left;
    width: 30%;
    height: 80%;
    display: flex;
    margin-left: 10%;
    margin-top: 5%;
}


#like_button{
    width: 85%;
    height: 85%;
}


#dislike{
    float: left;
    width: 30%;
    height: 80%;
    display: flex;
    margin-left: 20%;
    margin-top: 5%;

}

#dislike_button{
    width: 85%;
    height: 85%;
}



#youtube_play_plot{
    background: #111111;
    width: 80%;
    height: 80%;
    border-radius: 10px;
}



#comments_div{
    background: white;
    height: 700px;
    overflow: hidden;

}


#youtube_comment_charts{
    float: left;
    width: 68%;
    background: white;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


}

#youtube_comment_buttons{
    float: left;
    width: 32%;
    height: 700px;
    background: white;

}

#comments_section{
    width: 80%;
    height: 60%;
    margin-top: 10px;
    border-radius: 10px;

}

#comment1{
    width: 100%;
    height: 20%;
    border-bottom: 1px solid #e9e9e9;

}

#profile_picture1{
    float: left;
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#frenchie_pic{
    width: 55px;
    height: 55px;
}


#comment1_text{
    float: left;
    width: 90%;
    height: 100%;
}

#nickname1{
    margin-top:2%;
    width: 100%;
    height: 25%;
    background: white;
    font-size: 85%;
    font-weight: bold;
}

#text1{
    width: 100%;
    height: 50%;
}



#comment2{
    width: 100%;
    height: 20%;
    margin-top: 1%;
    border-bottom: 1px solid #e9e9e9;
}

#profile_picture2{
    float: left;
    width: 10%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

#whippet_pic{
    width: 55px;
    height: 55px;
}


#comment2_text{
    float: left;
    width: 90%;
    height: 100%;
}

#nickname2{
    margin-top:2%;
    width: 100%;
    height: 25%;
    background: white;
    font-size: 85%;
    font-weight: bold;
}

#text2{
    width: 100%;
    height: 50%;
}



#comment3{
    width: 100%;
    height: 20%;
    margin-top: 1%;
    border-bottom: 1px solid #e9e9e9;
}

#profile_picture3{
    float: left;
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

#corgi_pic{
    width: 55px;
    height: 55px
}

#comment3_text{
    float: left;
    width: 90%;
    height: 100%;

}

#nickname3{
    margin-top:2%;
    width: 100%;
    height: 25%;
    background: white;
    font-size: 85%;
    font-weight: bold;
}

#text3{
    width: 100%;
    height: 50%;
}



#video_description{
    width: 80%;
    height: 120px;
    background: #e9e9e9;
    border-radius: 10px;

}

#description_caption{
    font-weight: bold;
    font-size: 110%;
    width: 95%;
    margin-left: 2.5%;
}

#description_text{
    font-size: 80%;
    width: 95%;
    margin-left: 2.5%;
}


#comment_count{
    margin-top: 20px;
    background: white;
    height: 50px;
    width: 80%;
    display: flex;
}

#comments{
    font-weight: bold;
    font-size: 120%;
}


#title_of_video{
    font-weight: bold;
    font-size: 130%;
}


#comments_count_output{
    float: left;
    width: 40%;
    height: 100%;
    align-items: center;
    justify-content: center;
}



#top_channels{
    margin-top: 10px;
    clear: both;
    background: #e9e9e9;
    height: 28%;
    width: 90%;
    border-radius: 10px;

}

#time_watch{
    margin-top: 30px;
    height: 28%;
    background: #e9e9e9;
    width: 90%;
    border-radius: 10px;
}


#watching_date{
    height: 20%;
    margin-top: 30px;
    background: white;
    width: 90%;

}