.first-color{color:#f4f9f4}.second-color{color:#c4e3cb}.third-color{color:#8aae92}.fourth-color{color:#616161}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#8aae92;text-decoration:inherit}body{margin:0;display:flex;place-items:center;min-width:320px;background:#c4e3cb;color:#616161}h1{font-size:3.2em;line-height:1.1}@media (max-width: 600px){h1{font-size:1.7em}}.dog-img-container{margin:32px 0}@media (max-width: 600px){.dog-img-container{margin:8px 0}}.doggy-options-container{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media (max-width: 600px){.doggy-options-container{grid-template-columns:1fr;padding-bottom:8px}}.app-container{display:flex;flex-direction:column;height:100vh;max-width:600px}@media (max-width: 600px){.app-container{max-width:320px}}.middle-container{display:flex;flex-direction:column}.metrics-container{display:flex;justify-content:center;align-items:center;margin:64px 0;flex-direction:column;border-radius:8px;box-shadow:0 4px 8px #646cff4d;padding:32px 8px;border:1px solid green}@media (max-width: 600px){.metrics-container{height:100%;margin:32px 0}}.github-link-container{margin-top:24px;display:flex;justify-content:center;align-items:center;width:100%}@media (max-width: 600px){.play-again-container,.play-again-container button{width:100%}}@keyframes fadein{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeout{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}#root{max-width:1280px;margin:0 auto;text-align:center;display:flex;flex-direction:column;justify-content:center}button{color:#f4f9f4;background-color:#8aae92;border-color:transparent;border-radius:8px;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:transform .5s,box-shadow .25s;box-shadow:0 4px 6px #0000001a}@media (min-width: 768px){button:hover{transform:scale(1.08);box-shadow:0 8px 16px #0003,0 4px 8px #646cff4d}}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity .3s ease-in-out}.modal-overlay.open{opacity:1}.modal-overlay.close{opacity:0}.modal-content{background:#c4e3cb;font-weight:500;border-radius:8px;padding:1.5rem;max-width:500px;width:100%;transform:scale(0);transition:transform .3s ease-in-out;animation:zoomIn .3s forwards}.modal-overlay.close .modal-content{animation:zoomOut .3s forwards}@keyframes zoomIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoomOut{0%{transform:scale(1);opacity:1}to{transform:scale(.5);opacity:0}}.account-page-container{display:flex;flex-direction:column}.account-page-container-section{display:flex;flex-direction:column;align-items:center;justify-content:center}.account-page-container p{text-align:left}.top-nav-container{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:8px 0;border-bottom:1px solid #616161}.top-nav-left-col{display:flex;align-items:center;gap:1rem}.top-nav-right-col{display:flex;align-items:center}.top-nav-link{font-size:1rem;cursor:pointer;font-weight:600}@media (max-width: 768px){.top-nav-links{width:100%;text-align:center}}.profile-photo-container{display:inline-flex;border:1px solid green;border-radius:20px}.profile-photo-container a{display:inline-flex}.profile-photo-container img{width:40px;height:40px;border-radius:20px}.go-back-link{display:flex;align-items:center}.menu-popover-trigger-container{position:relative;display:inline-flex;margin-right:16px;cursor:pointer}.menu-popover-trigger-container img{width:24px;height:24px}.menu-popover-children-container{display:flex;flex-direction:column;transition:all .2s;position:absolute;top:32px;right:0;box-shadow:0 0 6px #0000001a;background-color:#c4e3cb;border-radius:8px}.menu-popover-children-container.closed{pointer-events:none;opacity:0}.menu-popover-children-container.open{pointer-events:initial;opacity:1}.popover-menu-container{flex-direction:column;display:flex;align-items:center;border-radius:8px}.popover-menu-item{width:max-content;margin:12px 0}.popover-menu-item a{font-weight:600;color:#616161;padding:8px 40px;margin:8px 0}.leaderboard-nav-container{display:flex;align-items:center;column-gap:16px}@media (max-width: 600px){.leaderboard-nav-container{column-gap:8px}.leaderboard-cta{font-weight:600;font-size:14px}}.leaderboard-cta{font-weight:600;cursor:pointer;transition:.4s}.leaderboard-cta:hover{opacity:.8;transform:scale(1.1)}.high-scores{font-weight:600;border-bottom:1px solid green}@media (max-width: 600px){.high-scores{font-size:14px}}.leaderboard-container{padding:0 32px}.leaderboard-container table{box-shadow:0 4px 8px #646cff4d;border-radius:8px;margin:32px 0;border:1px solid green;width:100%}.leaderboard-copy-container p{text-align:left;text-wrap:pretty}.leaderboard-type-toggle-container{display:flex;width:560px;column-gap:16px}.leaderboard-type-toggle-container p{text-align:left}.leaderboard-container .profile-photo{width:40px;height:40px;border-radius:20px;margin-right:8px;border:1px solid green}.spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff6;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none}.spinner{border:8px solid #616161;border-top:8px solid #8aae92;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:9999}.confetti{position:absolute;top:0;width:10px;height:10px;background-color:#ffc700;animation:fall 3s infinite ease-in;border-radius:50%}.confetti:nth-child(2n){background-color:#ff5e78}.confetti:nth-child(3n){background-color:#7c99ff}.confetti:nth-child(4n){background-color:#79ffb1}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(95vh) rotate(360deg);opacity:0}}