:root{--sage-green: hsl(120, 20%, 40%);--forest-green: hsl(120, 30%, 25%);--olive: hsl(60, 20%, 40%);--dusty-rose: hsl(340, 30%, 70%);--blush-pink: hsl(340, 40%, 80%);--mauve: hsl(320, 20%, 60%);--mustard: hsl(45, 60%, 60%);--golden-yellow: hsl(45, 70%, 50%);--warm-beige: hsl(30, 20%, 85%);--cream: hsl(45, 30%, 95%);--off-white: hsl(30, 10%, 98%);--text-dark: hsl(120, 10%, 20%);--text-muted: hsl(120, 5%, 50%)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;color:var(--text-dark);background-color:var(--cream);line-height:1.6;min-height:100dvh;display:flex;flex-direction:column}main{flex:1;padding:2rem 1rem;max-width:40rem;margin:0 auto;width:100%}header{padding:1.5rem 1rem;text-align:center;background-color:var(--off-white);border-bottom:2px solid var(--sage-green)}header h1{font-size:2.5rem;color:var(--forest-green);margin-bottom:.5rem}header p{font-size:1.25rem;color:var(--mauve);font-style:italic}footer{padding:1rem;text-align:center;color:var(--text-muted);font-size:.875rem;background-color:var(--warm-beige)}#recommendation-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;padding:1.5rem;background-color:var(--off-white);border-radius:8px;border:1px solid var(--sage-green)}#recommendation-form div{display:flex;flex-direction:column;gap:.5rem}#recommendation-form label{font-weight:600;color:var(--forest-green)}#recommendation-form select{padding:.5rem;border:1px solid var(--olive);border-radius:4px;background-color:var(--cream);font-size:1rem}#recommendation-form button{padding:.75rem 1.5rem;background-color:var(--dusty-rose);color:var(--off-white);border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}#recommendation-form button:hover{background-color:var(--blush-pink)}#results{margin-top:2rem}.show-item{background-color:var(--off-white);border:1px solid var(--sage-green);border-radius:8px;padding:1rem;margin-bottom:1rem}.show-item h3{color:var(--forest-green);margin-bottom:.5rem;font-size:1.25rem}.show-item p{color:var(--text-dark);line-height:1.5}@media(min-width:768px){main{padding:3rem 2rem}header{padding:2rem}header h1{font-size:3rem}#recommendation-form{padding:2rem}.show-item{padding:1.5rem}.hidden{display:none}}