:root{--clr-primary:#0f0f0f;--clr-secondry:#222222;--clr-secondry-hover:hsl(0,0%,25%);--clr:0,138,138;--clr-text:#f0f8ff;--disabled:rgba(128,128,128,0.7);--clr-modeIcon:hsl(0,0%,25%);--clr-colors:#131111;--clr-angel:hsl(0,0%,25%);--clr-toolTip:hsl(0,0%,25%)}:root.light{--clr-primary:rgba(var(--clr),0.1);--clr-secondry:#f0ffff;--clr-text:#111;--clr-modeIcon:rgba(var(--clr),0.1);--clr-colors:#fff;--clr-angel:rgba(var(--clr),0.1);--clr-toolTip:rgba(var(--clr),0.1)}*,:after,:before{line-height:1;box-sizing:border-box}@media (max-width:767px){*,:after,:before{-webkit-tap-highlight-color:rgba(255,255,255,0);outline:none}}*{margin:0;padding:0}ul{list-style:none}input{all:unset;display:block;min-width:0;width:100%}a{display:block;text-decoration:none}body{font-family:"Josefin Sans",sans-serif}.item{display:flex;justify-content:center;align-items:center;width:70px;height:70px;font-size:32px;cursor:pointer;position:relative;isolation:isolate;user-select:none;transition:color 0.2s}.item:after{content:"";position:absolute;width:0;aspect-ratio:1;background-color:rgba(var(--clr),0.1);border-radius:50%;transition:width 0.2s,filter 0.1s;z-index:-1}@media (min-width:573px){.item:hover:after{width:100%}}.item:active:after{filter:blur(10px);width:90%}@media (max-width:400px){.item{width:65px;height:65px;font-size:28px}}.colored{color:rgba(var(--clr));font-weight:bold}.final-result{color:var(--clr-text)!important;font-size:3.2rem!important;user-select:auto!important}@media (max-width:400px){.final-result{font-size:2.4rem!important}}.light-shadow{box-shadow:0 0 10px rgba(0,0,0,0.1);border:1px solid rgba(var(--clr),0.2)}.open{top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}.color.active{filter:brightness(100%)!important;transform:scale(1.7)}.tool-tip{position:absolute;top:-24px;left:50%;transform:translateX(-50%) scale(0.2);white-space:nowrap;font-size:12px;font-weight:bold;padding:4px;background-color:var(--clr-secondry-hover);border-radius:4px;color:var(--clr-text);background-color:var(--clr-toolTip);opacity:0;transition:transform 0.2s,opacity 0.2s}@media (max-width:572px){.tool-tip{display:none}}main .calc .nums{display:grid;grid-template-columns:auto auto auto;gap:10px}main{color:var(--clr-text);background-color:var(--clr-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;padding:10px;transition:background 0.2s;overflow:hidden}@media (max-width:572px){main{justify-content:flex-start;gap:10px}}main .switch{display:flex;justify-content:center;align-items:center;padding:12px;background-color:var(--clr-secondry);width:min(100%,375px);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:50px}main .switch .title{font-size:1.5rem;font-weight:bold;text-transform:uppercase;color:rgb(var(--clr));transition:color 0.2s;flex:1}main .switch .mode-icon{width:55px;height:55px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:50%;cursor:pointer;transition:background 0.2s;position:relative}@media (min-width:573px){main .switch .mode-icon:hover{background-color:var(--clr-modeIcon)}main .switch .mode-icon:hover .tool-tip{opacity:1;transform:translateX(-50%) scale(1)}}@-webkit-keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@media (max-width:572px){main .switch{padding:8px}main .switch .mode-icon{width:35px;height:35px}main .switch .mode-icon:active{background-color:var(--clr-modeIcon)}}main .calc{width:min(100%,375px);margin-bottom:1rem}main .calc .monitor{background-color:var(--clr-secondry);aspect-ratio:16/8;padding:15px 15px 30px 15px;margin-bottom:15px;border-radius:1rem;font-size:28px;position:relative;overflow:hidden;isolation:isolate}@media (max-width:572px){main .calc .monitor{aspect-ratio:16/6;padding:15px;margin-bottom:10px}}main .calc .monitor .mo-content{display:flex;align-items:center;justify-content:flex-end;position:absolute;right:15px;bottom:15px;max-width:calc(100% - 30px);white-space:nowrap;overflow-x:auto;overflow-y:hidden;transition:opacity 0.1s;pointer-events:all}main .calc .monitor .result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2.2rem;color:rgba(128,128,128,0.5);font-weight:bold;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 30px);overflow-x:auto;overflow-y:hidden;text-align:center;z-index:10;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all 0.1s,font-size 0.1s 0.1s,color 0.1s 0.1s}main .calc .monitor .result::-webkit-scrollbar{height:5px}main .calc .monitor .result::-webkit-scrollbar-thumb{background-color:rgb(var(--clr));border-radius:10px}main .calc .monitor .colors-icon{position:absolute;right:10px;top:10px;display:flex;justify-content:center;align-items:center;width:55px;height:55px;color:var(--clr-text);font-size:20px;border-radius:50%;transition:box-shadow 0.2s,color 0.2s,background 0.2s,width 0.2s,height 0.2s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:15}main .calc .monitor .colors-icon .tool-tip{left:auto;top:50%;right:calc(100% + 5px);transform:translateY(-135%) scale(0)}@media (min-width:573px){main .calc .monitor .colors-icon:hover{background-color:var(--clr-modeIcon)}main .calc .monitor .colors-icon:hover .tool-tip{opacity:1;transform:translateY(-135%) scale(1)}}main .calc .monitor .colors-icon:active{width:45px;height:45px;box-shadow:0 0 0 2px rgb(var(--clr))}@media (max-width:572px){main .calc .monitor .colors-icon{width:35px;height:35px}main .calc .monitor .colors-icon:active{width:25px;height:25px;box-shadow:0 0 0 2px rgb(var(--clr));background-color:var(--clr-modeIcon)}}main .calc .monitor .colors-container{display:flex;justify-content:center;align-items:center;position:absolute;background-color:var(--clr-colors);width:120%;aspect-ratio:1;z-index:12;border-radius:50%;left:100%;top:0;transform:translateY(-50%);transition:top 0.5s,left 0.5s,transform 0.5s}main .calc .monitor .colors-container .colors-list{display:grid;grid-template-columns:repeat(4,25px);gap:1rem}main .calc .monitor .colors-container .colors-list .color{aspect-ratio:1;background-color:gold;border-radius:50%;transition:transform 0.2s;cursor:pointer}main .calc .monitor .arrow{display:flex;justify-content:center;align-items:center;font-size:12px;background-color:var(--clr-angel);width:1rem;height:1rem;border-radius:50%;position:absolute;bottom:10px;opacity:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s}main .calc .monitor .arrow:hover{transform:scale(1.4)}main .calc .monitor .arrow:active{box-shadow:0 0 0 1px rgb(var(--clr));transform:scale(1)}main .calc .monitor .arrow.to-left{left:15px}main .calc .monitor .arrow.to-right{right:15px}main .calc .calc-body{padding-top:10px;background-color:var(--clr-secondry);border-radius:1rem}@media (max-width:572px){main .calc .calc-body{display:grid}}main .calc .dash{width:40px;height:5px;background-color:gray;margin-inline:auto;border-radius:40px}main .calc .flexed-container{display:flex;justify-content:center;align-items:center;gap:10px;padding:2rem}main .calc .operators{display:grid;gap:10px}main footer{padding-bottom:15px;width:100%;text-align:center;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center}main footer i{color:rgb(var(--clr));transition:color 0.2s;-webkit-animation:up-down 1s alternate infinite ease-in-out;animation:up-down 1s alternate infinite ease-in-out}main footer a{margin-left:5px;color:var(--clr-text);position:relative;font-weight:bold;font-size:x-large}main footer a:after{content:"";position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);width:4px;height:4px;background-color:rgb(var(--clr));border-radius:50%;transition:width 0.2s,height 0.2s,border 0.2s;transition-timing-function:ease-in-out}main footer a:hover:after{width:100%;height:2px;border-radius:10px}main footer a:active:after{width:0}@-webkit-keyframes up-down{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes up-down{0%{transform:translateY(0)}to{transform:translateY(-5px)}}