body{
           display: flex;
           flex-direction: column;
            background: rgb(168, 233, 255);
           align-items: center;
           scroll-behavior: smooth;
        }
        *{
            font-family:arial;
             margin:0;
            padding:0;
            transition: all 0.2s; 
            
        }
#chat input{
color:black !important;
}

#chat textarea{
flex:none;
}
        header{
            background-color: rgb(131, 197, 255);
            padding: 10px ;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
           
        }

        header a{
            color:black;
        }

        footer{
            text-align: center;
            background: #e5e5e5;
            padding:15px;
           
        }

        .button{
            border: solid black 1px;
            background: rgb(62, 88, 255);
            border-radius: 10px;
            padding:5px;
             margin: 10px; 
            color:white;
            transition: all 0.2s;
            cursor:pointer;
        }

        .button:hover{
             background: rgb(50, 71, 208);
        }

        main{
            padding: 20px;
        }

        .container{
          width:65%;
          background: white;
          position:relative;
        
        }

        .container a h4{
            color:black;
            
        }
        
        #aside
            {
                
                width:30%;
                height: 100vh;
                background: rgba(131, 197, 255,0.1);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);
                border: solid rgb(131, 197, 255) 2px;
                border-radius: 0 20px 20px 0px ;
                padding: 20px;
                position: fixed;
                transition: all 0.3s;
                left:0;
                top:0;

            }



#chat{
    background:white;
    position: fixed;
    right:0;
    top:0;
    width:35%;
    height:100%;
    border-radius:20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-top:20px;
    padding-left:20px;
    padding-bottom:0px;
    box-sizing: border-box;
    overflow-y:auto;
    word-wrap:break-word;
    border:solid gray 1px;
    display:flex;
    flex-direction:column;
    
   
}






        @media (max-width:1500px)
        {
            .container{
                width:100%;
            }

            #aside{
                width:40%;
            }
            
             #chat{
                width:40%;
            }
        }

        @media (max-width:600px)
        {
            #aside{
                width:93%;
                padding: 10px;
            }
            
            #chat{
                width:100%;
                height:100%;
                right:0;
                top:0;
                padding:30px;
                margin:0;
                border-radius:0;
                border:none;
            }
        }

       

        .info{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        img{
            max-width: 50%;
            max-height:600px;
            min-width: 300px;
        }

        #preview{
            max-width: 50%;
            max-height: 300px;
            margin:10px;
        }

        textarea{
                color:black;
                min-width: 100px; min-height: 50px;padding:5px; border:solid black 1px; border-radius: 7px; max-width: 50%; max-height: 600px; transition: none; margin:10px;
            }

            

            hr{
                border:none;
                border-top:solid black 1px;
            }

            a{
                cursor:pointer;
            }

            .menu_divy{
                padding:20px;
                 background:white;
                  border-radius:20px;
                   text-align:center;
                    border:none;
                     width:80%;
                      margin:20px; 
                      background: rgba(255,255,255,0.9);
            }

           

            .username_a{
                
                text-decoration:none;
                margin:10px;
                 color:black;
                 

            }
            .username_a:hover p{
                background:rgb(131, 197, 255);
                 border-radius: 5px;
                  padding: 5px;
            }
            
           .login{
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            width: 100%;
            height: 100%;
            left:0;
            top:0;
             background: rgba(255, 255, 255,0.1);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);;
           }

           .login form {
            padding:40px;
            border-radius: 20px;
            background: rgba(131, 197, 255,0.5);
           }

           .login form input[type="text"], input[type="password"]{
            padding:5px;
            margin:2px;
            border-radius: 10px;
            border:solid black 1px;
           }

           

           .hamburger:hover{
            transform: scale(1.5);
            
            
           }

input[type="text"]{
            padding:5px;
            margin:2px;
            border-radius: 10px;
            border:solid black 1px;
           }





#chatbox{
 display: flex;
  flex-direction: column;
}

#chat * iframe{
    resize: both;      
  overflow: auto; 
  transition: none;
  max-width: 99%;
	border:solid gray 1px;
}

.botMessage, .userMessage{
    padding:7px; border-radius:14px; border:solid grey 1px;  margin:10px;   word-wrap:break-word;   

}

.botMessage{
    background: whitesmoke; align-self: flex-start;
     border-top-left-radius: 2px;
     max-width: 90%;
     
}
          
.userMessage{
  background: rgb(131, 197, 255);  align-self: flex-end;  
border-bottom-right-radius: 2px;


}



.chats{
    display:flex;
    align-items: center;
    justify-content: space-between;
    border:solid grey 1px;
    border-radius: 10px;
    background:whitesmoke;
    padding:5px;
    margin:5px;
}

.chats:hover{
    padding:10px;
    padding-right: 5px;
}

.chats a
{
    color: black;
   text-decoration:none;
}

.kosz{
    border:solid gray 1px;
    padding:2px;
    border-radius: 6px;
}

.kosz:hover{
    padding:5px;
    background: rgb(131, 197, 255);
}

.forchat{
    display:none;
}

.currentchat{
    background: #cccccc;
}



.chatheader a{
color:black;
}




.copybutton
{
     align-self:flex-start;
      color:black;
      background: none;
      border:solid gray 1px;
      border-radius: 5px;
      cursor:pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding:5px;
      line-height: 1;
      font-size: 12px;
     

}

.copybutton:hover{
    background: #888;
    font-size: 15px;
    
    
}



 @media(prefers-color-scheme: dark)
        {
.chats a{
color:white;
}
              body{
                background: #777;
            }

            .container{
                background: #444;
                color:white;
            }

            .container *{
                color: white;
            }

            #aside *{
                color:black;
            }

            .container textarea{
                color:black;
                opacity:0.8;
            }

            .container a h4{
            color:white;
            
        }

            header{
                background: #333;
            }
            footer{
                background: #888;
            }
            .button{
                 background: #888;
            }
            .button:hover{
                 background: #555;
            }

            
        header *{
            color:white;
        }

         #aside
            {
                background: rgba(255, 255, 255, 0.1);
                border:solid gray 1px;
            }

        
            input{
                color:black;
            }


            #chat{
                background: #333;
            }

            .botMessage{
                background: #444;
            }


            .chats{
                background:#555;
color:white;
            }

            .currentchat{
                background: #434343;
            }

            .userMessage{
                background: rgb(50, 71, 208);
            }


            .chatheader a{
color:white;
}
            
        }


.userMessage{
                text-wrap: break-word;
                max-width:70%;
            }


input{
color:black;
}


.userMessage, .botMessage {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 90%;
    box-sizing: border-box;
}