index.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com*/

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.table{display:table}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@keyframes bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}*,:after,:before{--tw-shadow:0 0 #0000;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}body{color:rgba(17,24,39,var(--tw-text-opacity));font-family:Inter,sans-serif;height:100vh;line-height:1;max-height:100vh;width:100%}.dark body,body{--tw-text-opacity:1}.dark body{color:rgba(249,250,251,var(--tw-text-opacity))}body{background-color:rgba(249,250,251,var(--tw-bg-opacity))}.dark body,body{--tw-bg-opacity:1}.dark body{background-color:rgba(17,24,39,var(--tw-bg-opacity))}.header{--tw-bg-opacity:1;align-items:center;background-color:rgba(249,250,251,var(--tw-bg-opacity));display:flex;justify-content:space-between;left:0;padding:2rem 1rem;position:sticky;right:0;top:0}.dark .header{--tw-bg-opacity:1;background-color:rgba(17,24,39,var(--tw-bg-opacity))}.header{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgba(229,231,235,var(--tw-border-opacity))}.dark .header{--tw-border-opacity:1;border-color:rgba(55,65,81,var(--tw-border-opacity))}.header .logo{cursor:pointer;font-size:1.25rem;font-weight:700;line-height:1.75rem;text-decoration:none;transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.header .logo:hover{--tw-text-opacity:1;color:rgba(245,158,11,var(--tw-text-opacity))}.header .nav-menu{align-items:center;-moz-column-gap:1rem;column-gap:1rem;display:flex;list-style-type:none}.header .nav-link{fill:currentColor;cursor:pointer;outline:2px solid transparent;outline-offset:2px;text-decoration:none;transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.header .nav-link:hover{--tw-text-opacity:1;color:rgba(245,158,11,var(--tw-text-opacity))}.main{display:grid;gap:1rem;grid-template-rows:repeat(5,minmax(0,1fr));height:calc(100vh - 8.2rem);padding:1rem}.main-i,.main-o{grid-row:span 2/span 2}.main-s{grid-row:span 1/span 1;order:1}.main textarea{--tw-text-opacity:1;border-radius:.375rem;color:rgba(107,114,128,var(--tw-text-opacity));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;height:100%;line-height:1rem;outline:2px solid transparent;outline-offset:2px;padding:1rem;resize:none;width:100%}.dark .main textarea{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.main textarea{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));border-width:1px}.dark .main textarea{--tw-border-opacity:1;border-color:rgba(55,65,81,var(--tw-border-opacity))}.main textarea{--tw-bg-opacity:1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.dark .main textarea{--tw-bg-opacity:1;background-color:rgba(31,41,55,var(--tw-bg-opacity))}.main button{--tw-text-opacity:1;--tw-bg-opacity:1;background-color:rgba(245,158,11,var(--tw-bg-opacity));border-radius:.375rem;color:rgba(17,24,39,var(--tw-text-opacity));display:block;line-height:1;outline:2px solid transparent;outline-offset:2px;padding:1rem 2rem;text-align:center;transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.main button:hover{--tw-bg-opacity:1;background-color:rgba(217,119,6,var(--tw-bg-opacity))}@media (min-width:768px){.main{grid-template-columns:repeat(12,minmax(0,1fr))}.main-i,.main-o{grid-column:span 5/span 5;grid-row:span 5/span 5}.main-s{grid-column:span 2/span 2;order:0}}.footer{--tw-text-opacity:1;bottom:0;color:rgba(107,114,128,var(--tw-text-opacity));font-size:.75rem;left:0;line-height:1rem;padding:.5rem 1rem;position:sticky;right:0;text-align:center}.dark .footer{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.footer{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.dark .footer{--tw-bg-opacity:1;background-color:rgba(17,24,39,var(--tw-bg-opacity))}.footer{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));border-top-width:1px}.dark .footer{--tw-border-opacity:1;border-color:rgba(55,65,81,var(--tw-border-opacity))}.footer a{--tw-text-opacity:1;color:rgba(59,130,246,var(--tw-text-opacity))}.dark .footer a{--tw-text-opacity:1;color:rgba(96,165,250,var(--tw-text-opacity))}