:root{--primary: 10 210 110;--secondary: 190 60 180;--bg-light: #def;--bg-dark: #234;--banner-dark: #123;--text-color-light: 0deg 0% 90%;--text-color-lighter: 0deg 0% 95%;--text-color-dark: 0deg 0% 10%;--text-size-sm: .875rem;--text-size-md: 1rem;--text-size-lg: 1.125rem;--text-size-xl: 1.5rem;--text-size-2xl: 2rem;--text-size-3xl: 3rem;--text-size-4xl: 4rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica Now Text,Helvetica,sans-serif;background-image:linear-gradient(to bottom right,var(--bg-dark),darkslategray);color:hsl(var(--text-color-light));min-height:100vh}.container{width:min(95%,50rem);margin:auto}header{text-align:center;padding:2rem;margin-bottom:2rem;background-color:var(--banner-dark)}.card{background-color:var(--bg-light);color:hsl(var(--text-color-dark));box-shadow:0 3px 4px #0006;border-radius:.5rem;padding:.75rem;font-size:var(--text-size-lg);display:flex;align-items:center;gap:.25rem;margin-bottom:1rem}.card.dark{background-color:var(--banner-dark);color:var(--text-color-light)}button{color:inherit;padding:.25rem 1rem;border:none;cursor:pointer}.feedback-list{margin-bottom:1rem}.feedback-text{flex-grow:1;font-family:Open Sans}.feedback-rating{font-size:var(--text-size-xl);font-family:Helvetica Now Display;font-weight:700;background-color:rgb(var(--secondary));border-radius:.25rem;padding:.125rem .25rem;min-width:2.5rem;text-align:center}.feedback-icon{border:none;padding:.25rem;background-color:transparent;cursor:pointer}.feedback-icon>*{font-size:var(--text-size-lg);vertical-align:middle}.feedback-status{display:flex;justify-content:space-between;padding:1rem 0}form{padding:1rem 0rem;width:100%}form h2{padding-bottom:1rem}.form-group{display:flex;background-color:#fff;gap:2px}.form-group>*{font-size:inherit;transition-duration:.2s;transition-property:background-color;transition-timing-function:linear}.form-group input{flex-grow:1;padding:.5rem 1rem;border:none;width:100%}.form-group input:focus{background-color:hsl(var(--text-color-lighter))}.form-group input:hover{outline:2px solid rgb(var(--secondary))}.form-group button{background-color:rgb(var(--primary));font-weight:700}.form-group button:disabled{background-color:gray;cursor:not-allowed}.form-group button:focus{background-color:hsl(var(--text-color-lighter))}.form-group button:hover{text-decoration:underline;outline:2px solid rgb(var(--secondary))}.rating-list{display:flex;justify-content:space-evenly;flex-wrap:wrap;max-width:calc(20rem + 20vw);margin:auto;align-items:center;padding-block-end:1.25rem}.rating-list label{font-size:var(--text-size-xl);font-family:Helvetica Now Display;font-weight:700;background-color:#fff;padding:.5rem 1rem;border-radius:2rem;cursor:pointer;transition:all .15s ease-in-out}.rating-list input{appearance:none;transition:all .5s ease;position:relative}.rating-list input:checked{padding:0 clamp(.75rem,2vw,1.25rem)}.rating-list label input:checked:after{content:"\2714";position:absolute;top:0;left:0;font-size:var(--text-size-lg);color:#000;animation:tick 1s forwards ease-in-out}.rating-list label:first-child input:checked:after{content:"\1f625";position:absolute;top:0;left:0;font-size:var(--text-size-lg);color:#000;animation:tick 1s forwards ease-in-out}.rating-list label:last-child input:checked:after{content:"\1f929";position:absolute;top:0;left:0;font-size:var(--text-size-lg);color:#000;animation:tick 1s forwards ease-in-out}@keyframes tick{0%{transform:translate(50%,-100%) rotate(0);opacity:0;background-color:rgba(var(--primary) / .25);padding:.05rem .25rem;border-radius:50%}30%{opacity:.7;border-radius:25%;background-color:rgba(var(--primary) / .5)}to{transform:translate(-20%,-90%) rotate(-10deg);opacity:1}}.rating-list label:hover{background-color:rgba(var(--secondary) / .25)}.about h2{padding-bottom:.5rem}.about *+*{padding-block:.375rem;line-height:1.5}.about-link{position:fixed;right:0;bottom:0;padding:.75rem;color:#fff;background-color:rgba(var(--primary) / 80%);border-radius:100%;z-index:10;transform:translate(-50%,-50%)}.about-link a{color:unset;text-decoration:none;transition:color .15s ease-in-out}.about-link a:hover{color:rgb(var(--secondary))}