#emoji-container{text-align: center; display: flex; justify-content: center;}
.emoji{cursor: pointer; padding: 7px 7px; margin: 0; border-radius: 999px; transition: 1s;}
.emoji:hover{background: hsl(185deg 78% 31% / 50%); transition: 0s; display: inline-block; transform: scale(1.5); z-index: 2;}


.ch {
    padding: 30px 30px 20px 30px;
    position: relative;
    background: #11565f;
    transition: all 0.5s ease;
    box-shadow: inset 0px 5px 0px 10px #000e102b, inset 7px 5px 0px 0px #000e102b, inset -7px 5px 0px 0px #000f1121, inset 0px -8px 0px 0px #176b78, inset -30px 220px 80px 0px #00939c70, 0px 60px 20px #00151754;
    transform: perspective(100px) rotateY(0deg) rotateX(3deg) rotateZ(0deg) scaleX(0.9) scaleY(0.9);
    border-radius: 20px 20px 40px 40px;
    top: -70px;}

.ch:hover {
    transform: perspective(100px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scaleX(1.0);
    transition: all 0.5s ease;
    box-shadow: inset 0px 0px 2px #37fafd8c;
    background: #11565f;
    top: 0px;}



#chat {
    border: 0px;
    font-size: 20px;
    padding: 0 6px;
    height: 300px;
    overflow-y: auto;
    margin-bottom: 17px;
    border-radius: 10px;
    line-height: 1.5;
    /* background: hsl(187 67% 22% / 1); */
    /* box-shadow: inset 0px 2px 5px hsl(187deg 20% 9% / 37%); */}


input[type="text"] {
    width: -webkit-fill-available;
    padding: 13px 20px;
    font-size: 23px;
    color: #fff;
    max-length: 200;
    border-radius: 999px;
    border: none;
    background: hsl(187deg 56.14% 19.26%);
    box-shadow: inset 0px 1px 6px hsl(187deg 20% 9% / 49%);}


button 
    {text-align: center;
    padding: 13px 50px;
    min-width: 150px;
    border-radius: 999px;
    border: 1px solid #ffffff26;
    white-space: nowrap;
    background: #ffffff26;
    display: inline-block;
    font-size: 20px;
    margin: 10px 0;
    cursor: pointer;
    color:#fff;}

button:hover
    {background: #ffffff50;
    transition: all 0.5s cubic-bezier(0.43, 0, 0.25, 1);}

input:focus, textarea:focus, select:focus 
    {outline: none !important;}

.timestamp 
	{font-size: 12px;
	color: hsl(190deg 100% 50% / 80%); margin-right: 5px; }

.admin 
	{color: aqua; 
	font-weight: bold; }


.ch h1{
    text-transform: uppercase; color: aqua; font-size: 40px; position: relative; z-index: 1; text-align: center; text-shadow: 0px 8px 0px #37fafd1c;}

#message::placeholder {
    color: #69f0ffd4; }

#chat::-webkit-scrollbar {
    width: 18px;
    background-color: none;
}

#chat::-webkit-scrollbar-thumb {
    background-color: #36767f;
    border-radius: 999px;
    min-height: 60px;
    box-shadow: 0px 0px 10px #00000050, inset 0px 0px 2px aqua;
    cursor: pointer;
}





@media screen and (max-width : 425px){
.ch {padding: 20px; border-radius: 20px;}
#chat {font-size: 16px; line-height: 1.3; padding: 0; height: 300px;border-radius: 0; height: 370px;}
input[type="text"] {font-size: 17px;}
.emoji {padding: 4px;}
button {min-width: -webkit-fill-available;}
}