.login{align-items:center;display:flex;flex-direction:column;padding:2rem 1rem}.header-wrapper,.header-wrapper .header{position:relative}.header-wrapper .header h1{background:#fff;border:12px solid #000;box-shadow:inset 0 0 9px 0 #424242;font-family:Monoton,cursive;height:150px;margin:6px;overflow:hidden;position:relative;width:calc(100% - 12px)}.header-wrapper .header h1 span{align-items:center;background:#000;color:#6ba2dc;display:flex;font-size:2.5rem;height:100%;justify-content:center;padding:24px 64px;white-space:nowrap;width:100%}.header-wrapper .header h1 .mat{border:24px solid #fff;bottom:0;left:0;position:absolute;right:0;top:0}.header-wrapper .header .version{bottom:0;color:#fff;font-size:.5rem;position:absolute;right:8px;transform:translateY(6px)}.header-wrapper .user-and-hat-pills{padding:6px 6px 0}.header-wrapper .user-and-hat-pills .rounded-pill{cursor:pointer}.update-available-banner[data-v-dcb6e6e8]{align-items:center;background-color:#ffc107;color:#000;display:flex;flex-wrap:wrap;gap:.5rem .75rem;justify-content:center;padding:.5rem 1rem;font-size:.85rem;text-align:center}body.body{background-color:#6ba2dc}.movie-hat{max-width:1200px;margin:0 auto}.pick-a-movie{max-width:832px}.pick-a-movie .movie-added .image-wrapper{background:#fff;border:12px solid #000;padding:24px}.pick-a-movie .movie-added p{color:#fff;font-size:1.5rem;margin:36px 0 12px;text-align:center}.pick-a-movie .movies{-moz-column-gap:1rem;column-gap:1rem;list-style:none;margin:1rem 1rem 5rem;row-gap:1rem}.pick-a-movie .movies .card{border-radius:4px;cursor:pointer;width:calc(33.33333% - .66667rem)}.pick-a-movie .movies .card p{font-size:.75rem}.pick-a-movie .movies .card .streaming-providers .service-type{position:relative}.pick-a-movie .movies .card .streaming-providers .service-type .icon{align-items:center;background:#000;border-radius:50%;display:flex;height:18px;justify-content:center;left:0;padding:3px;position:absolute;top:50%;transform:translateY(-50%);width:18px}.pick-a-movie .movies .card .streaming-providers .service-type .icon svg path{fill:#fff}.pick-a-movie .movies .card .streaming-providers .service-type ul{border-radius:4px;-moz-column-gap:4px;column-gap:4px;display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;margin:4px 4px 4px 8px;padding:8px 8px 8px 16px;row-gap:4px}.pick-a-movie .movies .card .streaming-providers .service-type ul .streaming-provider{display:flex}.pick-a-movie .movies .card .streaming-providers .service-type ul .streaming-provider .streamer-logo{height:18px;width:18px}.drawing-hat{align-items:center;display:flex;flex-direction:column;padding-top:56px}.drawing-hat .hat{animation:hat-wobble .9s ease-in-out infinite;height:100px;position:relative;transform-origin:50% 92%;width:150px}.drawing-hat .hat .brim{background:#000;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:150px;z-index:2}.drawing-hat .hat .opening{background:#2a2a2a;border-radius:50%;height:16px;left:27px;position:absolute;top:5px;width:96px;z-index:3}.drawing-hat .hat .band{background:#fff;height:10px;left:25px;position:absolute;top:26px;width:100px;z-index:1}.drawing-hat .hat .crown{background:#000;border-radius:0 0 16px 16px;height:84px;left:25px;position:absolute;top:13px;width:100px;z-index:0}.drawing-hat .tickets{height:0;position:relative;width:0;z-index:4}.drawing-hat .tickets .ticket{background:#fff;border:2px solid #000;height:15px;left:-12px;opacity:0;position:absolute;top:8px;width:24px}.drawing-hat .tickets .ticket-1{animation:ticket-toss 1.4s ease-out infinite}.drawing-hat .tickets .ticket-2{animation:ticket-toss-left 1.4s ease-out .45s infinite}.drawing-hat .tickets .ticket-3{animation:ticket-toss-right 1.4s ease-out .9s infinite}.drawing-hat .drawing-label{font-size:.8rem;letter-spacing:.14em;margin-top:.9rem!important;text-transform:uppercase}@media(prefers-reduced-motion:reduce){.drawing-hat .hat,.drawing-hat .tickets .ticket{animation:none}}@keyframes hat-wobble{0%,to{transform:rotate(0deg)}20%{transform:rotate(-7deg) translateY(1px)}50%{transform:rotate(6deg) translateY(-2px)}75%{transform:rotate(-4deg)}}@keyframes ticket-toss{0%{opacity:0;transform:translateY(8px) rotate(0deg)}15%{opacity:1}60%{opacity:1;transform:translate(6px,-74px) rotate(260deg)}to{opacity:0;transform:translate(10px,-32px) rotate(420deg)}}@keyframes ticket-toss-left{0%{opacity:0;transform:translateY(8px) rotate(0deg)}15%{opacity:1}60%{opacity:1;transform:translate(-44px,-62px) rotate(-240deg)}to{opacity:0;transform:translate(-56px,-20px) rotate(-380deg)}}@keyframes ticket-toss-right{0%{opacity:0;transform:translateY(8px) rotate(0deg)}15%{opacity:1}60%{opacity:1;transform:translate(48px,-56px) rotate(300deg)}to{opacity:0;transform:translate(60px,-16px) rotate(460deg)}}.where-to-watch{-moz-column-gap:1.25rem;column-gap:1.25rem;row-gap:.5rem;margin-top:.75rem;text-decoration:none}.where-to-watch .service{-moz-column-gap:.4rem;column-gap:.4rem}.where-to-watch .service .label{color:#fff;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-right:.15rem}.where-to-watch .service .provider-logo{border-radius:6px;height:28px;width:28px}.draw{background-color:var(--bg-color);display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}@media screen and (min-width:768px){.draw{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-around}}.draw .poster-wrapper{animation:drawn-reveal .7s cubic-bezier(.2,.8,.3,1);text-align:center}.draw .poster-wrapper .poster{background:#fff;border:12px solid #000;box-shadow:inset 0 0 9px 0 #424242;padding:24px}.draw .poster-wrapper .days-ago,.draw .poster-wrapper .draw-count{font-size:.75rem}.draw .details-wrapper{align-items:center;animation:drawn-fade-up .5s ease .4s backwards;display:flex;flex-direction:column;justify-content:space-between;min-width:150px}@media screen and (min-width:768px){.draw .details-wrapper{height:250px}}@media(prefers-reduced-motion:reduce){.draw .details-wrapper,.draw .poster-wrapper{animation:none}}@keyframes drawn-reveal{0%{opacity:0;transform:translateY(-36px) rotate(-5deg) scale(.65)}to{opacity:1;transform:none}}@keyframes drawn-fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.loading-spinner{height:50vh}.add-movie,.loading-spinner{align-items:center;display:flex;justify-content:center}.add-movie{position:relative;width:100%}@media(min-width:576px){.add-movie form{max-width:420px}}.add-movie .message{bottom:-12px;color:#fff;position:absolute;left:0}.draw-movie{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;position:relative;width:100%}.draw-movie .current-count{font-size:.75rem}.charts-inner{display:flex;flex-direction:column;gap:.75rem}.charts-inner .chart-card{background:#fff;border:6px solid #000;margin:0;padding:12px 12px 8px}.charts-inner .chart-card:last-child{margin-bottom:.5rem}.charts-inner .chart-card figcaption{color:#1d2430;font-size:.7rem;font-weight:600;letter-spacing:.04em;margin-bottom:8px;text-align:center;text-transform:uppercase}.charts-inner .chart-card .plot{height:190px;position:relative}.charts-inner .chart-card .plot>div{height:100%;position:relative;width:100%}.charts-inner .chart-card .plot canvas{max-height:100%}.history .sort-by-options{display:flex;flex-wrap:wrap}.history .sort-by-options label{width:100%}.history .sort-by-options select{width:calc(100% - 50px)}.history .sort-by-options .sort-order{width:50px;display:flex;align-items:center;justify-content:center;cursor:pointer}.history .sort-by-options .sort-order svg{height:24px;width:24px}.history .sort-by-options .sort-order svg path{fill:#fff}.history ul{list-style:none;padding:0}.history ul,.history ul li{display:flex;flex-wrap:wrap}.history ul li{justify-content:center}.history ul li.no-value{display:none}.history ul li a{background:#fff;border:12px solid #000;box-shadow:inset 0 0 9px 0 #424242;overflow:hidden;padding:24px;position:relative;text-decoration:none;width:100%}.history ul li a span{background:#000;border:3px solid #fff;box-shadow:0 0 4px 0 #424242;font-size:.6rem;left:-40px;padding:4px 36px;position:absolute;top:10px;transform:rotate(-45deg)}.history ul li a img{width:100%}.history ul li a .caption{padding:16px 0 0}.history ul li a .caption p{color:#000;font-size:.5rem;text-align:center;margin:0}.hat{position:relative}.hat hr{border-top:1px solid #fff;opacity:1;width:90%}.hat .current-count{font-size:.75rem;position:relative}.hat .current-count .btn{--bs-btn-padding-y:6px;--bs-btn-padding-x:6px;position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:24px;height:24px;display:inline-flex;justify-content:center;align-items:center}.hat .wrapped-invite{margin-bottom:.5rem}.hat .charts{animation:charts-in .3s ease-out;margin:0 auto;width:90%}@media(min-width:768px){.hat .charts{width:560px}}@media(prefers-reduced-motion:reduce){.hat .charts{animation:none}}.hat .back-to-top{background:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 0 6px 0 #adadad;cursor:pointer;display:flex;left:50%;max-height:50px;position:fixed;top:0;transform:translateX(-50%);transition:max-height .25s ease-in-out;overflow:hidden}.hat .back-to-top.hidden{max-height:0}.hat .back-to-top span{font-size:.75rem;padding:6px 24px}@keyframes charts-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(min-width:768px){.hats{max-width:720px;margin:0 auto}}.hats .hats-list .member a{font-size:.75rem}ul{list-style:none}.wrapped{color:#fff;margin:0 auto;max-width:640px}.wrapped .marquee{background:#fff;border:12px solid #000;box-shadow:inset 0 0 9px 0 #424242;margin-top:1rem;padding:18px}.wrapped .marquee .band{background:#000;padding:1.75rem 1rem;text-align:center}.wrapped .marquee .band .eyebrow{color:#9fc3e8;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}.wrapped .marquee .band h2{color:#6ba2dc;font-family:Monoton,cursive;font-size:2.25rem;line-height:1.2;margin-top:.35rem!important}.wrapped .marquee .band .year{color:#fff;font-size:1rem;letter-spacing:.3em}.wrapped .headline{padding:2rem 0 1rem;text-align:center}.wrapped .headline .big{font-family:Monoton,cursive;font-size:4rem;line-height:1}.wrapped .headline .caption{font-size:1.05rem;margin-top:.5rem!important}.wrapped .headline .sub{font-size:.8rem;margin-top:.35rem!important;opacity:.85}.wrapped .panel{background:rgba(0,0,0,.22);border-radius:8px;margin-top:1rem;padding:1.25rem}.wrapped .panel h3{font-size:.75rem;letter-spacing:.16em;margin-bottom:.9rem;text-transform:uppercase}.wrapped .panel .footnote{font-size:.75rem;margin-top:.6rem!important;opacity:.8}.wrapped .leaderboard{list-style:none}.wrapped .leaderboard li{align-items:center;-moz-column-gap:.6rem;column-gap:.6rem;display:grid;grid-template-columns:7rem 1fr 2rem;margin-bottom:.5rem}.wrapped .leaderboard li .name{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapped .leaderboard li .bar{background:#fff;border-radius:2px;display:block;height:14px}.wrapped .leaderboard li .count{font-size:.85rem;text-align:right}.wrapped .months{align-items:flex-end;-moz-column-gap:3px;column-gap:3px;display:flex;height:110px;list-style:none}.wrapped .months li{align-items:center;display:flex;flex:1;flex-direction:column;height:100%;justify-content:flex-end}.wrapped .months li .column{background:#fff;border-radius:2px 2px 0 0;display:block;width:100%}.wrapped .months li .month-label{font-size:.6rem;margin-top:4px;opacity:.8}.wrapped .poster-panel .poster-row{-moz-column-gap:1rem;column-gap:1rem;display:flex}.wrapped .poster-panel .poster-row img{background:#fff;border:6px solid #000;flex-shrink:0;padding:6px;width:108px}.wrapped .poster-panel .poster-row .poster-copy .title{font-size:1.05rem;font-weight:600;margin-bottom:.35rem!important}.tutorial{color:#fff;margin:0 auto;max-width:520px}.tutorial .frame{background:#fff;border:12px solid #000;box-shadow:inset 0 0 9px 0 #424242;margin-top:1rem;padding:16px}.tutorial .frame .mat{background:#000;padding:1.5rem 1.25rem 1.75rem;text-align:center}.tutorial .stage{align-items:center;display:flex;height:190px;justify-content:center;margin-bottom:1.25rem}.tutorial .headline{color:#6ba2dc;font-family:Monoton,cursive;font-size:1.5rem;line-height:1.3}.tutorial .body{color:#fff;font-size:.95rem;line-height:1.5;margin-top:.85rem!important}.tutorial .art-hat{transform:scale(.85)}.tutorial .art-slips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:300px}.tutorial .art-slips .slip{background:#fff;border:2px solid #000;color:#000;font-size:.75rem;padding:6px 10px;transform:rotate(-2deg)}.tutorial .art-slips .slip:nth-child(2n){transform:rotate(2.5deg)}.tutorial .art-poster .poster-frame{background:#fff;border:8px solid #000;box-shadow:inset 0 0 9px 0 #424242;padding:10px}.tutorial .art-poster .poster-mat{align-items:center;background:#6ba2dc;display:flex;height:150px;justify-content:center;width:104px}.tutorial .art-poster .poster-title{color:#000;font-size:.85rem;font-weight:700;line-height:1.2;text-align:center}.tutorial .art-wall{display:grid;gap:8px;grid-template-columns:repeat(3,56px)}.tutorial .art-wall .tile{background:#fff;border:4px solid #000;display:block;height:78px}.tutorial .art-people{display:flex;gap:1.25rem}.tutorial .art-people .person{background:#fff;border:3px solid #000;border-radius:50% 50% 40% 40%;display:block;height:62px;width:46px}.tutorial .art-people .person:nth-child(2){height:76px}.tutorial .dots{display:flex;gap:8px;justify-content:center;list-style:none;margin-top:1.25rem!important}.tutorial .dots li{background:hsla(0,0%,100%,.4);border-radius:50%;cursor:pointer;height:9px;width:9px}.tutorial .dots li.current{background:#fff}.tutorial .controls{margin-top:1rem}.tutorial .controls .btn-link{text-decoration:none}.tutorial .controls .btn-link:disabled{opacity:.35}.tutorial .skip{opacity:.75;text-decoration:underline}