:root{font-family:Inter Tight,system-ui,Helvetica,Arial,sans-serif;font-weight:400;color-scheme:light dark;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0}#root{overflow:hidden;height:max-content;min-height:100vh}body{overflow-x:hidden}.header{text-align:left;width:calc(100% - 6rem);height:20vh;margin:0 auto auto;background:linear-gradient(to bottom,#158eff,#0077e7);padding:7rem 3rem 5rem;display:flex;color:#fff;align-items:center;justify-content:center;gap:8rem;position:relative}.header-img-wrapper{transform:translate(-50%,-50%);height:130%;transition:transform .3s;position:absolute;top:0;left:0}.header-img{height:100%;animation:spin infinite 20s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header-img-wrapper:hover{transform:translate(-45%,-45%)}.header b,.header h1{margin:0}.header h1{font-size:2.5rem}.header a{color:#fff;text-decoration-style:dotted}.header-content{max-width:30rem}.searchbar{border:none;border-radius:.5rem;background-color:#fff;box-shadow:0 3px 10px #00000059;outline:none;color:#000;font-family:inherit;position:absolute;left:50%;bottom:-2rem;transform:translate(-50%);width:50%;max-width:60rem;display:grid;align-items:center;grid-template-columns:1fr auto}.searchbar input{padding:1.25rem;padding-right:0;background-color:#fff;border:none;outline:none;color:inherit;font-family:inherit;flex-grow:1;border-radius:.5rem;font-size:1rem;width:100%}.searchbar input::placeholder{opacity:.75}.mode-selector{border-left:1px solid #ddd;padding:.5rem 1.5rem;position:relative}.mode-selector .options{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 3px 8px #00000059;border-radius:.5rem;top:calc(100% + 1rem);left:0;right:0;transform:translateY(-.5rem);transition:.15s;position:absolute}.mode-selector .options .option{padding:.75rem 1rem;cursor:pointer;transition:color .1s;text-transform:capitalize}.mode-selector .options .option:hover{color:#0077e7}.mode-selector .options.opened{transform:translateY(0);opacity:1;pointer-events:initial;-webkit-user-select:initial;user-select:initial}.currentMode{text-transform:capitalize;display:flex;align-items:center;cursor:pointer;transition:color .15s}.currentMode:hover{color:#0077e7}.currentMode span{margin-left:.5rem;transition:.1s;-webkit-user-select:none;user-select:none}.rotated{transform:rotate(180deg)}@media screen and (max-width: 890px){.searchbar{width:90%}.header-title{text-align:center}.header-content{text-align:center;max-width:90%}.header{flex-direction:column;gap:.5rem}.header-img-wrapper{transform:translate(-50%,-50%);height:100%;transition:transform .3s;top:0;left:50%}.header-img-wrapper:hover{transform:translate(-50%,-45%)}}