#chat{
      user-select: none;
      display: flex;width: 100%;height: 100%;
      justify-content: center;overflow-y: auto;
  }
  #chatbox{
    
      width:95%;
      height: 100%;
  }
  #bcmd{
      display: flex;
      width:100%;align-items: center;
      height:auto;padding:10px;
  }
  #ucmd{
      display: flex;
      width:100%;align-items: center;justify-content: right;
      height: auto;padding:10px;
  }
  #botc{
    box-shadow: 1px 2px 10px -3px rgba(0,0,0,0.5);
    background-color: white;
      width:30%;border:1px solid grey;
      font-family: sans-serif;
      font-size: 15px;color:black;text-align: left;
      font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      height:auto;margin-left: 10px;
      overflow-wrap: break-word;
      padding:20px;border-radius: 10px;
  }
  #defc{
    box-shadow: 1px 2px 10px -3px rgba(0,0,0,0.5);
    background-color: white;
      width:70%;border:1px solid grey;
      font-family: sans-serif;
      font-size: 15px;color:black;text-align: left;
      font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      height:auto;margin-left: 10px;
      overflow-wrap: break-word;
      padding:20px;border-radius: 10px;
      display: grid;
      grid-auto-rows: max-content;
  }
  
  #timg{
    display: flex;
    justify-content: center;
   

  }
  #timg img{
    height:100%;
    width:50%;
    border:1px solid grey;
  }
  #ttext{
    width:100%;
    height:100%;
    font-size:20px;
    padding:10px;
  
  }
  #botc img{
    width:50%;
    height: 50%;
  }
  #uc{
    background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
    color:white;
      width:30%;text-align: left;
      font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      box-shadow: 1px 2px 10px -3px rgba(0,0,0,0.5);
      font-size: 15px;
      height:auto;margin-right: 10px;
      overflow-wrap: break-word;
      padding:20px;border-radius: 10px;
  }
  #textbox{
      width: 100%;height: 100%;
      display: flex;background-color: transparent;
      justify-content: center;
      align-items: center;
  }
  #textbox input{
      width:90%;border-top-left-radius: 15px;
       border-bottom-left-radius: 15px;font-size: 17px;
      height: 96%;border:none;outline: none;background-color: transparent;
  }
  
  #textbox input::placeholder{
       text-align: center;
  }
  #send{
      width:7%;height: 100%;cursor: pointer;
  }
  #box{
    font-size: 20px;
    box-shadow: 1px 2px 10px -3px rgba(0,0,0,0.5);color:black;
    color: #686868;border-radius: 15px;
      height: 50%;background-color: white;
      width:60%;display: flex;justify-content:center;
  }
  #nav{
      
      width:100%;transform: translate(0px,-100px);
      height: 40%;
      position:absolute;
  }
  .bomb-menu {
    font-size: 0.8em;
    /* change font-size here to scale menu accordingly */
    
    position: fixed;
    /* menu position */
    
    top: 2.2em;
    width: 5.2em;
    /* menu toggle button size */
    
    height: 5.2em;
  }
  
  .right-menu {
    right: 2.2em;
  }
  
  .bomb-menu .menu-toggle-btn,
  .bomb-menu .menuIcon,
  .bomb-menu .menu-item {
    position: absolute;
    top: 0;
  }
  
  .right-menu .menu-toggle-btn,
  .right-menu .menuIcon,
  .right-menu .menu-item {
    right: 0;
  }
  
  .bomb-menu .menu-toggle-btn,
  .bomb-menu .menuIcon {
    width: 100%;
    height: 100%;
  }
  
  .bomb-menu .menu-item {
    width: 5.0em;
    /* inner elements size */
    
    height: 5.0em;
  }
  
  .bomb-menu .menu-item i {
    font-size: 2em;
  }
  /* Bomb-Menu Style */
  
  .bomb-menu,
  .bomb-menu .menu-toggle-btn,
  .bomb-menu .menu-icon,
  .bomb-menu .menu-item,
  .bomb-menu a {
    border-radius: 50%;
  }
  
  .bomb-menu {
    cursor: pointer;
    text-align: center;
    color: #666;
    z-index: 100;
  }
  
  .menu-toggle-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    padding: 0;
    cursor: inherit;
    background-color: #fffff0;
    z-index: 101;
  }
  
  .menu-toggle-btn:focus {
    outline: none;
  }
  
  .menu-icon {
    pointer-events: none;
  }
  
  .bomb-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    visibility: hidden;
  }
  
  .active + ul {
    visibility: visible;
  }
  
  .bomb-menu .menu-item {
    background-color: #fffff0;
    display: table;
  }
  .menu-item img{
    width:60%;height:60%;
  }
  .bomb-menu a {
    display: table-cell;
    vertical-align: middle;  /* vertical centering */
    color: inherit;
  }
  /*********************** ANIMATIONS ***********************/
  /* Menu Icon Animation - Works for both right-aligned and left-aligned menu */
  
  .active {
    animation: shake 600ms ease-in-out forwards;
  }
  
  .line {
    transform: translateY(0px) rotate(0deg);
    transition: transform 200ms linear;
  }
  /* transform-origin fix for Firefox v42 */
  .line1 {
    transform-origin: 26px 18px;
  }
  .line2 {
    transform-origin: 26px 26px;
  }
  .line3 {
    transform-origin: 26px 34px;
  }
  
  .active .line1 {
    transform: translateY(8px) rotate(45deg);
  }
  
  .active .line2 {
    transform: rotate(-45deg);
  }
  
  .active .line3 {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  /* Menu Items Animation - right-aligned menu */
  .right-menu .active + ul > .mi-1 {
    animation: rExplode1 80ms ease-out 530ms forwards;
  }
  
  .right-menu .active + ul > .mi-2 {
    animation: rExplode2 80ms ease-out 530ms forwards;
  }
  
  .right-menu .active + ul > .mi-3 {
    animation: rExplode3 80ms ease-out 530ms forwards;
  }
  
  @keyframes shake {
    0% {
      transform: translateX(5px);
    }
    4% {
      transform: translateX(0px);
    }
    8% {
     transform: translateX(-5px);
    }
    12% {
      transform: translateX(0px);
    }
    15% {
     transform: translateX(5px);
    }
    18% {
     transform: translateX(0px);
    }
    21% {
      transform: translateX(-5px);
    }
    24% {
      transform: translateX(0px);
    }
    28% {
      transform: translateX(5px);
    }
    32% {
      transform: translateX(0px);
    }
    36% {
      transform: translateX(-5px);
    }
    40% {
      transform: translateX(0px);
    }
    44% {
      transform: translateX(5px);
    }
    48% {
      transform: translateX(0px);
    }
    52% {
      transform: translateX(-5px);
    }
    56% {
      transform: translateX(0px) scale(1);
    }
    85% {
      transform: scale(0.7);
    }
    94% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* right-aligned menu only */
  @keyframes rExplode1 {
    0% {
      transform: translate(0px, 0px);
    }
    70% {
      transform: translateX(-160%);
    }
    100% {
      transform: translateX(-140%);
    }
  }
  
  @keyframes rExplode2 {
    0% {
      transform: translate(0px, 0px);
    }
    70% {
      transform: translate(-126%, 126%);
    }
    100% {
      transform: translate(-106%, 106%);
    }
  }
  
  @keyframes rExplode3 {
    0% {
      transform: translate(0px, 0px);
    }
    70% {
      transform: translateY(160%);
    }
    100% {
      transform: translateY(140%);
    }
  }
  
  
  @media (max-width:600px){
    
  
      #name{
          font-size: 35px;margin-left:20px;
      }
      #botc{
          background-color: #202C33;color:white;
          width:45%;
          font-family: sans-serif;
          font-size: 18px;
          height:max-content;margin-left: 10px;
          overflow-wrap: break-word;
          padding:27px;border-radius: 10px;
          
      }
      #defc{
        background-color: #202C33;color:white;
        width:55%;
        font-family: sans-serif;
        font-size: 18px;
        height:max-content;margin-left: 10px;
        overflow-wrap: break-word;
        padding:27px;border-radius: 10px;
          display: grid;
          grid-auto-rows: max-content;
      }
      #timg{
        display: flex;
        justify-content: center;
      }
      #timg img{
        height:100%;
        width:100%;
        border:1px solid grey;
      }
      #ttext{
        width:100%;
        height:100%;
        font-size:20px;
        padding:10px;
      
      }
      #botc img{
        width:50%;
        height: 50%;
      }
      #uc{
          background-color: #036AFF;
          width:45%;
          font-family: sans-serif;
          font-size: 18px;
          color:white;
          height:auto;margin-right: 10px;
          overflow-wrap: break-word;
          padding:27px;border-radius: 10px;
          
      }
      #textbox{
          width: 100%;height: 100%;
          display: flex;
          justify-content: center;
          align-items: top;
      }
     #box{
        font-size: 16px;
        box-shadow: 1px 2px 10px -3px rgba(0,0,0,0.5);color:black;border-radius: 15px;
      height: 30%;border:1px solid black;transform: translate(0px,-30px);
      width:80%;display: flex;justify-content:center;background-color: white;
     }
  }

  @media(max-width:460px){
    #bcmd{
      display: flex;
      width:100%;align-items: center;
      height:auto;padding:10px;
  }
  #ucmd{
      display: flex;
      width:100%;align-items: center;justify-content: right;
      height: auto;padding:10px;
  }
    #botc{
      background-color: #202C33;color:white;
      width:45%;
      font-family: sans-serif;
      font-size: 18px;
      height:auto;margin-left: 10px;
      overflow-wrap: break-word;
      padding:20px;border-radius: 10px;
      
  }
  #uc{
      background-color: #036AFF;
      width:45%;
      font-family: sans-serif;
      font-size: 18px;
      color:white;
      height:auto;margin-right: 10px;
      overflow-wrap: break-word;
      padding:27px;border-radius: 10px;
      
  }
  #textbox{
      width: 100%;height: 100%;
      display: flex;
      justify-content: center;
      align-items: top;
  }
 #box{
    font-size: 16px;
    box-shadow: 1px 2px 10px -3px rgba(0,0,0,0.5);color:black;border-radius: 15px;
  height: 30%;border:1px solid black;transform: translate(0px,-30px);
  width:80%;display: flex;justify-content:center;background-color: white;
 }
  }