:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}body{padding:0;margin:0}.startContainer{background-color:#0f0f0f;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.startContainer img{max-width:850px;max-height:650px}.startContainer button{min-width:200px;min-height:50px;border:none;border-radius:3px;background-color:#6c6c6c;color:#fff;font-size:18px;font-weight:700;padding:5px;cursor:pointer}.startContainer button:hover{background-color:#3d3d3d}.formContainer{background-color:#222;height:100vh;display:flex;align-items:center;justify-content:center}.formContainer .formWrapper{background-color:#fff;padding:20px 60px;border-radius:15px;display:flex;flex-direction:column;gap:15px;align-items:center}.formContainer .formWrapper .logo{color:#6c6c6c;font-weight:700;font-size:28px}.formContainer .formWrapper .title{color:#6c6c6c;font-size:14px}.formContainer .formWrapper form{display:flex;flex-direction:column;gap:15px}.formContainer .formWrapper form input{padding:15px;border:none;border-bottom:1px solid #4b3e6a;min-width:250px}.formContainer .formWrapper form input::placeholder{color:#aaa}.formContainer .formWrapper form label{display:flex;align-items:center;gap:10px;font-size:12px;color:#6c6c6c;cursor:pointer}.formContainer .formWrapper form label img{width:50px}.formContainer .formWrapper form button{background-color:#222;color:#fff;padding:10px;font-weight:700;border:none;cursor:pointer}.formContainer .formWrapper form .form-error{color:red;font-size:14px;margin-top:5px;text-align:center}.formContainer .formWrapper p{color:#6c6c6c;font-size:14px;margin-top:10px}.formContainer .formWrapper a{color:#00f}footer{color:#fff;position:absolute;bottom:0;padding:10px}.homePage{background-color:#222;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.homePage .homePageContainer{border:1px solid white;border-radius:10px;width:65%;height:80%;display:flex;overflow:hidden}.homePage .homePageContainer .sidebar{flex:1;background-color:#6c6c6c}.homePage .homePageContainer .sidebar .navbar{display:flex;align-items:center;background-color:#3d3d3d;min-height:50px;padding:10px;justify-content:space-between;color:azure}.homePage .homePageContainer .sidebar .navbar .logoContainer{display:flex;align-items:center;gap:10px}.homePage .homePageContainer .sidebar .navbar .logoContainer img{width:32px;height:32px}.homePage .homePageContainer .sidebar .navbar .logoContainer .logo{font-weight:700}.homePage .homePageContainer .sidebar .navbar .user{display:flex;gap:10px;align-items:center}.homePage .homePageContainer .sidebar .navbar .user img{background-color:azure;height:30px;width:30px;border-radius:50%;object-fit:cover}.homePage .homePageContainer .sidebar .navbar .user button{background-color:#f0f8ff;border:none;padding:7px;font-size:11px;border-radius:5px;cursor:pointer}.homePage .homePageContainer .sidebar .searchBar{border-bottom:1px solid #4b3e6a}.homePage .homePageContainer .sidebar .searchBar .searchForm{padding:10px}.homePage .homePageContainer .sidebar .searchBar .searchForm input{background-color:transparent;color:#fff;outline:none;border:none;padding:10px;font-size:14px}.homePage .homePageContainer .sidebar .searchBar .searchForm input::placeholder{color:#f0f8ff}.homePage .homePageContainer .sidebar .userChat{padding:10px;display:flex;align-items:center;gap:10px;color:#fff;cursor:pointer}.homePage .homePageContainer .sidebar .userChat:hover{background-color:#9c9c9c}.homePage .homePageContainer .sidebar .userChat img{height:70px;width:70px;border-radius:50%;object-fit:cover;background-color:azure}.homePage .homePageContainer .sidebar .userChat .userChatInfo span{font-size:18px;font-weight:500}.homePage .homePageContainer .sidebar .userChat .userChatInfo p{font-size:14px;color:#d3d3d3}.homePage .homePageContainer .chat{flex:2}.homePage .homePageContainer .chat .chatInfo{height:50px;padding:10px;background-color:#505050;display:flex;align-items:center}.homePage .homePageContainer .chat .chatInfo span{font-size:18px;font-weight:500;color:#d3d3d3}.homePage .homePageContainer .chat .messages{background-color:#eee;padding:10px;height:calc(100% - 160px);overflow-y:scroll}.homePage .homePageContainer .chat .messages .message{display:flex;gap:20px;margin-bottom:20px}.homePage .homePageContainer .chat .messages .message .messageInfo{display:flex;flex-direction:column;color:gray;font-weight:300;font-size:12px;align-items:center}.homePage .homePageContainer .chat .messages .message .messageInfo img{height:60px;width:60px;border-radius:50%;object-fit:cover;background-color:azure}.homePage .homePageContainer .chat .messages .message .messageContent{max-width:80%;display:flex;flex-direction:column;gap:10px}.homePage .homePageContainer .chat .messages .message .messageContent p{background-color:#fff;padding:10px 20px;border-radius:0 10px 10px;max-width:max-content}.homePage .homePageContainer .chat .messages .message .messageContent img{height:200px;width:200px;object-fit:cover;background-color:azure}.homePage .homePageContainer .chat .messages .message.owner{flex-direction:row-reverse}.homePage .homePageContainer .chat .messages .message.owner .messageContent{align-items:flex-end}.homePage .homePageContainer .chat .messages .message.owner .messageContent p{background-color:#4bdd7c;border-radius:10px 0 10px 10px}.homePage .homePageContainer .chat .input{background-color:#60e867;height:50px;padding:10px;display:flex;gap:2%;align-items:center}.homePage .homePageContainer .chat .input input{width:85%;min-height:30px;border:none;border-radius:5px;padding:5px 10px;outline:none;font-size:18px;color:#222}.homePage .homePageContainer .chat .input input::placeholder{color:#aaa}.homePage .homePageContainer .chat .input .send{display:flex;gap:10px;align-items:center}.homePage .homePageContainer .chat .input label img{width:32px;cursor:pointer}
