@import"https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap";:root{--Orange: hsl(25, 97%, 53%);--White: hsl(0, 0%, 100%);--Light-Grey: hsl(217, 12%, 63%);--Medium-Grey: hsl(216, 12%, 54%);--Dark-Blue: hsl(213, 19%, 18%);--Very-Dark-Blue: hsl(216, 12%, 8%);--circular-bg-height-n-width: 3em;--para-n-button-font: 1.05em;--desktop-form-btns-transition: all ease-in-out .15s}*{margin:0;padding:0;box-sizing:border-box}.page{min-height:100dvh;background-color:#000;display:flex;justify-content:center;align-items:center;padding:1.5rem}.card{line-height:1.4;font-family:Overpass;background-image:linear-gradient(45deg,#121417 5%,#252d37 100%);border-radius:1.2em;padding:2rem}.content .star-container,.ratings .rating{display:flex;justify-content:center;align-items:center;min-height:var(--circular-bg-height-n-width);max-width:var(--circular-bg-height-n-width);background-color:var(--Dark-Blue);border-radius:50%}.content>:is(h2.title){padding-top:2rem}.content>:not(:first-child){padding:.75rem 0}.title{color:var(--White)}.description{font-size:var(--para-n-button-font);font-weight:700;color:var(--Medium-Grey)}.ratings{color:var(--Light-Grey);font-weight:400;display:flex;justify-content:center;align-items:center;gap:.5rem}.ratings button{font-size:var(--para-n-button-font);outline:none;border:none;color:var(--Light-Grey);transition:var(--desktop-form-btns-transition)}.rating{flex:1}.selected.choice{background-color:var(--Orange);color:var(--White)}.action{display:flex;justify-content:center}.action>.submit{flex:1;padding:1rem;font-weight:700;letter-spacing:.125rem;text-transform:uppercase;border:none;border-radius:2em;color:var(--White);background-color:var(--Orange);transition:var(--desktop-form-btns-transition)}.content>section.thank-you{display:flex;flex-direction:column;align-items:center;gap:1.75rem}.selected-rating{display:flex;justify-content:center;align-items:center;font-size:15px;padding:1em;border-radius:2em;min-height:3rem;color:var(--Orange);background-color:var(--Dark-Blue)}.thank-you h2{color:var(--White)}.thank-you .gratitude{text-align:center;color:var(--Light-Grey)}@media (hover: hover) and (pointer: fine){.ratings>button:hover{font-weight:700;color:var(--White);background-color:var(--Light-Grey)}.submit:hover{color:var(--Orange);background-color:var(--White)}}@media (min-width: 400px){.card{max-width:400px}.ratings{justify-content:space-between}}