@import url(https://fonts.googleapis.com/css2?family=Poiret+One&display=swap);:root{--inner-height:100%}html{height:var(--inner-height)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#root{height:100%}*,:after,:before{box-sizing:border-box}.interface{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:transparent}.grid-wrapper{height:100%;width:100%;display:grid;grid-template:" . slider ." " . graph . " " . menu . ";grid-template-columns:5% 90% 5%;grid-template-rows:10% 75% 12.5%}header{grid-area:graph;align-self:center;z-index:1;opacity:0;animation:show-title 2.5s ease-in-out;animation-fill-mode:forwards}header .title{margin:0;font-family:Vegan Style,Brush Script MT,Arial,sans-serif;font-size:3em}header .sub-title{margin:0;font-family:Poiret One,Arial,sans-serif;letter-spacing:1px}@media (min-width:850px){.grid-wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;grid-template:" . sidepanel graph slider . " " . sidepanel menu slider .";grid-template-columns:10% 5% 70% 5% 10%;grid-template-rows:70vh 10vh}header .title{font-size:5em;letter-spacing:1px}}@keyframes show-title{0%{opacity:0}20%{opacity:1}70%{opacity:1}to{opacity:0}}.graph{grid-area:graph;padding:0 2px;position:relative;border-radius:10px 10px 0 0;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(3px,1fr));grid-gap:1px;align-items:end}.fast-bar-transition{transition:height .2s}.slow-bar-transition{transition:height .6s}@media (min-width:850px){.graph{padding:0 2px;border-radius:30px 30px 0 0;grid-gap:2px}}.slider{grid-area:slider;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .6s}.range-slider{-webkit-appearance:none;background:none;opacity:.8}.range-slider:focus{opacity:1;outline:none}.range-slider:hover{opacity:1}.range-slider::-webkit-slider-runnable-track{height:14px;border-radius:14px;cursor:pointer;background:rgba(24,44,97,.9)}.range-slider::-moz-range-track{height:14px;border-radius:14px;cursor:pointer;background:rgba(24,44,97,.9)}.range-slider::-ms-track{height:14px;border-radius:14px;cursor:pointer;background:rgba(24,44,97,.9);color:transparent}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;height:28px;width:28px;transform:translateY(-7px);border-radius:50%;background:#1c5491;cursor:pointer}.range-slider::-moz-range-thumb{height:28px;width:28px;border-style:none;border-radius:50%;background:#1c5491;cursor:pointer}.range-slider::-ms-thumb{height:28px;width:28px;transform:translateY(-7px);border-radius:50%;background:#1c5491;cursor:pointer}.counter{position:absolute;top:110%;width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center}@media (min-width:850px){.range-slider{transform:rotate(270deg)}.counter{top:unset;display:none;transform:translateX(3em) translateY(4px)}.range-slider:focus+.counter,.range-slider:hover+.counter{display:flex}}.side-panel{grid-area:sidepanel}.menu-container{grid-area:menu;display:flex;justify-content:space-evenly;align-items:center;border-radius:0 0 10px 10px;transition:background-color .6s}.menu-item{padding:2.5vh 0;border-style:none;border-radius:4px;transition:box-shadow .2s;transition:opacity .6s;font-size:.9em}.menu-item:focus{outline:none;box-shadow:inset 0 0 0 3px #ddd}@media (min-width:850px){.menu-container{border-radius:0 0 30px 30px}.menu-item{font-size:1.2em;padding:1.5vh}}@font-face{font-family:"Vegan Style";src:url(/visual-sorting/static/media/veganstylepersonaluse-5y58-webfont.0f8f1f72.woff2) format("woff2"),url(/visual-sorting/static/media/veganstylepersonaluse-5y58-webfont.2a03ba22.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
/*# sourceMappingURL=main.ad707672.chunk.css.map */