*{box-sizing:border-box;padding:0;margin:0;font-family:Poppins,sans-serif;--font-size:20px;--frame-color:#000;--size:2.5em;--open-width:min(22em,calc(100vw - 3rem));--open-padding:0.3em 2.1em 0.3em 0.4em;--frame-thickness:0.3em;--handle-height:1.4em;--open-trans-time:800ms;--close-trans-time:150ms}html{background-color:#f0f0ef}body,html{max-width:100vw}a{color:inherit;text-decoration:none}@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");.search-box{font-size:var(--font-size);border:solid var(--frame-thickness) var(--frame-color);display:inline-block;position:relative;border-radius:var(--size)}.search-box input[type=text]{font-family:inherit;font-weight:700;width:var(--size);height:var(--size);padding:var(--open-padding);border:none;box-sizing:border-box;border-radius:var(--size);transition:width var(--open-trans-time) cubic-bezier(.68,-.55,.27,1.55) var(--close-trans-time)}.search-box input[type=text]:focus{outline:3px solid #fff;outline-offset:3px}.search-box input[type=text]:focus,.search-box input[type=text]:not(:placeholder-shown){width:var(--open-width);transition:width var(--open-trans-time) cubic-bezier(.68,-.55,.27,1.55);~button[type=reset]{transform:rotate(-45deg) translateY(0);transition:transform var(--close-trans-time) ease-out var(--open-trans-time)}~button[type=reset]:after{opacity:1;transition:top var(--close-trans-time) ease-out (var(--open-trans-time) + var(--close-trans-time)),right var(--close-trans-time) ease-out (var(--open-trans-time) + var(--close-trans-time)),opacity var(--close-trans-time) ease (var(--open-trans-time) + var(--close-trans-time))}}.search-box button[type=reset]{background-color:transparent;width:var(--handle-height);height:var(--handle-height);border:0;padding:0;outline:0;display:flex;justify-content:center;align-items:center;position:absolute;top:calc((var(--size) / 2) - (var(--handle-height) / 2));right:calc((var(--size) / 2) - (var(--handle-height) / 2));transform:rotate(-45deg) translateY(calc(var(--size) - var(--frame-thickness)));transition:transform var(--close-trans-time) ease-out var(--close-trans-time)}.search-box button[type=reset]:focus-visible{outline:3px solid #fff;outline-offset:3px}@media (prefers-reduced-motion:reduce){.search-box button[type=reset],.search-box button[type=reset]:after,.search-box input[type=text]{transition:none}}.search-box button[type=reset]:after,.search-box button[type=reset]:before{content:"";background-color:var(--frame-color);width:var(--frame-thickness);height:var(--handle-height);position:absolute}.search-box button[type=reset]:after{transform:rotate(90deg);opacity:0;transition:transform var(--close-trans-time) ease-out,opacity var(--close-trans-time) ease-out}