@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


 body {
     margin: 0;
     padding: 0;
     font-family: "Inter", sans-serif;
     background-color: #f2f2f2;
     color: #d4d4d4;
     height: 100vh;
     display: flex;
     flex-direction: column;
 }



 .codemirror-wrapper {
     flex-grow: 1;
     /* padding: 10px 10px 0 10px; */
     background-color: #1e1e1e;
 }

 .footer {
     position: sticky;
     bottom: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     background-color: #fff;
     padding: 10px 15px;
     z-index: 1000;
     margin-top: 3px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
 }

 .footer_button {
     display: inline-flex;
     align-items: center;
     padding: 8px 16px;
     background-color: #F2F2F2;
     border: none;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 380;
     color: #000;
     cursor: pointer;
     transition: background-color 0.2s ease;
     margin: 6px;
 }

 .footer_button:hover {
     background-color: #e0e0e0;
 }

 .sentence, .lower, .upper, .capitalize, .trim, .clean, .keywords, .hashtags {
     height: 10px;
     width: 10px;
     border-radius: 50%;
     margin-right: 10px;
 }

 .sentence {
     background-color: #4A90E2;
 }

 .lower {
     background-color: #7F8C8D;
 }

 .upper {
     background-color: #E74C3C;
 }

 .capitalize {
     background-color: #BDC3C7;
 }

 .trim {
     background-color: #2ECC71;
 }

 .clean {
     background-color: #F39C12;
 }

 .keywords {
     background-color: #9B59B6;
 }

 .hashtags {
     background-color: #1ABC9C;
 }

 .CodeMirror {
     height: 100% !important;
     font-size: 18px;
     font-weight: 360;
     padding: 10px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     font-family: "Inter", sans-serif;
 }

 .CodeMirror-wrap pre.CodeMirror-line,
 .CodeMirror-wrap pre.CodeMirror-line-like {
     padding-left: 12px;
 }

 .main_content {
     display: block;
     position: relative;
 }

 .pt_80 {
     padding-top: 80px;
 }

 .pt_60 {
     padding-top: 60px;
 }

 .pt_30 {
     padding-top: 30px;
 }

 .pt_40 {
     padding-top: 40px;
 }

 .text_header {
     display: flex;
     position: relative;
     place-content: space-between;
 }

 .text_header h1 {
     font-size: 32px;
     font-weight: 480;
     color: #000;
     margin-bottom: 0;
 }


 .text_header button {
     background-color: #4A90E2;
     border: 1px solid #4A90E2;
     color: #fff;
     padding: 10px 25px;
     font-size: 14px;
     border-radius: 10px;
     cursor: pointer;
     transition:
         background-color 0.3s ease,
         box-shadow 0.3s ease,
         transform 0.3s ease,
         border-color 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .text_header button:hover {
     background-color: #3b7bd8;
     border-color: #ffffff33;
     box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4);
     transform: translateY(-2px) scale(1.02);
 }

 /* Optional shine effect */
 .text_header button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: linear-gradient(120deg,
             rgba(255, 255, 255, 0.3) 0%,
             rgba(255, 255, 255, 0.6) 50%,
             rgba(255, 255, 255, 0.3) 100%);
     transform: skewX(-25deg);
     transition: left 0.6s ease;
 }

 .text_header button:hover::before {
     left: 130%;
 }


 .text_header button img {
     margin-right: 12px;
 }

 .codemirror-wrapper {
     height: 600px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     background-color: #f2f2f2;
 }

 .CodeMirror-gutters {
     border-right: 0;
     background-color: #fff;
 }

 .CodeMirror-gutter-elt {
     text-align: center;
     font-family: monospace;
     color: #bdbdbd;
 }

 @media (min-width: 1400px) {
     .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
         max-width: 1500px;
     }
 }