@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Open+Sans:wght@400;700&display=swap");:root{--color-primary:#0056ad;--color-primary-dark:#003e7d}*{box-sizing:border-box}body{font-family:Open Sans,Lato,sans-serif;margin:0 auto;background-color:#f1f5f8}h1,h2,h3,h4,h5,h6{font-family:Lato,sans-serif;color:#102a42}.select{height:30px}.main{margin:2rem auto;width:100%;padding:0 1.5rem;max-width:1200px}.location{color:var(--color-primary)}h1{margin:2.5rem 0}section{margin-top:100px}.app-bar{background-color:transparent;color:var(--color-primary);box-shadow:none}.nav-link{color:var(--color-primary-dark);text-decoration:none;text-transform:capitalize}.form{background-color:#fff;color:#000;padding:40px;box-shadow:0 4px 10px rgba(49,43,43,.2);border-radius:16px;display:flex;flex-direction:column;margin:5vh;width:400px}.errors{font-size:.8rem;color:red;margin-top:.2rem;font-style:italic}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.form h1{font-size:1.4rem;margin-bottom:1rem}.actions{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center}.actions button{cursor:pointer;font:inherit;color:#fff;background-color:#0057d8;border-radius:4px;padding:.5rem 2.5rem;width:100%;font-size:1rem}.actions button:hover{background-color:#d3d3d3;border-color:#fff}.actions .error{color:red;font-size:.8rem;margin-top:.5rem}.item{width:250px;margin:.5rem 1rem}.item img{height:150px;width:100%}.price{font-size:1.5rem;margin-top:1rem}.list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;flex-grow:1}.list li{margin:0 1.5rem 1.5rem 0}.category-item{font-size:14rem;color:#0056ad;cursor:pointer}.category-list{margin-top:-1rem;margin-left:-1rem}.active{border:2px solid var(--color-primary)}.category-item.active{text-decoration:underline}.error{color:red;font-size:.8rem}.Modal{position:fixed;z-index:200;border:1px solid #eee;box-shadow:0 2px 2px #ccc;border-radius:10px;background-color:#fff;padding:10px;text-align:center;box-sizing:border-box;top:30%;left:25%;width:50%;height:auto;transition:all .3s ease-out}.ModalOpen{animation:openModal .4s ease-out forwards}.ModalClosed{animation:closeModal .4s ease-out forwards}@keyframes openModal{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(90%)}to{opacity:1;transform:translateY(0)}}@keyframes closeModal{0%{opacity:1;transform:translateY(0)}50%{opacity:.8;transform:translateY(60%)}to{opacity:0;transform:translateY(-100%)}}.Backdrop{position:fixed;z-index:100;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8)}.BackdropOpen{display:block}.BackdropClosed{display:none}