:root { --primary: rgb(67, 233, 123); /* your green */ --primary-dark: rgb(40, 200, 100); --accent: rgb(255, 92, 92); /* delete / warning */ --text-main: rgb(40, 40, 40); --text-light: rgb(120, 120, 120); --bg: rgb(245, 245, 245); --white: #ffffff; } body { font-family: Roboto, sans-serif; background-color: var(--bg); color: rgb(33, 33, 33); /* The element has a default margin of 8px on all sides. This removes the default margins. */ margin: 0; } /*

elements have a default margin on the top and bottom. This removes the default margins. */ p { margin: 0; } button { font-family: inherit; border: none; border-radius: 25px; padding: 10px 18px; cursor: pointer; transition: all 0.2s ease; } /* select { cursor: pointer; } input, select, button { font-family: Roboto, Arial; } */ .button-primary { background-color: var(--primary); color: white; } .button-primary:hover { background-color: var(--primary-dark); transform: translateY(-1px); } .button-primary:active { transform: scale(0.96); background-color: var(--primary-dark); } button:hover { opacity: 0.95; } .button-secondary { color: rgb(33, 33, 33); background: white; border: 1px solid rgb(213, 217, 217); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5); } .button-secondary:hover { background-color: rgb(247, 250, 250); } .button-secondary:active { background-color: rgb(237, 253, 255); box-shadow: none; } .button-soft { display: inline-block; text-decoration: none; background-color: rgba(67, 233, 123, 0.1); color: var(--primary); padding: 10px 16px; border-radius: 20px; transition: all 0.2s ease; } .button-soft:hover { background-color: rgba(67, 233, 123, 0.2); } /* These styles will limit text to 2 lines. Anything beyond 2 lines will be replaced with "..." You can find this code by using an A.I. tool or by searching in Google. https://css-tricks.com/almanac/properties/l/line-clamp/ */ .limit-text-to-2-lines { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-primary { color: rgb(1, 124, 182); cursor: pointer; } .link-primary:hover { color: rgb(196, 80, 0); } .product-link { text-decoration: none; color: inherit; display: block; } /* Styles for dropdown selectors. */ /* select { color: rgb(33, 33, 33); background-color: rgb(240, 240, 240); border: 1px solid rgb(213, 217, 217); border-radius: 8px; padding: 3px 5px; font-size: 15px; cursor: pointer; box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5); } select:focus, input:focus { outline: 2px solid rgb(255, 153, 0); } */