Windows Chat Scrollbox ♡

<!-- CR Solielios if you wanna but i don't really care as long as you don't put it in your own resource carrd, this belongs in limonysal -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<div class="chat">
    <div class="ctb"> <span class="ctl">
<i class="far fa-comments"></i>&nbsp;&nbsp; <mark>title</mark>
</span> <span class="cti">
<i class="material-icons">minimize</i>
<i class="material-icons">web_asset</i>
<i class="material-icons">close</i>
</span> </div>
    <div class="cmain"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
    <div class="cb"> <span class="cbtext">
<i class="material-icons">format_color_text</i>
<i class="material-icons">format_color_fill</i>
</span> <i class="material-icons">format_bold</i> <i class="material-icons">format_italic</i> <i class="material-icons">format_underlined</i> </div>
</div>
<style>
@font-face {
    font-family: sweetheart;
    src: url(https://dl.dropbox.com/s/qsbxaucivq93z8r/sweet_heart.ttf);
}

@font-face {
    font-family: sant joan;
    src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}

.chat {
    width: 300px;
    margin: 20px auto;
    padding: 5px;
    text-shadow: .6px .6px rgba(160, 160, 160, 1);
    box-shadow: .2px .2px 5px rgba(150, 150, 150, .6);
    background: #eee;
    border-radius: 4px;
}

.ctb {
    background: linear-gradient(90deg, rgba(135, 184, 236, 1) 0%, rgba(203, 197, 211, 1) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px
}

.ctl .far {
    font-size: 16px;
    color: #efefef;
    position: relative;
    top: 0px;
    left: 2px;
}

.chat .material-icons {
    font-size: 12px;
    padding: 3px;
}

.cti .material-icons {
    background: #eee;
    border-radius: 2px;
}

.chat .cbtext .material-icons {
    font-size: 9px;
    position: relative;
    top: -1px;
}

.cmain {
    border: 1px solid rgba(150, 150, 150, .2);
    height: 100px;
    margin: 5px 0px 0px 0px;
    background: #fcfcfc;
    overflow: scroll;
    overflow-x: hidden;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: sweetheart;
}

.cb {
    display: flex;
    justify-content: center;
    margin: 5px 0px 0px;
}

mark {
    background: black;
    border: 1px solid #000;
    border-radius: 15px;
    box-shadow: 0px 0px 2px #000;
    font-family: sant joan;
    color: white;
    text-shadow: linear-gradient(90deg, rgba(135, 184, 236, 1) 0%, rgba(203, 197, 211, 1) 100%);
    padding-left: 10px;
    padding-right: 10px;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 0px 1px;
    cursor: hidden;
}

#scroll {}

.scroll {}


/* width */

::-webkit-scrollbar {
    width: 10px;
}


/* Track */

::-webkit-scrollbar-track {}


/* Handle */

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(246, 206, 206, 1) 0%, rgba(206, 216, 246, 1) 100%);
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(246, 206, 206, 1) 0%, rgba(255, 250, 177, 1) 0%, rgba(206, 216, 246, 1) 100%);
}
</style>