body {
    font-family: "Cabin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }

  h1 {
    display: inline-block; 
  }

  .mode-tabs {
    display: block;
  }



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

  .header h1 { 
    margin: 0;
  }

  .header i {
    margin: 0 10px; 
  }

  .header span { 
    margin-left: auto;
    text-align: right;
  }

  textarea, input {
    font-family: Consolas, 'Courier New', Courier, monospace;
  }


  footer {
      position: fixed;
      height: fit-content;
      bottom: 0;
      width: 100%;
      text-align: center;
  }

  #inp, #out {
    height: max(61.6px, calc(100vh - 160px));
  }

  #sc {
    height: max(61.6px, calc(100vh - 310px));
  }

  @media (min-width: 768px) {

      .tab-pane {
        display: block !important;
      }

      .mode-tabs {
        display: none;
      }
      
      #inp, #out {
        height: max(208px, calc(100vh - 140px));
      }

      #sc {
        height: max(61.6px, calc(100vh - 305px));
      }

  }

  @media (max-width: 767px) {
      .mode-tabs {
        display: block;
      }

      .header span {
        display: none;
      }
  }