:root{--Light-red: hsl(0, 100%, 67%);--Orangey-yellow: hsl(39, 100%, 56%);--Green-teal: hsl(166, 100%, 37%);--Cobalt-blue: hsl(234, 85%, 45%);--Light-slate-blue: hsl(252, 100%, 67%);--Light-royal-blue: hsl(241, 81%, 54%);--Violet-blue: hsla(256, 72%, 46%, 1);--Persian-blue: hsla(241, 72%, 46%, 0);--White: hsl(0, 0%, 100%);--Pale-blue: hsl(221, 100%, 96%);--Light-lavender: hsl(241, 100%, 89%);--Dark-gray-blue: hsl(224, 30%, 27%)}*,*:before,*:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Hanken Grotesk,serif;font-optical-sizing:auto;font-weight:500;font-style:normal;font-size:1em;line-height:1.4;color:var(--Dark-gray-blue);background-color:var(--Pale-blue);height:100vh;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;margin:0}@media (min-width: 768px){body{justify-content:center}}#root{width:100%}h1,h2,h3,h4,h5,h6{font-weight:700;margin:0}p{font-weight:500;margin:0}ul{padding-left:0;margin:0;list-style-type:none}strong{font-weight:700}.main{display:flex;flex-direction:column;width:100%;max-width:100%;margin:0 auto;background-color:var(--White)}@media (min-width: 768px){.main{width:46rem;flex-direction:row;border-radius:2rem;box-shadow:0 30px 60px #3d6cec26}}.main__left{display:flex;flex-direction:column;align-items:center;padding:2rem;width:100%;background:var(--Light-slate-blue);background:linear-gradient(180deg,var(--Light-slate-blue) 0%,var(--Light-royal-blue) 100%);border-radius:2rem;text-align:center}@media (min-width: 768px){.main__left{padding:2.75rem 4.5rem;width:50%}}.main__left h1{font-size:1.125rem;line-height:1;color:var(--Light-lavender);margin-bottom:2rem}@media (min-width: 768px){.main__left h1{font-size:1.5rem}}.main__left p{font-size:1rem}@media (min-width: 768px){.main__left p{font-size:1.125rem}}.main__eval{font-size:1.5rem;font-weight:700;color:var(--White);margin-bottom:.5rem}@media (min-width: 768px){.main__eval{font-size:2rem}}.main__left p{color:var(--Light-lavender)}.main__score{display:flex;flex-direction:column;align-items:center;justify-content:center;width:8.75rem;aspect-ratio:1;border-radius:50%;background:var(--Violet-blue);background:linear-gradient(180deg,var(--Violet-blue) 0%,var(--Persian-blue) 100%);margin-bottom:1.5rem}@media (min-width: 768px){.main__score{width:12.5rem}}.main__number-1{font-size:3.5rem;font-weight:700;color:var(--White);line-height:1}@media (min-width: 768px){.main__number-1{font-size:4.5rem}}.main__number-2{font-size:1rem;font-weight:700;opacity:.5;color:var(--Light-lavender)}@media (min-width: 768px){.main__number-2{font-size:1.125rem}}.main__right{width:100%;padding:1.875rem}@media (min-width: 768px){.main__right{width:50%;padding:2.75rem}}.main__right h2{font-size:1.125rem;line-height:1;color:var(--Dark-gray-blue);margin-bottom:2rem}@media (min-width: 768px){.main__right h2{font-size:1.5rem}}.main__right ul{margin-bottom:2.5rem}.main__right li{display:flex;align-items:center;justify-content:space-between;position:relative;height:3.5rem;border-radius:.75rem;padding:0 1.25rem 0 3rem;font-size:1rem;font-weight:700;margin-bottom:1rem}@media (min-width: 768px){.main__right li{font-size:1.125rem}}.main__right li:last-child{margin-bottom:0}.main__right li span{position:relative}.main__right li:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--White);opacity:.95}.main__right .li-0{color:var(--Light-red);background-color:var(--Light-red)}.main__right .li-1{color:var(--Orangey-yellow);background-color:var(--Orangey-yellow)}.main__right .li-2{color:var(--Green-teal);background-color:var(--Green-teal)}.main__right .li-3{color:var(--Violet-blue);background-color:var(--Violet-blue)}.main__item-score{color:var(--Dark-gray-blue)}.main__item-score span{opacity:.5}.main__metric{position:relative;display:flex;align-items:center;font-weight:500}.main__metric img{position:absolute;left:-2rem}.main__right button{cursor:pointer;font-size:1.125rem;font-weight:700;height:3.5rem;width:100%;border:0;border-radius:8rem;color:var(--White);background:var(--Dark-gray-blue)}.main__right button:active{color:var(--White);background:linear-gradient(180deg,var(--Light-slate-blue) 0%,var(--Light-royal-blue) 100%)}.attribution{width:46rem;max-width:100%;margin:0 auto;padding-top:1rem;padding-bottom:1rem;text-align:center}.attribution p{font-size:.75rem;margin:0}.attribution a{color:var(--Dark-gray-blue)}