@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap";#header{text-align:center;margin:0 auto 3rem;padding:0}#header img{margin:20rem 0,0,0;padding:0;max-width:15rem;align-items:center;border-radius:2rem}#header h1{font-family:Quicksand,sans-serif;margin:1rem;color:#fff;font-size:2.5rem}#header nav{margin:0 0 1.5rem;border-bottom:1px solid #474444}.container{display:flex;align-items:center;justify-content:center;position:relative;height:var(--chakra-sizes-full)}.image-container{position:relative;display:inline-block}.text-container{position:absolute;top:0;left:50%;transform:translate(-50%);width:calc(100% - .2rem);background-color:#000c;color:#fff;padding:10px 2rem;border-radius:5px;opacity:0;transition:opacity .3s ease;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:18px;white-space:normal;pointer-events:none}.image-container:hover .text-container{opacity:1;pointer-events:auto}#header nav .menu-btn{margin:0 0 0 1rem;width:2rem;height:2rem;display:flex;flex-direction:column;justify-content:space-around;position:absolute;left:0;padding:5px;background-color:transparent;box-shadow:none;border:none;cursor:pointer}#header nav .menu-btn span{width:100%;height:2px;background-color:#fff}.sidebar{width:0;height:100%;background-color:#343c3d;color:#fff;overflow-x:hidden;position:fixed;transition:width .3s ease}.sidebar.open{width:16.6%}.sidebar h3{margin-top:20px;text-align:center}.sidebar ul{list-style:none;margin-top:3rem;padding:0}.sidebar ul li{padding:10px;text-align:center;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;font-size:20px;background:none;border:none;color:#fff;cursor:pointer}.close-btn:hover{color:#ccc;background-color:#343c3d}#user-input{padding:1rem;width:30rem;margin:0 auto;border-radius:4px;background:#343c3d;color:#3a2929}.input-group{display:flex;justify-content:space-evenly;gap:1.5rem}#user-input label{display:block;margin-bottom:.25rem;font-family:Quicksand,sans-serif;font-size:1rem;font-weight:700;color:#fff}#user-input input{width:100%;padding:.5rem;border:1px solid #1abc9c;border-radius:.25rem;background-color:transparent;color:#fff;font-size:1rem;font-weight:500}div .buttonArray{display:flex;flex-direction:row;justify-content:center;gap:1rem}.button{padding:.5rem 1rem;border:none;border-radius:.25rem;background:#2ecc71;color:#fff;font-family:Quicksand,sans-serif;cursor:pointer}.buttonAlt{font-family:Quicksand,sans-serif;border:none;background:#b69b9b;color:#e2a7a7;cursor:pointer}button:hover{background:#23a057}.buttonAlt:hover{background:rgb(164,135,135);color:#91e1d0}.result{max-width:50rem;margin:2rem auto;padding:1rem;table-layout:fixed;border-spacing:1rem;text-align:right}.result thead{font-size:.8rem;text-align:center;color:#d9e0dd}.result tbody{font-family:Roboto Condensed,sans-serif;font-size:.85rem;color:#c2e9e0}@tailwind base;@tailwind components;@tailwind utilities;body{margin:0;font-family:Quicksand,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1f2424;color:#333;min-height:100vh}main{max-width:100%;width:30rem;margin:auto;display:flex;flex-direction:column;align-items:center}.center{text-align:center}#examples{width:100%;margin-bottom:auto}#examples menu{margin:0;padding:0;display:flex;gap:.5rem;list-style:none}#examples menu button{padding:.5rem 1rem;border:none;border-radius:6px;background-color:#474747;color:#ede6e6;font-family:Roboto Condensed,sans-serif;font-size:1rem;cursor:pointer;transition:all .2s ease-in-out}#examples menu button:hover{background-color:#1abc9c;color:#333}#examples menu button.active{background-color:#1abc9c;color:#ebe7ef}.targetValue{color:#ffc107;font-weight:700}.theReslut{color:#ff8ba7;font-weight:700}#description{white-space:pre-wrap}