:root{--white: #fff;--black: #000;--primary-1: #c0392b;--primary-2: #e74c3c;--primary-3: #d35400;--primary-4: #d35400;--primary-5: #f5b7b1;--neutral-1: #222222;--neutral-2: #444444;--neutral-3: #777777;--neutral-4: #999999;--neutral-5: #cccccc;--accent-1: #003366;--accent-2: #336699;--accent-3: #6699cc;--accent-4: #99ccff;--accent-5: #d9edf7}body{background-color:var(--neutral-5);margin:0;font-family:system-ui}h1{font-size:36px;font-weight:600}h2{font-size:28px;font-weight:500}h3{font-size:24px;font-weight:400}p{line-height:30px;font-size:18px}a{color:var(--primary-2);font-weight:700;text-decoration:none}a:hover{text-decoration:underline}.rounded{border-radius:30px}.container{max-width:900px;margin:0 auto;padding:0 20px}.btn{border-radius:3px;display:inline-block;cursor:pointer;font-size:14px;font-weight:600;padding:13px 40px;border:0;transition:background-color .2s,color .2s}.btn-default{color:var(--white);background-color:var(--primary-1)}.btn-default:hover,.btn-outline:hover{color:var(--white);background-color:var(--primary-2);text-decoration:none}.btn-default:active,.btn-outline:active{color:var(--primary-1);background-color:var(--primary-4)}.btn-default[disabled],.btn-outline[disabled]{color:var(--primary-4);background-color:var(--primary-5);cursor:default}.btn-accent{color:var(--white);background-color:var(--accent-1)}.btn-accent:hover{color:var(--white);background-color:var(--accent-2);text-decoration:none}.btn-accent:active{color:var(--accent-1);background-color:var(--accent-4)}.btn-accent[disabled]{color:var(--accent-4);background-color:var(--accent-5);cursor:default}.btn-outline{color:var(--primary-1);background-color:var(--primary-4);border:var(--primary-1) 2px solid;box-shadow:1px 1px 7px #c4c4c4;padding:8px 25px;border-radius:10px}.form h2{font-size:24px;font-weight:400}.form h3{font-size:20px;font-weight:300;margin-bottom:15px}.form-section{border-bottom:var(--neutral-4) solid 1px;margin-bottom:20px}.input-required{color:var(--primary-2);text-decoration:none;font-weight:700;padding:0 1px}.label{display:block;font-weight:500}.input{font-size:16px;margin-top:1em;margin-bottom:1.5em;padding:.75em .5em;min-width:200px;border:none;border-left:7px solid var(--neutral-4);transition:border-left-color .16s;background-color:#fff}::placeholder{color:var(--neutral-4)}input:focus{outline:none;border-left:7px solid var(--primary-1)}.navbar{background-color:#fff;padding:10px;box-shadow:0 3px 7px 1px #00000012,0 -3px 7px 1px #00000012;display:flex;align-items:center;justify-content:space-between}.nav-brand{font-size:40px;font-weight:450;text-decoration:none;padding-left:20px;color:initial}.nav-brand:hover{text-decoration:none}.nav-brand:active{color:var(--primary-1)}.navbar ul{list-style-type:none;overflow:hidden;padding-right:20px;text-align:center}.navbar li{display:inline-block}.nav-item a{text-decoration:none;font-weight:400;color:var(--primary-1);display:inline-block;text-align:center;padding:13px 20px;min-width:75px}.nav-item:hover a{text-decoration:none;color:var(--primary-2)}.nav-item a.active{font-weight:700}.nav-cart{width:65px;text-align:center;padding:10px 25px}.tabs{margin:0 0 40px;border-bottom:var(--neutral-4) solid 1px}.tabs ul{list-style-type:none;margin:0;padding:0 0 10px}.tabs li{display:inline-block}.tabs a{text-decoration:none;padding-bottom:10px;color:var(--black);padding-left:15px;padding-right:15px}.tabs .tab-active{border-bottom:7px solid var(--primary-1)}.home-layout{display:grid;grid-template-columns:1fr auto;place-items:center;grid-gap:20px;padding-top:40px}.about-layout{display:grid;grid-template-columns:1fr auto;grid-gap:20px;padding-top:40px}.products-layout{padding-top:40px;padding-bottom:40px}.product-details-layout{padding-top:40px;display:grid;grid-template-columns:auto 1fr;grid-gap:40px}.products-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:25px}.product{background-color:#fff;padding:15px 20px;border-radius:25px;display:grid;grid-template-columns:auto 1fr auto}.product-info{padding-left:25px}.product-checkout{display:grid;grid-template-rows:1fr auto;justify-items:end}.product-delete{background-color:#fff;padding:5px 10px;color:var(--accent-1);border-color:var(--accent-2);font-size:14px}.product-image-container{position:relative}.product-quantity-container{position:absolute;top:8px;right:-15px;background-color:#fff;border-radius:50%;padding:5px}.product-quantity{background-color:var(--primary-1);color:#fff;border-radius:50%;font-size:14px;width:23px;height:23px;display:grid;place-items:center}.product-image{background-color:var(--neutral-5);padding:10px;border-radius:20px;transition:transform .18s ease-out}.product:nth-child(2n):hover .product-image{transform:scale(1.01) rotate(2deg)}.product:nth-child(odd):hover .product-image{transform:scale(1.01) rotate(-2deg)}.product h3,.product p{margin:0}.product-details-image{background-color:#fff;padding:10px;border-radius:20px}.table{width:100%;border-collapse:collapse}.table thead{background-color:var(--primary-1);color:#fff;border:1px solid white;border-top:0}.table.table-cart thead{background-color:var(--accent-1)}.table th{padding:15px}.table td{padding:10px}.table tbody{font-size:18px;border:1px solid white}.table-cart{text-align:center}.table-cart tbody td:first-child{display:flex;align-items:center;gap:15px;padding-left:20px}.table-nutrition tbody td:last-child{text-align:center}.table tbody tr:nth-child(2n){background-color:#fff}.table tbody tr:nth-child(odd){background-color:var(--neutral-5)}.th-product{text-align:left;padding-left:25px}.cart-highlight{background-color:var(--accent-1);color:#fff}.pay-form{padding-top:30px}@media (max-width: 700px){.home-layout,.about-layout,.products-grid,.product-details-layout{grid-template-columns:1fr}.home-image{order:-1}}.spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}@keyframes colors{0%{stroke:#4285f4}25%{stroke:#de3e35}50%{stroke:#f7c223}75%{stroke:#1b9a59}to{stroke:#4285f4}}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}
