*{margin:0;padding:0;box-sizing:border-box;cursor:default}:root{--background-primary-color:#0c0c1a;--background-secondary-color:#d8322d;--text-primary-color:#e7e7f1;--text-secondary-color:#7d7d86;--text-tetiary-color:#d8322d;--font-size-normal:0.9rem;--font-size-medium:1rem;--font-family-primary:"Montserrat", sans-serif;--font-family-secondary:"Berkshire Swash", serif}input{cursor:text}button,a{cursor:pointer}button *,a *{cursor:pointer}.side-nav{position:fixed;top:0;left:0;border-right:1px solid var(--text-tetiary-color);background-color:var(--background-primary-color);height:100vh;transform:translateX(-100%);z-index:40;overflow-y:auto;overflow-x:hidden;opacity:0;box-shadow:0 0 0 100vmax rgb(0 0 0/0.5);transition:transform 400ms ease-out,opacity 400ms ease-out;pointer-events:all;width:100%;max-width:380px}.side-nav.open{opacity:1;transform:translateX(0%)}.side-nav>.side-nav-content-wrapper{padding:140px 0 40px;display:flex;flex-direction:column;gap:32px;position:relative;isolation:isolate;height:auto;min-height:100vh}.side-nav>.side-nav-content-wrapper::before{content:"";z-index:-10;position:absolute;inset:0;width:100%;height:100%;opacity:.3;top:0;left:0;background:linear-gradient(0deg,var(--text-tetiary-color) 0%,var(--background-primary-color) 100%)}.side-nav ul{margin-inline:42px;display:grid;color:#fff;gap:16px;list-style:none}.side-nav a{font-size:18px;font-weight:500;transition:all 250ms ease-out;padding:12px;display:inline-block;position:relative;transition-delay:0.15s}.side-nav a::before{content:"";position:absolute;top:0;left:0;width:3px;background-color:var(--text-tetiary-color);height:100%;mix-blend-mode:overlay;opacity:0;transform:translateX(-15px);display:inline-block;transition:all 250ms ease-out;transition-delay:0s}.side-nav a.active,.side-nav a:hover{padding-left:16px;line-height:normal;transition-delay:0s}.side-nav a.active::before,.side-nav a:hover::before{opacity:1;transform:translateX(0);transition-delay:0.15s}.side-nav footer{justify-self:flex-end;padding:40px 42px;padding-bottom:0;margin-top:auto;position:relative;display:flex;flex-direction:column}.side-nav footer::before{content:"";position:absolute;top:0;left:0;width:100%;background-color:var(--text-tetiary-color);height:1px;mix-blend-mode:overlay}.side-nav footer a{font-size:18px;font-weight:500;color:#fff;display:block;align-items:center;text-align:left;gap:16px}.side-nav footer div{display:flex;justify-content:space-between}.side-nav footer button{border:1px solid var(--text-tetiary-color);padding:6px 8px 4px;background-color:#fff0;border-radius:9999px;cursor:pointer}.side-nav footer button:hover{background-color:var(--text-tetiary-color)}@media (max-width:640px){.side-nav>.side-nav-content-wrapper{padding-top:100px}}.drop-down-container{display:flex;flex-direction:column;margin-inline:42px;gap:10px;margin-bottom:-1rem;transition:margin-bottom 0.5s ease}.tools{padding:0 12px 12px}.drop-down-container header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.drop-down-container header h2{font-size:18px;font-weight:600}.drop-down-container:nth-child(2){padding:12px}.drop-down-container header h2 span{font-family:"Berkshire Swash";font-weight:400}.drop-down-container ul{margin-inline:4px;gap:0;visibility:hidden;opacity:0;max-height:0;transition:max-height 0.5s ease,opacity 0.5s ease}.section-drop-down-control{transition:all 0.5s ease}.drop-down-container.open ul{margin-bottom:0;opacity:1;max-height:500px;visibility:visible}.drop-down-container.open.section-drop-down-control{transform:rotate(180deg)}.drop-down-container ul a{white-space:nowrap}.active{border-left:var(--text-primary-color)}.drop-down-container ul a:not([href]){display:none}.toggle-side-bar{padding:16px 32px;border-radius:0 12px 12px 0;border:1px solid var(--text-tetiary-color);border-left:none;background:var(--background-primary-color);display:flex;align-items:center;column-gap:16px;padding:16px 32px;position:relative;z-index:80}.toggle-side-bar span::before{position:relative;content:attr(data-close-text)}.toggle-side-bar.open span::before{content:attr(data-open-text)}.toggle-side-bar.open.hamburger-menu{transform:translateX(-11px)}.toggle-side-bar.open.hamburger-menu>:first-child{transform:rotate(135deg) translate(0,-11px)}.toggle-side-bar.open.hamburger-menu>:last-child{transform:rotate(-135deg) translate(0,11px)}.toggle-side-bar.open.hamburger-menu>:nth-child(2){opacity:0;transform:translateX(-100%)}.hamburger-menu{display:grid;gap:6px;width:24px;transition:transform 300ms ease-out}.hamburger-menu>div{width:100%;height:2px;background-color:#fff;border-radius:99px;transform-origin:center center;transition:all 300ms ease-out}main{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:fit-content;margin:7rem 0 6rem}.calculator-section{display:flex;flex-direction:column;justify-content:center;align-items:center;height:fit-content;width:fit-content;padding:2rem 1rem;background-color:#ffffff05;border:1px solid #ffffff1a;border-radius:20px}.calculator-section>h1{text-align:center;font-size:1rem;font-weight:500;margin:2rem 0 1rem;color:#fff}.calculator-form{background-color:#fff0;padding:2rem 1rem;width:500px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.equals-to{width:100%;text-align:center;grid-column:span 2 / span 2}.input-group{display:flex;background-color:#ffffff08;border:1px solid #ffffff13;border-radius:50px;align-items:center;padding:.5rem 1rem;gap:20px;grid-column:span 1 / span 1}#select-input-group{grid-column:span 2 / span 2;gap:10px}.input-group>label{background-color:#ffffff05;color:#7d7d86;border-radius:100%;padding:1rem;font-size:14px;display:flex;justify-content:center;align-items:center;width:40px;height:40px}#select-input-group>label{padding:0}.input-group>input{padding:.3rem 1rem;border:none;border-left:1px solid #ffffff36;-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll;width:80%}.input-group>input::-webkit-scrollbar{display:none}.input-group>input,.input-group>button{background-color:#fff0;color:#7d7d86;font-size:1rem;flex:auto}.input-group>input:focus{outline:none;border-left:1px solid #8300fe}#common-ratios>span{text-align:left;padding-right:10px}.input-group>button{border:0;cursor:pointer;display:flex;justify-content:space-between;padding:.3rem .5rem;height:100%;align-items:center}.input-group>button:focus{outline:none;border:none}.dropdown-container{position:fixed;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;top:0;left:0;z-index:40;transition:opacity 0.3s ease;background-color:rgb(0 0 0 / .4)}.dropdown-container.show{opacity:1;visibility:visible}.ratio-dropdown{position:fixed;background:#11111e;border-radius:15px;color:var(--text-secondary-color);overflow:hidden;height:80vh;width:38rem;left:0;top:50%;left:50%;transform:translate(-50%,-50%)}.ratio-dropdown-header{background-color:#181825;padding:2rem;display:flex;flex-direction:row;justify-content:space-between}.ratio-dropdown-header>svg{width:15px;cursor:pointer}.ratio-dropdown-body{padding:0 1rem 2rem;flex:auto;overflow:scroll;height:calc(100% - 60px)}.dropdown-info{text-align:center;padding:0 2rem 1rem;width:70%;line-height:1.5;margin:2rem auto 0}.ratio-list>li{padding:1rem;border-radius:15px;cursor:pointer}.ratio-list>li*{cursor:pointer}.ratio-list>li:hover{background-color:#ffffff05}.ratio-list>li,.ratio-list>li>p:first-child{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.ratio-list>li>p:first-child{justify-content:start;gap:1rem}.aspect-result{text-align:left;margin-top:1.5rem;grid-column:span 2 / span 2}.aspect-result p{color:var(--text-primary-color);font-size:var(--font-size-medium)}.aspect-result.ratio{display:flex;flex-direction:row;align-items:center;width:fit-content;gap:7px}.aspect-result>div input{background-color:#fff0;border:none;width:8px;min-width:8px;max-width:fit-content;outline:none;color:var(--text-secondary-color);border-bottom:1px solid #fff0;font-size:var(--font-size-normal);font-family:var(--font-family-primary);font-size:1.2rem;text-align:right;padding:0;transition:width 0.2s ease;border-bottom:1px solid var(--text-primary-color)}.aspect-result>div input:nth-of-type(1){text-align:right}.aspect-result>div input:nth-of-type(2){text-align:left}.aspect-result>div{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:1rem;font-size:1.2rem;padding:1.5rem 1rem;text-align:center;border-radius:25px;font-weight:400;width:100%;gap:15px;border:1px solid #ffffff13}.aspect-result>div span{color:var(--text-secondary-color)}.checkbox-group{display:flex;align-items:center;margin-top:1rem;grid-column:span 2 / span 2}.checkbox-group label{font-size:.85rem;color:#ffffffc6}.control{display:block;position:relative;padding-left:30px;margin-bottom:20px;padding-top:3px;cursor:pointer;font-size:16px}.control input{position:absolute;z-index:.2;opacity:0;left:0;width:16px;height:16px;cursor:pointer}.control_indicator{position:absolute;left:0;height:18px;width:18px;border:0 solid #000;border-radius:20px}.control:hover input~.control_indicator,.control input:focus~.control_indicator{background:#cccccc69}.control input:checked~.control_indicator{background:#9f9fa9c0}.control_indicator,.control input:checked:focus~.control_indicator{background:#8b8b95a4}.control_indicator{background:#7d7d86a4;opacity:.6;pointer-events:none}.control_indicator:after{box-sizing:unset;content:"";position:absolute;display:none}.control input:checked~.control_indicator:after{display:block}.control-checkbox .control_indicator:after{left:6px;top:3px;width:3px;height:8px;border:solid #0e0e18;border-width:0 2px 2px 0;transform:rotate(45deg)}.control_indicator:after{border-color:#e6e6e689}.control-checkbox .control_indicator::before{content:"";display:block;position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;margin-left:-.8rem;margin-top:-.7rem;background:#63636b5b;border-radius:3rem;opacity:.6;z-index:99999;transform:scale(0)}.control_indicator.hide{z-index:-1}@keyframes s-ripple{0%{transform:scale(0)}20%{transform:scale(1)}100%{opacity:0;transform:scale(1)}}@keyframes s-ripple-dup{0%{transform:scale(0)}30%{transform:scale(1)}60%{transform:scale(1)}100%{opacity:0;transform:scale(1)}}.control-checkbox input+.control_indicator::before{animation:s-ripple 250ms ease}.control-checkbox input:checked+.control_indicator::before{animation-name:s-ripple-dup}.reset-button{width:100%;grid-column:span 2 / span 2;height:50px;border-radius:20px;border-width:1px;padding:16px;border:1px solid #d819233f;background:#d8192313;color:#fff;font-size:var(--font-size-normal);font-family:var(--font-family-primary);transition:all 0.3s ease}.reset-button:hover{border:1px solid #d819214d;background:#d819211a}.output-example{margin-top:2rem;text-align:center;grid-column:span 2 / span 2;display:flex;justify-content:center;align-items:center}.example-box{width:100%;height:0;background-color:#fff;width:90%;color:#0e0e18;display:flex;justify-content:center;align-items:center;transition:width 0.5s ease,height 0.5s ease}footer{text-align:center;padding:2rem 0;background-color:#fff0;color:var(--text-secondary-color);display:flex;flex-direction:column;gap:.7rem}footer p:nth-child(2)span{font-weight:600}.footer-link{color:var(--text-tetiary-color)}.footer-link:hover{text-decoration:underline}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{width:5px;height:5px;border-radius:10px;background-color:var(--text-tetiary-color)}video{opacity:0;z-index:-1;position:absolute;top:0;left:0;width:100%;height:auto}@media (max-width:668px){:root{--font-size-normal:0.85rem;--font-size-medium:0.95rem}.calculator-section{width:90%}.calculator-form{width:100%}.dropdown-container{height:100%}.ratio-dropdown{width:90vw}}@media (max-width:640px){.side-nav>.side-nav-content-wrapper{padding-top:80px}header#page-header>:where(a,button,span){padding:12px 17.5px;font-size:14px}.hamburger-menu{width:20px}.email-icon{width:35px}header#page-header a.brand-button.button-right{padding:12px 14px}}@media (max-width:568px){main{margin-top:8rem}.input-group{grid-column:span 2 / span 2}menu button img{width:20px;height:auto;margin-left:-.8rem}.slide-menu{width:100vw}.dropdown-info{width:90%;margin:2rem auto 0}.dropdown-container{margin-top:0;height:100vh;width:100vw}.ratio-dropdown{position:fixed;background:#11111e;border-radius:0;color:var(--text-secondary-color);overflow:hidden;height:100vh;width:100vw;left:0;top:50%;left:50%;transform:translate(-50%,-50%)}.equals-to{display:block}.calculator-form{padding:2rem .3rem}}