@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@font-face{font-family:Relative;font-weight:400;src:url(/fonts/relative-book.eot);src:url(/fonts/relative-book.eot?#iefix) format("embedded-opentype"),url(/fonts/relative-book.woff2) format("woff2"),url(/fonts/relative-book.woff) format("woff"),url(/fonts/relative-book.ttf) format("truetype")}@font-face{font-family:Relative;font-style:italic;font-weight:400;src:url(/fonts/relative-italic.eot);src:url(/fonts/relative-italic.eot?#iefix) format("embedded-opentype"),url(/fonts/relative-italic.woff2) format("woff2"),url(/fonts/relative-italic.woff) format("woff"),url(/fonts/relative-italic.ttf) format("truetype")}@font-face{font-family:Relative;font-weight:600;src:url(/fonts/relative-medium.eot);src:url(/fonts/relative-medium.eot?#iefix) format("embedded-opentype"),url(/fonts/relative-medium.woff2) format("woff2"),url(/fonts/relative-medium.woff) format("woff"),url(/fonts/relative-medium.ttf) format("truetype")}@font-face{font-family:Relative;font-weight:700;src:url(/fonts/relative-bold.eot);src:url(/fonts/relative-bold.eot?#iefix) format("embedded-opentype"),url(/fonts/relative-bold.woff2) format("woff2"),url(/fonts/relative-bold.woff) format("woff"),url(/fonts/relative-bold.ttf) format("truetype")}@font-face{font-family:Relative Mono;font-weight:400;src:url(/fonts/relative-mono-11-pitch.eot);src:url(/fonts/relative-mono-11-pitch.eot?#iefix) format("embedded-opentype"),url(/fonts/relative-mono-11-pitch.woff2) format("woff2"),url(/fonts/relative-mono-11-pitch.woff) format("woff"),url(/fonts/relative-mono-11-pitch.ttf) format("truetype")}html{font-size:22px;color:var(--black-ln)}@media(max-width:600px){html{font-size:18px}}body{color:var(--black-ln);font-family:Relative,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,h1,h2,h3,h4,p{margin:0;font-weight:400}h1,h2,h3,h4,p{padding:0}h1{font-size:2.4rem;line-height:1.4em;margin-bottom:1em;text-transform:lowercase}h2{font-size:1.7rem;margin-bottom:.4em;font-weight:600}h3{font-size:1.3rem;font-weight:700}p{font-size:1rem;margin:0;padding-bottom:.5em}a{color:var(--black-ln);text-decoration:none}.italic{font-style:italic}.uppercase{text-transform:uppercase;font-weight:500;letter-spacing:.06em}.mono{font-family:Relative Mono}.color-blk{color:var(--black-ln)}.color-gray{color:var(--gray)}.nav{position:fixed;background:#fff;width:100%;z-index:20;top:0;display:flex;justify-content:flex-end;align-items:center;padding:0 1rem;box-sizing:border-box;height:3.2em;opacity:1;transition:opacity .5s}.nav.hidden{opacity:0;pointer-events:none}@media(min-width:1500px){.nav--main{border:2px solid var(--black-ln);border-radius:7px;box-shadow:-7px 7px 0 var(--gray);background-color:var(--white);width:18em;min-height:8.5em;margin:2em;right:0;position:fixed;flex-direction:column-reverse}.nav--main .nav__line{display:none}.nav--main .nav__logo{margin:1em 0;width:5em}.nav--main .nav__cta{align-self:flex-end;margin:.45em 0;font-size:1.1em}.nav--main .nav__links{margin-top:1em}}.nav--main button{width:8.5em;margin-left:1em;font-size:.75em}.nav__logo{width:4em;position:absolute;left:1rem}.nav button{display:inline;padding:1.15em;font-size:.75em;height:4em}.nav__line{position:absolute;top:2.2em;width:100%;left:0;background:#fff;z-index:-1}.nav__line>span{display:block;height:0}.nav__line svg{width:100%;height:auto}.nav__close-button,.nav__hamburger{width:2.5em;cursor:pointer}.nav .text a,.nav__links a{padding:0 1.2em}.nav .text h2,.nav__links h2{margin:0}.nav .text h2:nth-of-type(2),.nav__links h2:nth-of-type(2){color:red}.nav .text a:hover,.nav .text span:not(.nohover):hover,.nav__links a:hover,.nav__links span:not(.nohover):hover{cursor:pointer}.nav .text{padding:1.2rem 1.4rem}.nav .game-overview-nav{position:fixed;padding:1.6rem;right:0;top:0}.nav--player{min-height:3em;display:flex;padding:1em;align-items:center;justify-content:space-between;position:fixed;width:100%;box-sizing:border-box;z-index:10;background-color:#fff}.nav--player>a{height:2.4em;padding:.6em 1em .6em .4em}.nav__hamburger{display:none}.nav__mobile{opacity:0;animation:fadeIn .4s ease-out 1ms;animation-fill-mode:forwards;display:none;width:100vw;background:#fff;position:fixed;left:0;top:0;z-index:50;text-align:center;padding-bottom:2em;border-bottom:.1em solid var(--black-ln)}.nav__mobile__links{padding-top:3em;font-size:1.4em}.nav__mobile__links>span{display:block;margin-bottom:1.4em}.nav__mobile .nav__close-button{position:absolute;right:0;padding:1em}@media screen and (max-width:900px){.nav__cta,.nav__links{display:none}#main.mobile--open .nav__mobile,.nav__hamburger{display:block}}.nav-inner{display:flex;align-items:center;justify-content:flex-end;height:4em;position:relative;z-index:1}.nav-inner button{height:5em;margin:0 1em}.react-toggle{touch-action:pan-x;display:inline-block;position:relative;cursor:pointer;background-color:rgba(0,0,0,0);border:0;padding:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.react-toggle-screenreader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.react-toggle--disabled{cursor:not-allowed;opacity:.5;transition:opacity .25s}.react-toggle-track{width:50px;height:24px;padding:0;border-radius:30px;background-color:#4d4d4d;transition:all .2s ease}.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#000}.react-toggle--checked .react-toggle-track{background-color:#19ab27}.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#128d15}.react-toggle-track-check{position:absolute;width:14px;height:10px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;line-height:0;left:8px;opacity:0;transition:opacity .25s ease}.react-toggle--checked .react-toggle-track-check,.react-toggle-track-x{opacity:1;transition:opacity .25s ease}.react-toggle-track-x{position:absolute;width:10px;height:10px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;line-height:0;right:10px}.react-toggle--checked .react-toggle-track-x{opacity:0}.react-toggle-thumb{transition:all .5s cubic-bezier(.23,1,.32,1) 0s;position:absolute;top:1px;left:1px;width:22px;height:22px;border:1px solid #4d4d4d;border-radius:50%;background-color:#fafafa;box-sizing:border-box;transition:all .25s ease}.react-toggle--checked .react-toggle-thumb{left:27px;border-color:#19ab27}.react-toggle--focus .react-toggle-thumb{box-shadow:0 0 2px 3px #0099e0}.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb{box-shadow:0 0 5px 5px #0099e0}@keyframes raindrop{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.home .mural{padding:0;height:300vh;justify-content:flex-end;background-color:#fafafa}.home .homepage-background{overflow:hidden;position:fixed;bottom:2vh;width:98vw;height:96vh;border:2px solid var(--black-ln);border-radius:7px;box-shadow:-7px 7px 0 var(--gray);background-color:var(--white)}.home .homepage-background .nav-inner{padding:.5em 0;opacity:0;animation:fadeIn 1s ease-out .2s;animation-fill-mode:forwards}.home .homepage-background .nav-inner .nav__hamburger{padding-right:1em}.home .homepage-background .logo,.home .homepage-background .rain,.home .homepage-background img{position:absolute;z-index:0;opacity:0;animation:fadeIn 1s ease-out .2s;animation-fill-mode:forwards}.home .homepage-background .logo{width:100%;left:0;height:6rem;animation:none;opacity:1}.home .homepage-background .hpb-hills{width:60%}.home .homepage-background .hpb-sun{width:16%}.home .homepage-background .hpb-plane{width:17%}.home .homepage-background .hpb-dog-cloud{width:20%}.home .homepage-background .hpb-dog{width:10%}.home .homepage-background .hpb-bear{width:8%}.home .homepage-background .hpb-snake{width:28%}.home .homepage-background .hpb-doug{width:10%}.home .homepage-background .rain path:nth-of-type(1n){animation:raindrop 3s ease-in .3s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(2n){animation:raindrop 3s ease-in .6s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(3n){animation:raindrop 3s ease-in .9s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(4n){animation:raindrop 3s ease-in 1.2s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(5n){animation:raindrop 3s ease-in 1.5s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(6n){animation:raindrop 3s ease-in 1.8s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(7n){animation:raindrop 3s ease-in 2.1s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(8n){animation:raindrop 3s ease-in 2.4s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(9n){animation:raindrop 3s ease-in 2.7s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(10n){animation:raindrop 3s ease-in 3s infinite reverse both running}.home .homepage-background .rain path:nth-of-type(11n){animation:raindrop 3s ease-in 3.3s infinite reverse both running}@media screen and (max-width:600px){.home .homepage-background{height:97vh}.home .homepage-background .hpb-doug{display:none}}.home .federer-dialogue{background:#fafafa;padding:6em 0 4em;text-align:center;position:relative}.home .federer-dialogue__container{width:37em;display:inline-block;position:relative}.home .federer-dialogue__container img{width:100%}.home .federer-dialogue__text{position:absolute;left:0;padding:9% 10% 0 40%}.home .federer-dialogue__squiggle-border{position:absolute;bottom:-6em;height:20em;z-index:-10}.home .federer-dialogue__squiggle-border svg{width:100%}@media screen and (max-width:1200px){.home .federer-dialogue .federer-dialogue__container{width:80%}}@media screen and (max-width:900px){.home .federer-dialogue .federer-dialogue__text{position:static;padding:0 2em}.home .federer-dialogue img{display:none}}@media screen and (max-width:600px){.home .federer-dialogue .federer-dialogue__text{position:static;padding:0}}.home .three-step{display:flex;flex-direction:column;align-items:center}.home .three-step__step{width:40rem;display:flex;margin:8rem auto}.home .three-step__step img{width:20em;object-fit:contain;object-position:0 0}.home .three-step__step__text{padding:1em 2em 0}.home .three-step>.content-container{padding-top:4em}@media screen and (max-width:1200px){.home .three-step .three-step__step{width:100%;margin:8rem 0}.home .three-step .three-step__step img{width:15em}}@media screen and (max-width:900px){.home .three-step .three-step__step{display:block;text-align:center}}.home .social{background:#fafafa;padding:1em 2em;position:relative}.home .social .flex-container{flex-direction:row}.home .social img{width:100%}.home .social__left{flex:2 1}.home .social__center{flex:5 1}.home .social__center h3{margin:3em 2em}.home .social__right{flex:2 1}.home .social__bottom{margin:5% 15%}.home .social__squiggle-border{position:absolute;top:-8em;left:0;width:100%;height:20em;z-index:-10}.home .social__squiggle-border svg{width:100%}.home .social>.content-container{padding-top:2em}@media screen and (max-width:1200px){.home .social .social__bottom,.home .social .social__left,.home .social .social__right{display:none}}.home .version .flex-container{flex-direction:row;text-align:left;align-items:flex-start;padding:0 0 6em}.home .version .content-container{padding:0 3rem}.home .version__header{padding:8em 3em 6em}.home .version__topic{width:50%;box-sizing:border-box;padding:0 3em}.home .version p{padding-bottom:1.2em}@media screen and (max-width:1200px){.home .version .version__header{padding:9em 1em 6em}.home .version .version__topic{padding:0 1em}.home .version .content-container{padding:0 2em}}@media screen and (max-width:600px){.home .version .flex-container{display:block}.home .version .version__topic{width:100%;margin-bottom:4em}}.home .cta .content-container{padding:0 6em}.home .cta .flex-container{flex-direction:row;justify-content:space-between}.home .cta__logo{height:4em}.home .cta__logo small{display:block}.home .cta__socials{text-align:center}.home .cta__socials h3{font-weight:500;padding-bottom:.2em}.home .cta__socials h3>span{position:relative;top:.2em;padding:0 .2em}.home .cta__socials h3 svg{height:1em}@media screen and (max-width:1200px){.home .cta .content-container{padding:0 2em}}@media screen and (max-width:900px){.home .cta .cta_button,.home .cta .logo{display:none}.home .cta .flex-container{justify-content:center}}.home .footer{text-align:center;padding:.75em 0;color:var(--gray)}.input-container{text-align:center;margin-bottom:1rem;width:30rem;max-width:80vw}.subtext{font-family:Relative Mono;font-size:.65rem;text-align:center;margin:.6em 0}label.toggle{text-align:right;margin-top:.4em}label.toggle .label-text{font-size:.8em;margin-right:1em}label.toggle .react-toggle{position:relative;top:5px}.join .toggle-container{padding-top:1.6em}.join .toggle-container .input-container-flex{height:2em}input{border:none;border-radius:0;color:var(--black-ln);font-size:1.3rem;width:100%;padding-left:.1em;margin-left:.1em}input::placeholder{opacity:0;animation:fadeIn 1s ease-out .2s;animation-fill-mode:forwards;font-size:.5em;opacity:.3;text-align:right}input.text--left{text-align:left}input:focus{outline:none}input[disabled]{background:#fff}.input-container-flex{display:flex;align-items:flex-end;margin-bottom:.4rem;width:100%;height:3em;position:relative}@media(max-width:600px){.input-container-flex.mobile-collapse{flex-direction:column;align-items:baseline;margin-top:3em}.input-container-flex.mobile-collapse .input-wrapper{margin-left:0}}.input-container-flex:first-of-type .input-drawnline svg{transform:rotate(180deg) scaleY(-1)}.input-container-flex.input-container-flex--vertical{flex-direction:column;align-items:flex-start}.input-container-flex.input-container-flex--vertical .input-drawnline{transform:rotate(180deg)}.input-container-flex .input-label,.input-container-flex input{display:inline-block;white-space:nowrap;padding-bottom:.2em}.input-container-flex .input-label{margin-right:.2rem;z-index:1;bottom:.1em}.input-container-flex .input-wrapper{flex:1 1;position:relative;text-align:right;margin-left:.5em;width:100%}.input-container-flex .input-wrapper .input-drawnline{position:absolute;width:100%;left:0;bottom:-.25em;pointer-events:none}.input-container-flex .input-wrapper svg{width:100%}.input-container-flex--error input{color:red}.input-container-flex--ornamented:after{content:"(me)";position:absolute;right:0;font-size:.65em;bottom:.6em;opacity:.3}button{background:none;border:none;color:var(--black-ln);font-size:.8em;font-family:Relative Mono;text-transform:lowercase;position:relative;opacity:.7;height:7em;width:11em;box-sizing:border-box}button:not([disabled]){opacity:1;cursor:pointer}button:not([disabled]):hover{transform:scale(1.02)}button:focus{outline:none}button:active,button:focus{transform:scale(1)}button .button__text{position:relative;z-index:1;font-size:1.3em}button svg{width:100%;height:100%;left:0;top:0;position:absolute}button span.text,button__text{display:inline-block;transform:rotate(-1deg)}button .tooltip{display:block;position:absolute;right:-9em;top:30%;width:8em;height:1em;text-align:left;font-size:.8em}button .tooltip[hidden]{opacity:0}.buttons-row{justify-content:space-evenly;margin-top:2rem}.gallery{background:var(--lightgray);padding:2em 2em 8em}@media(min-width:1500px){.gallery{padding:4em 2em 8em}}@media(max-width:600px){.gallery{padding:1em}}.gallery h1{padding:1em 0 2em}.gallery__content{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:1em;gap:1em;grid-auto-rows:minmax(100px,auto)}@media(max-width:100em){.gallery__content{grid-template-columns:repeat(6,1fr)}}@media(max-width:80em){.gallery__content{grid-template-columns:repeat(5,1fr)}}@media(max-width:60em){.gallery__content{grid-template-columns:repeat(4,1fr)}}@media(max-width:50em){.gallery__content{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.gallery__content{gap:.5em}}.gallery-image{height:10em;background:#fff}@media(max-width:600px){.gallery-image{height:5em}}.gallery-image img{width:100%;height:100%;object-fit:contain}.gallery__nav{display:flex;justify-content:space-between;padding:1em;background:var(--lightgray)}.gallery__nav>a{display:inline-block;height:2.4em;padding:.6em 1em}@media screen and (max-width:600px){.gallery__nav{padding-left:0;padding-top:.4em}}.about{height:100%}.about strong{display:inline-block;margin-bottom:.2em}.about p:not(:last-of-type){margin-bottom:1em}.about p a{text-decoration:underline}.about p a:hover{font-weight:700}.about h3 a:hover{text-decoration:underline}.about__nav{display:flex;justify-content:space-between;padding:1em;position:absolute;width:100%;box-sizing:border-box}.about__nav>a{height:2.4em;padding:.6em 1em}@media screen and (max-width:600px){.about__nav{padding-left:0;padding-top:.4em}}.about__content{width:50%}.about__links{width:50%;text-align:right}.about .content-container{display:flex;align-items:flex-end;padding-bottom:6em}@media screen and (max-width:1200px){.about .content-container{display:block;padding:4em 2em}.about__content,.about__links{padding-top:4em;width:100%;text-align:left}}@media(max-width:600px){.about .content-container{padding:1em}.about h3{font-size:1em;padding-bottom:.4em}.about__links{margin-bottom:4em}}#main{height:100vh;box-sizing:border-box}@media(max-size:600px){#main{padding:.6rem 0}}.content-container{height:100%;width:100%;padding:0 2rem;box-sizing:border-box;max-width:60em;margin:0 auto}@media screen and (max-width:600px){.content-container{padding:0 1em}}.full-height{height:100%}.ctr-adjust-pad{padding-bottom:4rem}.bottom-margin{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:1.2rem 2rem;width:100%;position:absolute;bottom:0;background:#fff}.bottom-margin button{flex:0 1;font-size:1rem;margin:0 0 0 6vw;padding:.6rem 1em;height:3em;width:7em}.bottom-margin .drawnline{bottom:-.75em}.flex-container{padding:6em 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;box-sizing:border-box}.flex-container.small-pad{padding:1em 0}.display--flex{display:flex}.text--left{text-align:left}.rel{position:relative}.strikethrough{text-decoration:line-through}.center{text-align:center}.rules{max-width:23rem}.rules .illustration{position:absolute;right:0;bottom:0;padding:2rem 4rem;width:16rem}.rules .illustration svg{width:100%}.playing{display:flex;flex-direction:column;overflow:hidden}.playing .input-wrapper,.playing h2,.playing h3{flex:1 1;text-align:left}.playing .input-wrapper{margin:0}.playing #drawingCanvas{width:100%;border:none;flex:1 1;background:var(--lightgray)}.playing .playerDrawing{flex:1 1;max-height:100%;max-width:100%}.playing .playerDrawing img{height:100%;width:100%;object-fit:contain;transform:scale(.85)}.playing .playerDrawing.preview{filter:blur(6px)}.waiting{display:flex;flex-direction:column;height:100%}.waiting button{margin:1rem}.waiting .flex-container{padding-top:2em}.waiting__next-round-timer{position:absolute;bottom:2em;font-weight:400}.game-over__hero{background:var(--lightgray);text-align:center;padding:6em 0 2em}.game-over img{width:30rem;height:18rem;background:var(--lightgray);object-fit:contain;object-position:center;padding:1rem;box-sizing:border-box}@media(max-width:600px){.game-over img{width:100%}}.game-over .nav--player{position:fixed;background:var(--lightgray);width:100%;box-sizing:border-box;padding:.4em 1em}.game-over .nav--player button{height:4em}.game-over--section{margin:4rem 0}.game-over--section:last-of-type{margin-bottom:10rem}svg{height:100%}.rough-notation-wrapper span{display:inline-block}button.preview--button{position:absolute;background:#fff}ol{padding-left:1.6em;margin:.6em 0}.pill{font-size:.8em;background:#b17be6;color:#fff;padding:0 1em .2em;border-radius:4em;font-weight:700}.modal{position:fixed;left:0;top:5em;padding-top:0;height:100%;width:100%;z-index:100;background:#fff}.modal .modal__inner{background:border-box;border:1px solid var(--black-ln);border-radius:7px;box-shadow:-7px 7px 0 #bbb;padding:4em 3em;position:relative}.modal .modal__close{position:absolute;top:1em;right:1em;height:2em;cursor:pointer}.modal .modal__close:hover{transform:scale(1.05)}.about,.gallery,.join{opacity:0;animation:fadeIn .8s ease-out 1ms;animation-fill-mode:forwards}.game-starting button.start-game-button:not([disabled]){filter:drop-shadow(2px 2px 20px #44d)}