*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.3875rem + 1.65vw)}@media (min-width:1200px){.h1,h1{font-size:1.6rem}}.bee-h1{font-size:38px!important;font-weight:900!important}.bee_head{font-size:26px!important;font-weight:900!important;text-align:center}.bee-h2{font-size:19px!important;font-weight:400!important}.bee_text{text-align:left;font-size:18px;margin:auto;text-align:center}.bee_step{margin-top:30px;margin-bottom:12px}@media (max-width:1024px){.bee_head{font-size:24px!important;font-weight:800!important}}@media (max-width:512px){.bee_head{font-size:20px!important;font-weight:800!important}}@media (max-width:767px){.bee-h1{font-size:34px!important}}p{margin-top:0;margin-bottom:1rem}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}.bee_ul{padding-left:0}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-0.5 * var(--bs-gutter-x));margin-left:calc(-0.5 * var(--bs-gutter-x))}.row>*{-ms-flex-negative:0;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * 0.5);padding-left:calc(var(--bs-gutter-x) * 0.5);margin-top:var(--bs-gutter-y)}@media (min-width:768px){.col-md-8{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:66.66666667%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:75%}}@media (min-width:992px){.col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:66.66666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:56%}}.bee_share{margin: 50px 0 30px}.bee_title{background-color:#ffdd79}.bee_note{background-color:#eaffe5;margin-bottom: 30px;}.justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.my-2{margin-top:0.5rem!important;margin-bottom:0.5rem!important}.mt-0{margin-top:0!important}.mt-1{margin-top:0.25rem!important}.mt-2{margin-top:0.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-1{margin-bottom:0.25rem!important}.mb-2{margin-bottom:0.5rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.pb-1{padding-bottom:0.25rem!important}.pb-2{padding-bottom:0.5rem!important}.pb-5{padding-bottom:3rem!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm{max-width:1140px}}.text-primary{color:#72b0fa!important}body{font-family:Nunito,sans-serif;overflow-x:hidden!important;font-size:16px;color:#161c2d}.section-title .title{letter-spacing:.5px;font-size:28px!important}@media (max-width:768px){.section-title .title{font-size:24px!important}}.number{font-size:26px;font-weight:700;margin:0px}.para-desc{max-width:600px}.bg-half{padding:32px 0;background-size:cover;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;position:relative;background-position:center center}.footer__logo{height:24px;display:block;-ms-flex-negative:0;flex-shrink:0;margin-bottom:10px}.footer__logo img{height:24px;display:block}.footer{padding:20px 0 10px;background:rgba(231,235,241,.58)}.container{max-width:100%;margin:0 auto;padding:0 15px}.footer__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:5px}.footer__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.footer__message{color:#9599ae;line-height:24px;text-align:center;font-size:13px;margin:20px auto 10px}.footer__copir{color:#2c2f3e;font-size:13px;font-weight:400;line-height:12px}.footer__links{color:#2c2f3e;font-size:13px;font-weight:400;line-height:12px;padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer__links li{border-left:1px solid #75798d;padding-left:10px;margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
.faq_block{border-radius:14px;margin-top:35px;padding:32px;background-color:#f5f5f5}
body.dark .faq_block{color:#000}
.bee_but{display:block;margin:12px;max-width:fit-content;text-align:center;padding:12px 20px;font-size:14px;font-weight:600;border-radius:8px;color:#000!important;background-color:#ffda18;transition:.2s ease-in-out}
.bee_but:hover{background-color:#ffc518}
body.dark .bee-h1,.bee-h2{color:#1e1e1e}
.spell_h3{padding-bottom:10px;margin-top:0;font-weight:700;text-align:left}
.spell_text{text-align:left;font-size:18px}
a,a:visited{text-decoration:none}
.step_number{font-size:24px;font-weight:700;width:42px;height:42px;-webkit-box-shadow:0 0 20px #0000001f;box-shadow:0 0 20px #0000001f;background-color:#fff5b5;text-align:center;line-height:42px;border-radius:50%;color:#000;border:1px solid;margin:auto}
.step_head{font-size:20px;font-weight:700;margin-top:16px}
body{--color-highlight:#f8cd05;--color-highlight-dark:#be9c04;--color-invalid:#dcdcdc;--color-gray:#e6e6e6;--color-gray-emphasis:#d9d9d9;--color-dark-gray:#ccc;--color-text-gray:#333;--color-text-gray-highlight:#333;--color-black:#000;--color-message-bad:#000;--color-transparent:#0000;--color-background:#fff;--link-color:var(--color-text-gray);--color-keys-button-middle:var(--color-black);--color-keys-button-middle-bg:var(--color-highlight);--invert:0;--bright:1;--button-background:var(--color-gray);--button-border:var(--color-transparent);--button-border-middle:var(--color-highlight);--button-color:#000;background-color:var(--color-background);overscroll-behavior-y:contain}
*{box-sizing:border-box;font-family:Nunito,sans-serif!important}
body{margin:0;padding:0}
#root{min-height:600px;position:relative}
header{border-bottom:1px solid silver;display:flex;margin:10px auto 0;max-width:475px;padding-bottom:10px;text-align:left;transition:-webkit-filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s;width:100%}
h1{font-size:2em;font-weight:400;margin-bottom:0}
a,a:visited{color:var(--link-color)}
p{margin:0 auto 10px}
ul{-webkit-padding-start:20px;padding-inline-start:20px}
.logo__container{-webkit-user-select:none;user-select:none}
.logo{height:32px;width:32px}
.app__container{font-weight:400;margin:0 auto;max-width:475px;transition:-webkit-filter .1s;transition:filter .1s;transition:filter .1s,-webkit-filter .1s}
#progress-container{align-items:center;cursor:pointer;display:flex;font-size:1em;height:30px;margin:10px auto 0;max-width:475px;width:95%}
#progress-info{width:37%}
#progress-next{font-size:.7em;font-weight:300}
#progress-bar{position:relative;top:-2px;width:63%}
#progress-dots{align-items:center;display:flex;font-size:.7em;justify-content:space-evenly}
.progress-dot{display:flex;flex-grow:1}
.progress-complete,.progress-incomplete{border-radius:50%;height:8px;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%);width:8px}
#progress-current{align-items:center;background-color:var(--color-keys-button-middle-bg);border:2px solid var(--button-border-middle);color:var(--color-keys-button-middle);display:flex;height:28px;left:0;line-height:100%;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:left .25s;vertical-align:middle;width:28px}
#progress-current-score{font-size:.7em;text-align:center;width:100%}
.progress-complete{background-color:var(--color-highlight)}
.progress-incomplete{background-color:var(--color-gray)}
.progress-square{border-radius:0}
.entered-container{align-items:flex-start;border:1px solid var(--color-dark-gray);border-radius:16px;cursor:pointer;display:flex;font-size:.9em;font-weight:300;height:auto;margin:10px auto;padding:10px;position:relative;width:95%}
.entered-container-expanded{height:60vh;max-height:400px}
.entered-words{color:var(--color-black);display:inline;flex-grow:9;flex-wrap:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;transition:height 1s;-webkit-user-select:none;user-select:none;white-space:nowrap}
.entered-words-start{color:var(--color-dark-gray)}
.entered-words-expanded{display:flex;flex-wrap:wrap;max-width:100%;white-space:normal}
.entered-word{margin:0 1px;padding:1px}
.entered-word-number{color:var(--color-black);flex-basis:100%;font-size:1.1em;margin:0 0 10px}
#entered-toggle{display:flex;height:20px;margin:0 4px;position:absolute;right:5px;top:10px;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:20px}
#entered-toggle svg{height:100%}
.entered-toggle-expanded{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.below-entered-container{opacity:1}
.below-entered-container-hidden{max-height:0;opacity:0;overflow:hidden}
#message-container{display:flex}
#message{display:inline-block;font-weight:300;height:auto;margin:0 auto;opacity:0;padding:6px 8px;position:relative;text-align:center;top:0;transition:opacity .25s}
.message-bad{-webkit-animation:shake 1s;animation:shake 1s;background-color:var(--color-message-bad);color:#fff;outline:none}
.message-good{background-color:#fff;outline:1px solid var(--color-dark-gray)}
.message-good,.message-pangram{-webkit-animation:drift 2s;animation:drift 2s;color:#000}
.message-pangram{background-color:var(--color-highlight);outline:none}
#entry-container{align-items:center;display:flex;height:2em;margin:0 auto;text-align:center;width:100%}
#entry-container-holder{display:inline-block;font-size:1.7em;margin:0 auto;text-transform:uppercase;vertical-align:middle}
#entry-container-holder:after{-webkit-animation:blink 1s step-start 0s infinite;animation:blink 1s step-start 0s infinite;background:var(--color-highlight);content:"";display:inline-block;height:1.2em;position:relative;right:-4px;top:6px;width:2px}
.keys-container{align-items:center;display:flex;flex-flow:row wrap;height:93px;justify-content:center;margin:0 auto;text-align:center;width:258px}
.keys{color:var(--color-highlight);flex:0 0 36%;font-size:5em;height:1em}
.keys-spacer{flex-basis:16.66667%}
.keys-letter{align-items:center;display:flex;flex-basis:33.33333%;height:100%;justify-content:center;text-align:center}
.keys-button{background-color:var(--button-background);border:none;border:1px solid var(--button-border);color:var(--button-color);cursor:pointer;font-size:1.44em;font-weight:700;outline:none;padding:0;text-align:center;text-transform:uppercase;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;vertical-align:middle}
.keys-button:active{background-color:var(--color-gray-emphasis);-webkit-transform:scale(.75);transform:scale(.75)}
.keys-button.middle{background-color:var(--color-keys-button-middle-bg);border:1px solid var(--button-border-middle);color:var(--color-keys-button-middle)}
.keys-button.middle:active{background-color:var(--color-highlight-dark)}
.keys-button.circle{border-radius:50%;height:73px;width:73px}
.keys-button.hex{-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);height:100%;width:93%}
@-webkit-keyframes keys-button-press {
50%{background-color:var(--color-gray-emphasis);-webkit-transform:scale(.8);transform:scale(.8)}
}
@keyframes keys-button-press {
50%{background-color:var(--color-gray-emphasis);-webkit-transform:scale(.8);transform:scale(.8)}
}
@-webkit-keyframes keys-button-middle-press {
50%{background-color:var(--color-highlight-dark);-webkit-transform:scale(.8);transform:scale(.8)}
}
@keyframes keys-button-middle-press {
50%{background-color:var(--color-highlight-dark);-webkit-transform:scale(.8);transform:scale(.8)}
}
@-webkit-keyframes nav-button-press {
50%{background-color:var(--color-gray-emphasis)}
}
@keyframes nav-button-press {
50%{background-color:var(--color-gray-emphasis)}
}
#buttons-container{align-items:center;display:flex;justify-content:space-around;margin:20px auto;max-width:300px;width:100%}
.nav-button{background-color:var(--color-transparent);border:1px solid var(--color-dark-gray);border-radius:16px;color:var(--color-black);cursor:pointer;font-size:1em;height:50px;outline:none;padding:12px 20px;-webkit-user-select:none;user-select:none}
.nav-button:hover:active{background-color:var(--color-gray-emphasis)}
#button-shuffle-container{height:50px;position:relative;width:50px}
#button-shuffle,#button-shuffle-img{height:50px;left:0;position:absolute;top:0;width:50px}
#button-shuffle-img{align-items:center;cursor:pointer;display:flex;justify-content:center;pointer-events:none;text-align:center}
#button-shuffle-img svg{height:2rem}
#button-shuffle:hover:active{background-color:var(--color-gray-emphasis)}
#popup-click-bg{height:100%;left:0;top:0}
#popup-click-bg,.popup{position:absolute;width:100%}
.popup{align-items:flex-start;background-color:var(--color-background);border:1px solid var(--color-dark-gray);border-radius:8px;box-shadow:0 4px 24px var(--color-gray);display:flex;height:auto;left:50%;max-width:300px;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.popup-head-container{display:flex;flex-direction:row;justify-content:center;width:100%}
.popup-content{display:flex;flex-grow:9;flex-wrap:wrap;max-width:100%;padding:12px}
#popup-content-alt{height:100%;text-align:center;width:100%}
#popup-exit{cursor:pointer;display:flex;height:32px;outline:none;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:32px}
#popup-exit svg{height:100%;width:100%}
#popup-exit-alt{background-size:contain;cursor:pointer;height:32px;outline:none;position:absolute;right:15px;top:15px;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:32px}
#popup-exit-alt svg{height:100%;width:100%}
.popup-heading{flex-basis:100%;font-size:1.4em;margin:0 auto 10px}
.popup-content-text{color:var(--color-text-gray);font-size:.9em;width:95%}
.return-popup-header{margin-top:35px}
#all-img,#victory-img{margin:50px auto 0;width:50%}
#all-countdown,#all-text,#return-countdown,#return-text,#victory-countdown,#victory-text{color:var(--color-text-gray);width:70%}
#all-text,#return-text,#victory-text{margin:10px auto 20px}
#all-countdown,#return-countdown,#victory-countdown{margin:10px auto 40px}
#all-countdown-span,#return-countdown-span,#victory-countdown-span{color:var(--color-highlight)}
#prev-letters-container{color:var(--color-text-gray);font-size:1.5em;font-weight:700;margin:10px auto 0;text-align:center}
.prev-entered-letter{font-size:1.1em;margin:0 3px}
#prev-stats{color:var(--color-text-gray);font-size:1em;font-weight:700;margin:0 auto 15px;text-align:center}
#prev-words-container{display:flex;flex-wrap:wrap;margin:0 auto 16px}
.prev-entered-word,.prev-entered-word a{font-size:1.1em;margin:1px 2px;padding:0 2px;text-decoration:none}
#reset-text{color:var(--color-text-gray);margin:10px auto 30px;width:70%}
.reset-button{background-color:var(--color-transparent);border:1px solid var(--color-dark-gray);border-radius:8px;color:var(--color-black);cursor:pointer;font-size:1em;margin:0 auto 30px;outline:none;padding:8px 16px}
.reset-button:hover:active{background-color:var(--color-gray-emphasis)}
.reset-button-action{background-color:var(--color-highlight);color:#000}
.reset-button-action:hover:active{background-color:var(--color-highlight-dark)}
.blur{-webkit-filter:blur(8px);filter:blur(8px)}
.hidden{display:none}
.bolded{font-weight:700}
.highlight{color:var(--color-highlight)}
.highlight-background{background-color:var(--color-highlight);color:var(--color-text-gray-highlight)}
.invalid{color:var(--color-invalid)}
.bold{font-weight:700}
@keyframes blink {
50%{opacity:0}
}
@-webkit-keyframes blink {
50%{opacity:0}
}
@-webkit-keyframes shake {
10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}
20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}
30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}
40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}
}
@keyframes shake {
10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}
20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}
30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}
40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}
}
@-webkit-keyframes drift {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
to{-webkit-transform:translateY(-10px);transform:translateY(-10px)}
}
@keyframes drift {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
to{-webkit-transform:translateY(-10px);transform:translateY(-10px)}
}
#entered-toggle,#popup-exit,#popup-exit-alt{-webkit-filter:invert(var(--invert));filter:invert(var(--invert))}
#button-shuffle-img{-webkit-filter:brightness(var(--bright));filter:brightness(var(--bright))}
body.dark{--color-highlight:#f8cd05;--color-highlight-dark:#be9c04;--color-invalid:#414141;--color-gray:#c6c6c6;--color-gray-emphasis:#d9d9d9;--color-dark-gray:#ccc;--color-text-gray:#bbb;--color-text-gray-highlight:#444;--color-transparent:#0000;--color-black:#fafafa;--color-message-bad:#222;--color-background:#2c2c2c;--link-color:#ddd;--invert:1;--bright:1000;--button-background:#3b3a35;--button-border:#3b3a35;--button-border-middle:var(--color-highlight);--button-color:var(--color-black);background-color:var(--color-background);color:#ccc}
.toggle{border:1px solid #c7c7c7;border-radius:4px;cursor:pointer;display:flex;margin-bottom:16px;overflow:hidden;padding:0}
.toggle__option{background-color:#dfdfdf;color:#363636;display:inline-block;font-size:14px;font-weight:500;padding:10px 20px;text-align:center}
.selected{background-color:#fff;color:#121212;font-weight:700}
.delimeter{margin:0 5px;-webkit-user-select:none;user-select:none}
.controls__container{align-items:center;align-self:center;display:flex;margin-left:auto}
.controls__item{cursor:pointer;-webkit-user-select:none;user-select:none}
.supergrid{color:var(--color-black);display:inline;flex-wrap:nowrap;max-height:330px;overflow:hidden;padding-bottom:10px;scrollbar-width:thin;text-overflow:ellipsis;transition:height 1s;white-space:nowrap}
.entered-words-expanded .supergrid{grid-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:repeat(3,minmax(33%,1fr));max-width:100%;overflow-x:hidden;overflow-y:auto;width:100%}
.text-bold{font-weight:700}
#games-popup{min-height:525px}
#stats-popup{min-height:450px}
#button-no-reset{margin-right:10px}
.controls__icon{cursor:pointer;margin-right:5px;max-height:28px;max-width:28px}
.controls__icon svg{height:100%;width:100%}
.message__container{align-items:center;display:flex;font-size:16px;justify-content:center;left:0;left:50%;position:absolute;text-align:center;top:0;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:12}
.message__inner{background-color:#f5f5dc;border-radius:10px;padding:10px;width:150px}
.mode-button__container{align-items:center;display:flex}
.mode-button{background-color:#fff;border:none;border-radius:9px;color:#000;cursor:pointer;font-size:1.3em;font-weight:600;margin-left:5px;padding:5px}
body.dark .mode-button{background-color:initial;color:#fff}
body.dark .mode-button.active{background-color:#fff;color:#000}
.mode-button.active{background-color:#000;color:#fff}
.sharebar-icons-container{display:flex}
.sharebar-icons-container a{max-height:42px;max-width:42px}
.sharebar-icons-container a img{height:100%}
.fullwidth{width:100%}
.header__mobile{align-items:center;display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
.controls__center{align-items:center;display:flex;justify-content:center}
@media screen and (min-width:500px) {
#progress-container,.entered-container{width:100%}
}
@media screen and (min-width:720px) {
.entered-words-expanded .supergrid{grid-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:repeat(3,minmax(33%,1fr));max-height:320px}
}
.stats__container{padding:0}
.stats__week{list-style:none;padding:0}
.stats__day{border-top:1px solid #000}
.stat{font-size:16px;height:30px;width:100%}
.stat,.stat__weekday{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}
.stat__weekday{width:30px}
.stat__bar{height:100%;position:relative;width:100%}
.bar__text{height:100%;justify-content:space-between;position:relative;width:100%;z-index:10}
.bar__text,.bar__text-rank{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}
.bar__text-rank{justify-content:flex-start}
.bar__text-rank-text{font-weight:700}
.bar__percentage{background-color:#ffeca0;bottom:0;height:100%;left:0;position:absolute;top:0;transition:width 1s;width:0;z-index:1}
.text{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}
.shareButton{flex-direction:column;height:60px}
.shareButton,.shareButton__inner{display:flex;justify-content:center}
.shareButton__inner{fill:#fff;align-items:center;background:#008000cc;border:none;border-radius:4px;color:#fff;cursor:pointer;flex-direction:row;font-size:1rem;font-weight:700;height:40px;width:100px}
.shareButton__text{margin-right:4px}
.shareButton__inner svg{height:24px;width:24px}
.file{border-radius:5px;box-shadow:0 2px 2px 0 #00000029 0 0 0 1px #00000014;margin:5px 5px 10px;width:100%}
.file__inner{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:10px}
.file__left{align-items:flex-start;flex-direction:column;justify-content:center}
.file__left,.file__right{display:flex}
.file__state{align-items:center;display:flex;justify-content:center;margin:3px}
.state__score{align-items:center;background-color:var(--color-highlight);border-radius:25px;color:var(--color-black);display:flex;font-size:12px;height:28px;justify-content:center;margin-left:5px;text-align:center;width:28px}
.file__pangram{display:flex;font-weight:700}
.file__delete{background-color:initial;border:none;color:var(--color-black);cursor:pointer;font-size:14px;font-weight:700;margin:0;padding:0}
.games__add-container,.games_container{align-items:center;display:flex;justify-content:center}
.games_container{flex-direction:column}
.games__add-button{align-items:center;background-color:var(--color-highlight);border:none;border-radius:25px;box-shadow:0 2px 2px 0 #00000024 0 3px 1px -2px #0000001f 0 1px 5px 0 #0003;color:inherit;cursor:pointer;display:flex;font:inherit;height:40px;justify-content:center;padding:0;width:40px}
.games__add-button svg{fill:#000;height:18px}
.dropdown{display:inline-block;position:relative}
.dd_button{border-radius:4px;cursor:pointer;display:inline-block;padding:0 15px 0 0;-webkit-user-select:none;user-select:none;white-space:nowrap}
.dd_button:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--color-black);content:"";height:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:0}
.dd_input{display:none}
.dd_menu{background-color:var(--color-background);border:1px solid #ccc;border-radius:4px;box-shadow:0 0 6px 0 #0000001a;list-style-type:none;margin:2px 0 0;padding:0;position:absolute;right:0;top:100%;z-index:10}
.dd_input+.dd_menu{display:none}
.dd_input:checked+.dd_menu{display:block}
.dd_menu li{cursor:pointer;padding:10px 20px;-webkit-user-select:none;user-select:none;white-space:nowrap}
.dd_menu li:hover{background-color:#f6f6f6}
body.dark .dd_menu li:hover{background-color:#474747}
.dd_menu li a{display:block;margin:-10px -20px;padding:10px 20px}
.dd_menu li.divider{border-bottom:1px solid #ccc;padding:0}