:root{--Blue-200: hsl(193, 38%, 86%);--Green-300: hsl(150, 100%, 66%);--Green-300-light: hsla(150, 100%, 66%, .35);--Blue-600: hsl(217, 19%, 38%);--Blue-900: hsl(217, 19%, 24%);--Blue-950: hsl(218, 23%, 16%)}*{padding:0;margin:0;box-sizing:border-box;scroll-behavior:smooth}html{font-size:62.5%}body{font-family:Manrope,sans-serif;background-color:var(--Blue-950);color:var(--Blue-200);min-height:100dvh;width:100%;display:flex;justify-content:center;align-items:center}#root{position:relative}.container{max-width:50rem;width:min(90vw,50rem);background-color:var(--Blue-900);border-radius:1rem;padding:3.2rem;display:flex;flex-direction:column;align-items:center;gap:3rem}.advice-number{font-size:1rem;color:var(--Green-300);text-transform:uppercase;letter-spacing:3px;font-weight:600}.advice{line-height:1.5;font-size:2.8rem;text-align:center;font-weight:800}.border{margin-bottom:2.4rem}.border--desktop{display:none}.border--mobile{display:block}.new-advice{background-color:var(--Green-300);color:var(--Blue-950);padding:1.6rem;border-radius:50%;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);cursor:pointer;border:none;transition:box-shadow .25s;display:flex;align-items:center;justify-content:center}.new-advice:hover{box-shadow:0 0 15px 7px var(--Green-300-light)}.new-advice:disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.new-advice svg{fill:currentColor}@media (prefers-reduced-motion: reduce){.new-advice{transition:none}.new-advice:hover{box-shadow:none}}@media (min-width: 30em){.advice{font-size:2.4rem}.new-advice{padding:1.4rem}}@media (min-width: 48em){.container{padding:3.2rem;gap:3rem}.advice{font-size:2.8rem}.new-advice{padding:1.6rem}.border--desktop{display:block}.border--mobile{display:none}}@media (min-width: 64em){.container{gap:3.2rem}.advice{font-size:3.2rem}}@keyframes adviceIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.advice-animate{animation:adviceIn .26s ease-out both}.new-advice:focus-visible{outline:0;box-shadow:0 0 0 4px var(--Blue-900),0 0 0 8px var(--Green-300)}@media (prefers-reduced-motion: reduce){.new-advice{transition:none}.new-advice:hover{transform:none;box-shadow:none}.advice-animate{animation:none}}