body {/* The background of the website */
    background-color: rgb(37,30,36);
    background-image: linear-gradient(to right, rgb(37, 30, 36), rgba(34, 36, 26, 0.856));
}

.title_bar { /* The title bar div, where everything above <hr> in body should be */ 
    text-align: center;
    justify-content: center;
    align-items: center;
}

.title_links { /* Main content of the title bar, which would likely be the profile pictures and links.*/
    display: flex;
    justify-content:center;
    align-items: center;

}

.index_title_bar { /* Title bar div but for the home page which has a different positioning from the rest of them */ 
  text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-36.5%, -50%) 
}

.index_title_links { /* Links for the title bar but for the home page */
    display: flex;
    position: relative;
    transform: translate(5%);
    

}

.background_dim { /* some square i found out how to make on youtube. https://www.youtube.com/watch?v=E4jjCU0ljz0 */
    background-color: rgba(0, 0, 0, 0.301);
    display: flex;
    position: fixed;
    width: 55%;
    height: 2000px;
    transform: translate(-10%, -5%);

    
}

h1 { /* Easiest to read, used for the title text. */
    color:rgb(231, 216, 231);
   font-family: "Poppins", sans-serif;
    font-size:35px;
    line-height: 35px;
}

h2 { 
    color:rgb(231, 216, 231);
    font-family: "Poppins", sans-serif;
    font-size:25px;
}

h3 {
    color:rgb(255, 209, 255);
    font-family: "Poppins", sans-serif;
    font-size:20px;
}

h5 {
    color:rgb(196, 170, 196);
    font-family: "Poppins", sans-serif;
    font-size:20px;
}

h6 {
    color:rgb(133, 121, 133);
    font-family: "Poppins", sans-serif;
    font-size:12px;
}

p {
    color: rgb(255, 231, 253);
    font-family: "Poppins", sans-serif;
    font-size:15px;
}

hr {
    color:rgb(255, 32, 255);
}

.channel_image1 {
    border-radius: 100px;
    padding: 20px;
 display: wrap;
justify-content: flex-start;
}

.channel_image2 {
    border-radius: 100px;
    padding: 20px;
display: wrap;
justify-content: flex-end;
    transform: scaleX(-1); /* flip the image around */
}

a {
    text-decoration-color: rgb(255, 250, 173);
     color:rgb(196, 170, 196);
}

iframe {
    border-radius: 20px;
}