styles.css

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative; 
    background-size: cover;
  }
  .logo{
    position: absolute;
    top: 10px;
    right: 60px;
  }
 
  .box{
    width: 500px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid #303030; */
    box-shadow: 5px 20px 1000px #000;
    border-radius: 20px;
  }
  .top{
    width: 100%;
    height: 80px;
    background: #444444;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .top h1{
    color: #eeeeee;
    margin: 0;
    font-size: 30px;
    text-align: center;
    /* padding-left: 20px; */
    padding-top: 20px;
    font-family: monospace;
  }
  .mid{
    width: 100%;
    height: 260px;
    /* margin-top: -18px; */
  }
  .mid .chat{
    width: 100%;
    /* padding-top: 0px; */
  }
  .mid .chat h2{
    margin: 0;
    font-size: 20px;
    color: #ffffff;
    font-family: monospace;
    padding: 30px 10px;
  }
  .mid .chat p{
    margin: 0;
    height: 73px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    padding: 5px 10px;
    -webkit-text-stroke: 0.1px black;
    letter-spacing: 0.04em;
    font-family: monospace;
  }
  .input{
    width: 100%;
    height: 85px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* background: #090e11; */            
  }
  .input input{
    width: 100%;
    height: 87px;
    font-size: 30px;
    outline: none;
    border: none;
    padding-left: 20px;
    padding-bottom: 0px;
    font-family: monospace;
    background: #444444;
    color: #fff;

  }