@media (max-width:400px) {

  body {
    font-size: 3.733333333333334vw;
  }

  /**********************/
  

  .landing-main {
    width: 100.0vw;
    height: 240.0vw;
  }

  .lang-wrapper{
    width: 100%;
  }

  .dropdown {
    border: 0.26666666666666666vw solid #ccc;
    width: 40vw;
  }

  .dropdown-item {
    padding: 2.1333333333333333vw 2.666666666666667vw;
    font-size: 3.733333333333334vw;
  }

  .lang-btn {
    margin-right: 5.333333333333334vw;
    margin-top: 5.333333333333334vw;

    width: 9.333333333333334vw;
    height: 9.333333333333334vw;
  }

  .lang-logo {
    width: 6.221333333333333vw;
    height: 6.221333333333333vw;
  }

  .landing-main .main-content {
    margin-bottom: 23.466666666666665vw;
  }

  .tagline {
    width: 50.13333333333333vw;
    margin-top: 17.866666666666667vw;
    margin-bottom: 7.199999999999999vw;

    font-size: 5.333333333333334vw;
    line-height: 9.066666666666666vw;
  }

  .landing-logo {
    width: 60.901333333333326vw;
    height: 40.81066666666667vw;
    margin-bottom: 7.285333333333334vw;
  }

  .main-preview {
    margin-bottom: 17.28533333333333vw;
  }

  .main-preview-img {
    width: 55.46666666666666vw;
    height: 56.216vw;
  }

  .landing-bubble {

    border: 0.26666666666666666vw solid #8903FF;

    font-size: 4.266666666666667vw;
    line-height: 9.066666666666666vw;

    margin-top: -13.333333333333334vw;
    margin-right: -10.666666666666668vw;

    width: 17.599999999999998vw;
    height: 17.599999999999998vw;
  }

  .cloud-img {
    width: 100vw;
    height: 62.4vw;
    margin-bottom: -40.53333333333333vw;
  }

  /**********************/


  .landing-usage {
    margin-top: 7.733333333333333vw;
    width: 100.0vw;
  }

  .landing-steps {
    gap: 24.0vw;
    margin-bottom: 13.333333333333334vw;
  }

  .step-title {
    font-size: 3.733333333333334vw;
    line-height: 9.066666666666666vw;
  }

  .step-block {

    padding-left: 3.733333333333334vw;
    padding-right: 3.733333333333334vw;

    font-size: 3.733333333333334vw;
    line-height: 9.066666666666666vw;
    margin-bottom: 4.266666666666667vw;
  }

  .step-desc {
    font-size: 5.333333333333334vw;
    line-height: 9.066666666666666vw;

    margin-bottom: 8.0vw;
  }

  .step-img-1{
    width: 73.33333333333333vw;
    height: 73.33333333333333vw;
  }

  .step-img-2, .step-img-3, .usage-preview-img {
    width: 45.33333333333333vw;
    height: 96.8vw;
  }

  .usage-preview {
    margin-bottom: 24.0vw;
  }

  .usage-btn {
    margin-bottom: 24.53333333333333vw;
  }

  .credit {
    font-size: 3.2vw;
    line-height: 8.0vw;
    margin-bottom: 14.399999999999999vw;
  }

  .usage-peek{
    width: 70.13333333333334vw;
    height: 23.43733333333333vw
  }

  /**********************/

  .primary {
    width: 100.0vw;
  }

  .logo {
    width: 38.6vw;
    height: 25.866666666666667vw;
  }

  .peek {
    width: 70.13333333333334vw;
    height: 23.43733333333333vw;
  }

  /**********************/

  #login .logo {
    margin-bottom: 12.8vw;
  }

  .login-form {
    gap: 3.733333333333334vw;
    margin-bottom: 13.333333333333334vw;
  }

  .main-buttons {
    gap: 3.733333333333334vw;
    font-size: 4.266666666666667vw;
  }

  .textbox {
    width: 64.8vw;
    height: 10.666666666666668vw;
    line-height: 5.085333333333334vw;
    border-radius: 2.1333333333333333vw;
    padding-left: 3.5999999999999996vw;
    padding-right: 3.5999999999999996vw;
    font-size: 3.733333333333334vw;;
  }

  .primary-button {
    width: 83.73333333333333vw !important;
    height: 13.333333333333334vw !important;
    border-radius: 13.333333333333334vw !important;
    line-height: 5.810666666666667vw !important;
    font-size: 4.266666666666667vw !important;

  }

  .secondary-button {
    width: 83.73333333333333vw !important;
    height: 13.333333333333334vw !important;
    border-radius: 13.333333333333334vw !important;
    line-height: 5.810666666666667vw !important;
    font-size: 4.266666666666667vw !important;


  }

  /**********************/

  #dashboard .logo {
    margin-bottom: 12.8vw;
  }

  .url-desc {
    font-size: 3.733333333333334vw;
    margin-bottom: 2.1333333333333333vw;
    line-height: 5.085333333333334vw;
  }

  .chat-url {
    margin-bottom: 16.266666666666666vw;
    gap: 0.0vw;
    font-size: 3.733333333333334vw;
  }

  .url-box {
    width: 57.99999999999999vw;
    height: 10.666666666666668vw;
    font-size: 3.733333333333334vw;
    border-radius: 2.1333333333333333vw 0.0vw 0.0vw 2.1333333333333333vw;
    
    line-height: 5.085333333333334vw;
    padding-left: 3.5999999999999996vw;
    
  }

  .btn-box {
    margin-left: -0.5333333333333333vw;
    height: 5.333333333333334vw;
    padding: 2.666666666666667vw;
    border-radius: 0.0vw 2.1333333333333333vw 2.1333333333333333vw 0.0vw;
  }

  .copy-btn {
    width: 5.333333333333334vw;
    height: 5.333333333333334vw;
  }

  /**********************/

  .secondary {
    width: 100.0vw;
  }

  .messages {

    gap: 3.2vw;
    padding-top: 8.0vw;
    padding-bottom:  8.0vw;

    margin-bottom: 24.087999999999997vw;
    margin-left: 6.133333333333333vw;

    padding-left: 3.2vw;
      
    scrollbar-width: 2.1333333333333333vw;

  }

  .messages::-webkit-scrollbar {
    width: 2.1333333333333333vw;
  }

  .messages::-webkit-scrollbar-thumb {
    border-radius: 2.666666666666667vw;
  }

  .msg-bubble {
    width: 67.46666666666667vw;
    border-radius: 3.4666666666666663vw;
    
    padding: 5.333333333333334vw;
    padding-top: 3.4666666666666663vw;
    padding-bottom: 3.4666666666666663vw;
  }

  .bubble-tail {
    border-top: 2.1333333333333333vw solid transparent;
    border-bottom: 2.1333333333333333vw solid transparent;
    border-right: 4.266666666666667vw solid #FFFFFF;
    
    margin-left: -8.533333333333333vw;
  }

  .chatroom-menu {
    width: 95.19999999999999vw;
    padding: 2.4vw;
    padding-bottom: 1.6vw;

  }

  .chatroom-content {
    gap: 2.4vw;
    padding-bottom: 2.4vw;
  }

  .logo-box {
    width: 16.266666666666666vw;
  }

  .chat-btn {
    font-size: 4.266666666666667vw !important;
    height: 13.333333333333334vw !important;
    border-radius: 2.1333333333333333vw !important;
  }

  .download-box {
    font-size: 4.266666666666667vw;
    line-height: 5.810666666666667vw;
  }

  .download-btn {
    margin-right: 5.333333333333334vw;

    width: 5.333333333333334vw;
    height: 5.333333333333334vw;
  }

  .logo-btn {
    width: 9.893333333333333vw;
    height: 6.666666666666667vw;
  }

  .chatroom-desc {
    font-size: 3.2vw;
    line-height: 4.357333333333333vw;
  }

  /**********************/

  .chatbox-input {
    margin: 2.666666666666667vw;
    margin-bottom: 0.0vw;
    width: 84.0vw;
    height: 52.0vw;
    padding: 5.333333333333334vw;

    
    font-size: 3.733333333333334vw;
    line-height: 5.085333333333334vw;

    border-radius: 3.4666666666666663vw;
  }

  .chatbox-bubbles {
    margin-top: 5.333333333333334vw;
    margin-left: 65.33333333333333vw;
    margin-right: 22.666666666666664vw;
  }

  .bubble-big {
    width: 9.066666666666666vw;
    height: 6.133333333333333vw;
    margin-left: 2.933333333333333vw;
    margin-bottom: 3.2vw;
  }

  .bubble-small {
    width: 5.6000000000000005vw;
    height: 4.0vw;
  }

  .catbag {
    margin-top: 9.6vw;
    margin-left: 35.733333333333334vw;
    margin-right: 42.13333333333333vw;
    width: 22.133333333333333vw;
    height: 32.06666666666666vw;
  }

  .send-btn {
    width: 5.333333333333334vw;
    height: 5.333333333333334vw;

    margin-right: 3.4666666666666663vw;
  }

}