@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap";:root{--primary: #12bca2;--secondary: #6d15df;--font-color: #f3f3f3}h1,h2,h3{margin:0}body{margin:0;color:#333;font-family:Poppins;background:#f2f2f2}.title-container{align-items:center}.title-container img{width:16rem}@media (max-width: 500px){.title-container img{display:none}}nav{background:var(--primary);padding:10px 20px;text-align:center}nav a{color:var(--font-color);margin:10px;display:inline-block;text-decoration:none}nav .active{font-weight:700;text-decoration:underline}nav a:hover{text-decoration:underline}nav h1{color:var(--font-color);text-align:center;flex-grow:1;margin-right:16rem;font-size:42px}@media (max-width: 500px){nav h1{font-size:22px;margin-right:0}}.page{max-width:1200px;margin:0 auto;padding:20px}.smoothie-grid{margin-top:40px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}@media (max-width: 500px){.smoothie-grid{grid-template-columns:1fr}}.smoothie-card{width:100%;padding:10px;background:#fff;box-sizing:border-box;border-radius:6px;position:relative;box-shadow:#00000029 0 10px 36px,#0000000f 0 0 0 1px}.smoothie-card .rating{position:absolute;top:-10px;right:-10px;background:var(--secondary);color:#fff;border-radius:6px;width:40px;height:0;padding:20px 0;line-height:0px;text-align:center}.smoothie-card h3{margin-top:8px}form{background:#fff;padding:20px;max-width:480px;margin:0 auto;border-radius:6px}form input,form textarea{display:block;width:100%;padding:6px;box-sizing:border-box;border:1px solid #ccc;margin:10px 0 20px}form button{background:var(--primary);color:#fff;border:0;border-radius:6px;padding:6px 8px;font-family:Poppins;cursor:pointer}.smoothie-card i{margin-left:10px;font-size:1.2rem;padding:6px;border-radius:50%;cursor:pointer;background:var(--primary);color:#fff}.order-by button{margin-right:10px;background:var(--primary);color:#fff;border:0;padding:4px 8px;border-radius:6px;font-family:Poppins;cursor:pointer;width:130px;font-size:16px}@media (max-width: 500px){.order-by button{width:90px;font-size:14px}}.order-by h3{padding:0 0 8px;color:var(--font-color)}.order-by .active{font-weight:700;border:2px solid #fff}.intro{text-align:center;color:var(--font-color);background-color:#0009;padding:12px;flex-grow:1}.flex{display:flex}.gh-icon img{width:100px;height:100px}.gh-title-container{gap:22px;flex-wrap:wrap}.beach-background{background-image:url(/beach-background.jpg);min-height:100vh}
