:root {
    --sky: #40B0E1;
    --ocean: #297AAD;
    --navy: #1A4F70;
    --space: #0E2E41;

    --menu-fontsize-small: 20px;
    --menu-fontsize-medium: 28px;
    --menu-fontsize-large: 50px;

    --grid-height: 66%;
    --grid-margin: 6px;
    --grid-padding: 12px;
    --grid-fontsize: calc((4vh + 4vw) / 2);
    --grid-fontsize-small: calc((1.25vh + 1.25vw) / 2);
    --grid-sup-padding: calc((0.5vh + 0.5vw) / 2);
    
    --keyboard-height: calc(100% - var(--grid-height));
    --keyboard-margin: 4px;
    --keyboard-padding: 10px;
    --keyboard-fontsize: calc((1.75vh + 1.75vw) / 2);
    --keyboard-fontsize-large: calc((2vh + 2vw) / 2);

    --fathom-green: #11966e;
    --fathom-orange: #ffb24d;
    --fathom-red: #ff7070;
}

body { margin:0; background:var(--space); background-image:linear-gradient(to bottom, var(--ocean), var(--navy)); font-family:'europa', 'helvetica', sans-serif; }
body > pre { display:none; position:fixed; bottom:0; left:0; margin:0; color:#ffffff40; width:100%; text-align:center; pointer-events:none; }

.color-green { color:#fff !important; background:var(--fathom-green) !important }
.color-orange { color:#fff !important; background:var(--fathom-orange) !important }
.color-red { color:#fff !important; background:var(--fathom-red) !important }
.color-black { color:#fff !important; background:#333 !important }

.game-modal { display: none; position: fixed; z-index: 101; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); overflow: auto; justify-content: center; align-items: center; font-size: 20px; color:#333; animation:anim-fadein .4s ease; }
.game-modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: calc(100% - 50px); max-width: 700px; box-shadow: 0 4px 8px 0 #00000033,0 6px 20px 0 #00000030; animation:anim-fadein-top .4s ease; border-radius: 10px; word-wrap: break-word }
.game-modal-body { overflow-y: auto; padding:20px; max-height:calc(100vh - 100px) }
.game-modal-body:after { content: ""; display: table; clear: both; }
.game-modal-body h1 { font-size:30px; font-weight: bold; line-height: 1; margin:0 0 15px 0 }
.game-modal-body h2 { font-size:24px; font-weight: bold; line-height: 1; margin:0 0 15px 0 }
.game-modal-close {position:absolute;right:-19px;top:-19px;height:38px;width: 38px;color: #fff;text-align:center;font-size: 21px;background: #ff9b9b;border-radius: 50%;user-select: none;z-index: 1}
.game-modal-close i { margin-top:10px }
.game-modal-close:hover, .book-modal-close:focus { text-decoration: none; cursor: pointer; opacity: 1.0; background: #ff7070; }
.game-modal-body hr { margin:15px 0; border:0; border-top:1px solid rgba(0,0,0,.1) }
.game-modal-body ul { margin:15px 0; }
.game-modal .button { background:var(--navy); color:white; padding: 12px 20px; border:none; font-size:20px; font-weight:bold; margin-top:5px; user-select:none; text-align:center; border-radius:10px; cursor:pointer; transition:background-color .3s ease }
.game-modal .button:hover { background:var(--navy); color:#fff; opacity: .9 }
.game-modal .button.outline { background:none; color:var(--navy); border:2px solid var(--navy); padding: 10px 20px; font-weight: normal }
.game-modal .button.outline:hover { background:var(--navy); color:#fff; }
.game-modal .button.disabled { background:#33333380; color: white; padding: 12px 20px; border: none; pointer-events:none; }
.game-modal .button:active { transform: scale(.96) }
.game-modal-content a { color:var(--ocean); text-decoration:none; }
.game-modal-content a:hover { text-decoration:underline }

.info-letters { color:#fff; font-weight:bold; font-size:24px; margin:5px 0 5px 10px }
.info-letters div { background:#333; width:50px; height:50px; margin-right:3px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; text-shadow:2px 2px #33333340 }
.info-letters div:last-of-type { margin-right:0 }
.info-letters i { margin-left:10px }
.info-table { margin:0; border:0; border-collapse:collapse; font-size:20px; color:#333; line-height:1.15 }
.info-table td { padding:0 }
#info-letter-colors td { vertical-align:top; }
#info-letter-colors span { display:inline-block; width:70px; margin:2px 10px 2px 0; padding:4px 10px; text-align:center; border-radius:5px; text-shadow:2px 2px #33333340 }
#info-example span { display:inline-block; margin:2px 10px 2px 0 }

#game-over .game-modal-content { max-width:350px }
#game-over-answer { font-size:30px; font-weight:bold; text-transform:uppercase }
#game-over-win, #game-over-lose, #game-over-timed, #daily-streak { text-align:center; font-size:22px; }
#stat-current-streak, #stat-best-streak, #game-over-timed-answer { font-weight:bold; text-transform:uppercase }
#game-over-timed-score { font-size:30px; font-weight:bold }
#game-over-pb { margin-top:10px; text-align:center }
#game-over-pb span { display: inline-block; background:var(--sky); background-image:linear-gradient(-45deg, #e273da, var(--sky)); color:#fff; line-height:1; padding:6px 8px; border-radius:10px; font-size:16px; box-shadow:0 4px 10px #33333340 }
#game-over-buttons { margin-top:30px }
#game-over-buttons > div:first-of-type { margin-top:0 }
#game-over-buttons > div[data-type="stats"] { margin-top:10px; color:var(--navy); text-align:center; cursor:pointer }
#game-over-buttons > div[data-type="stats"]:hover { text-decoration:underline }

#game-alert { position:relative; color:#333; background-color:#fefefe; margin:auto; margin-top:30vh; padding:20px; width:max-content; max-width:400px; text-align:center; font-size:22px; box-shadow: 0 4px 8px 0 #00000033,0 6px 20px 0 #00000030; animation: anim-fadein-top .4s ease; border-radius: 10px; word-wrap: break-word; line-height:1; z-index:10; /*pointer-events:none;*/ }

#game-toolbar { position:fixed; top:0; left:0; width:100%; padding:12px 12px 0 12px; box-sizing:border-box; pointer-events:none; z-index: 5; user-select:none; }
#game-toolbar > div:not(:first-of-type) { margin-left:10px }
.toolbar-button { display:inline-block; padding: 10px 15px; background: #ffffff40;color:#fff; font-size: var(--menu-fontsize-small);text-align:center;line-height: 1;border-radius: 5px;cursor: pointer; user-select:none; transition:transform .3s ease, background-color .3s ease; pointer-events:auto; }
.toolbar-button:hover { transform:scale(1.05) }
.toolbar-button:active { transform:scale(1); transition:none }
.anim-flip .toolbar-button { pointer-events:none }
#toolbar-menu-score { width:55px; overflow:hidden; cursor:default }
#toolbar-menu-timer { width:75px; overflow:hidden; cursor:default }
#toolbar-menu-timer[data-type="reset"] { cursor:pointer }
#toolbar-menu-timer[data-type="reset"]:hover { background:var(--fathom-red) !important }
#toolbar-menu-timer[data-type="reset"]:hover:after{ content:'RESET'; background:#ff7070dd; text-shadow:0 0 10px #33333380; font-weight:bold;  position:absolute; top:0; left:0; width:100%; padding:10px 15px; text-align:center; box-sizing:border-box; animation:anim-fadein .3s ease; z-index:1 }
#toolbar-menu-timer.large { transform:translate(-26px,10px) scale(1.5) !important }
#toolbar-menu-timer.anim-score-fadeout #game-timer,
#toolbar-menu-score.anim-score-fadeout #game-score { animation: anim-score-fadeout .6s ease; animation-delay:200ms; animation-fill-mode:forwards; }
#toolbar-menu-timer #game-timer,
#toolbar-menu-score #game-score { animation: anim-score-fadein .6s ease; }
#menu-option-calendar { position:absolute; top:14px; right:14px }
#toolbar-menu-score-style { background:none; font-size:30px; padding:5px }

.stats-table-title { text-align:center; margin:0 !important; font-size:20px !important; }
.stats-table { width:100%; /*table-layout:fixed;*/ border-collapse:collapse; padding:20px; font-family:'europa','helvetica'; font-size:16px; border-spacing:0; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px #33333320, 0 4px 10px #33333340 }
.stats-table th,
.stats-table td { padding:8px; text-align:center; color:#222; overflow-wrap:break-word; border-left:1px solid #33333320 }
.stats-table th { background:#333; background-image:linear-gradient(to bottom, #555, #333); color:#fff; padding-top:10px; padding-bottom:10px; border-left:1px solid #ffffff40 }
.stats-table tr { background:#f3f3f3 }
.stats-table tr:nth-child(odd) { background:#e3e3e3 }
.stats-table tr th:first-of-type { border-left:0; width:40%; background:var(--navy); background-image:linear-gradient(to bottom, var(--ocean), var(--navy)); }
.stats-table tr td:first-of-type { border-left:0; font-weight:bold; }
.stats-table.highlight-4 [data-count="4"],
.stats-table.highlight-5 [data-count="5"],
.stats-table.highlight-6 [data-count="6"] { background:#e273da60 }

.scoreDistTitle { margin:8px 0 0 0; line-height:1; color:#22222280; font-weight:400 }
.scoreDistContainer { display:flex; background-image:linear-gradient(to bottom, transparent, #ccc); padding:8px; padding-left:0; width:100%; box-sizing:border-box; }
.scoreDistLabel { min-width:40px; font-weight:bold; line-height:1; cursor:pointer; user-select:none }
.scoreDistLabel .row { display:flex; align-items:center; justify-content:center; font-family:'futura-pt-bold'; font-size:18px; color:#222222ab; }
.scoreDistLabel .row, .scoreDistBar .row { position:relative; height:30px; margin:2px 0; }
.scoreDistBar { width:100%; }
.scoreDistBar .row .bar-text { height:100%; padding:0 6px; color:#fff; text-shadow:1px 1px #33333380; display:flex; align-items:center; justify-content:space-between; }
.scoreDistBar .row .bar-text.text-right { position:absolute; left:100%; color:#333; text-shadow:none }
.scoreDistBar .row .bar-text div:not(:first-of-type) { padding-left:10px }
.scoreDistBar .row { background-color:var(--fathom-green); box-shadow:0 0 4px #33333360; border-radius:4px; transition:1s ease }
.scoreDistBar .row[data-score="1"] { background-color:var(--sky); background-image:linear-gradient(-45deg, #e273da, var(--sky)); }
.scoreDistBar .row[data-score="2"] { background-color:var(--sky) }
.scoreDistBar .row[data-score="X"] { background-color:#333 }


.game-menu { position:fixed; top:0; left:0; width:100%; height:100%; padding:12px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; }
.game-menu h1 { font-size:var(--menu-fontsize-large); margin: 0 0 10vh 0; text-align:center; line-height: 1;user-select: none;}
.game-menu h2 { font-size:var(--menu-fontsize-medium); margin: 0 0 5vh 0; text-align:center; line-height: 1;user-select: none; opacity:.5 }
.game-menu.disabled, .toolbar-button.disabled { pointer-events:none }

#game-mode h1 { position:relative }
#game-mode h1 sub { display:none; position:absolute; bottom:0; font-size:10px; font-weight:300; opacity:.5 }
#game-mode h1:active sub { display:inline-block }

.menu-options { display:flex; width:100%; align-items:center; justify-content: center; }
.menu-option { display:flex; align-items:center;  flex-direction:column; background:#ffffff40; margin: 0 10px; flex: 1 0 25%; max-width: 420px;border-radius: 10px;cursor: pointer;user-select: none;overflow: hidden; transition:transform .3s ease; box-sizing:border-box; }
.menu-option:hover { transform:scale(1.05) }
.menu-option:active { transform:scale(1.02); transition:none }
.menu-option-title { font-size:var(--menu-fontsize-medium); font-weight:bold; padding:20px; width:100%; box-sizing:border-box;  background:#ffffff20; line-height:1; position:relative }
.menu-option-title > i { float:right; opacity:.5 }
.menu-option-subtitle { font-size:var(--menu-fontsize-small); padding: 20px; width: 100%; min-height:140px; display:flex; align-items:center; justify-content:center; box-sizing: border-box; text-align:left; line-height: 1.15; opacity:.75 }
.menu-option ul { margin:0; padding-left:20px }
.anim-menu-fadein-right { animation:anim-menu-fadein-right .6s ease; animation-fill-mode:forwards; }
.anim-menu-fadein-left  { animation:anim-menu-fadein-left .6s ease; animation-fill-mode:forwards; }
.anim-menu-fadeout-right { animation:anim-menu-fadeout-right .3s ease; animation-fill-mode:forwards; pointer-events:none; }
.anim-menu-fadeout-left  { animation:anim-menu-fadeout-left .3s ease; animation-fill-mode:forwards; pointer-events:none; }

#game-wordlength .menu-options { flex-wrap:wrap }
#game-wordlength .menu-option { justify-content:center; font-size:var(--menu-fontsize-medium); padding:20px; max-width:250px; flex:auto; }
#game-wordlength .menu-option .text-large { justify-content:center; font-size:var(--menu-fontsize-large); font-weight:bold }
#game-wordlength h1 { text-transform:capitalize }

#game-calendar { justify-content:center !important }
.calendar table th, 
.calendar table td { padding:0; color:#fff; user-select:none }
.calendar table th { font-size:24px; width:75px; height:75px; font-weight:normal }
.calendar .month-block { font-size:36px; color:#fff; text-align:center; user-select:none; cursor:default }
.calendar .date-block { width:75px; height:75px; position:relative; background:#ffffff40; border-radius:5px; line-height:1; display:flex; align-items:center; justify-content:center }
.calendar .date-block[data-score] { background:var(--fathom-green) !important }
.calendar .date-block[data-score="X"] { background:#333 !important }
.calendar .date-block:not([data-word]) { background:#ffffff10 }
.calendar .date-block.today { background:var(--sky); cursor:pointer }
.calendar .date-block.today:not([data-word]) { transition:transform .3s ease }
.calendar .date-block.today:not([data-word]):hover { transform:scale(1.2); z-index:2 }
.calendar .date-block.today:not([data-word]):active { transform:scale(1.1); transition:none }
.calendar .date-block.today:not([data-word]):after { content:'\f04b'; font:var(--fa-font-solid); font-size:30px; text-shadow:2px 2px #33333340 }
.calendar .date-block .date { font-size:18px; font-weight:300; color:#ffffff80; position:absolute; top:0; left:0; padding:4px }
.calendar .date-block .score { font-family:'futura-pt-bold'; font-size:36px; font-weight:bold; text-shadow:2px 2px #33333340 }
.calendar .date-block .word { font-size:14px; font-weight:bold; text-align:center; text-transform:uppercase; text-shadow:2px 2px #33333340; opacity:0; z-index:1; transition:opacity .3s ease }
.calendar .date-block[data-score] .word { position:absolute; bottom:2px; }
.calendar .date-block.show-word .word,
.calendar .date-block:hover .word { opacity:1 }
@media only screen and (max-width: 600px), only screen and (max-height:600px) {
    .calendar table th { font-size:16px }
    .calendar table th,
    .calendar .date-block { width:50px; height:50px; }
    .calendar .month-block,
    .calendar .date-block .score { font-size:24px; }
    .calendar .date-block.today:not([data-word]):after { font-size:20px; }
    .calendar .date-block .date,
    .calendar .date-block .word { font-size:12px; }
}
@media only screen and (max-width: 375px) {
    .calendar table th, .calendar .date-block { width:calc(100vw / 7 - 4px) }
}

/* score emoji */
#game-calendar .date-block .score .emoji,
#game-stats .scoreDistLabel .row .emoji,
.score-emoji #game-calendar .date-block .score .num,
.score-emoji #game-stats .scoreDistLabel .row .num,
#toolbar-menu-score-style .num,
.score-emoji #toolbar-menu-score-style .emoji { display:none }

.score-emoji #game-calendar .date-block .score .emoji,
.score-emoji #game-stats .scoreDistLabel .row .emoji { display:block; color:#000 }
.score-emoji #toolbar-menu-score-style .num { display:block }


.gm-daily #toolbar-menu-info span,
.gm-daily #toolbar-menu-playagain,
.gm-daily #game-over-buttons .button:not(.gm-daily-group),
#game-over .button.gm-daily-group:not([data-type="gamemode"]) { display:none !important }

.gm-daily #game-over .button.gm-daily-group { display:block !important }

#game-container { display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; }
#game-grid-container { position:absolute; top:0; left:0; width:100%; height:var(--grid-height); padding: var(--grid-padding); padding-bottom:0; box-sizing:border-box; }

.game-grid { display:flex; flex-direction:column; height:auto; max-width:100%; margin:auto; transition:transform .3s ease }
.game-grid .row { height: 100%; display:flex; justify-content:center; margin-top:var(--grid-margin); }
.game-grid .row:first-of-type { margin:0 }
.game-grid .row.error { animation:anim-shake .3s ease-in-out 2 }
.game-grid .row.active .letter { background: #ffffff40; box-shadow:inset 0 0 0 3px transparent, 0 0 8px transparent; }
.game-grid .row.active .letter.filled { animation:anim-pop .3s ease }
.game-grid .row.complete .letter { box-shadow:inset 0 0 0 3px transparent, 0 0 8px #33333360 }
.game-grid .letter { height:100%; margin-left:var(--grid-margin); display:flex; align-items:center; justify-content:center; background:none; color: #fff; font-size:var(--grid-fontsize); font-weight:bold; box-shadow: inset 0 0 0 3px #ffffff40, 0 0 8px transparent; text-transform:uppercase; user-select:none; border-radius:5px; text-shadow:2px 2px #33333340; transition:background-color .6s ease, box-shadow .6s ease; position:relative; }
.game-grid .letter:first-of-type { margin:0 }
.game-grid.fadeout { animation:anim-grid-fadeout .6s ease; animation-delay:200ms; animation-fill-mode:forwards; }
.game-grid.fadein .row, .game-grid .row.fadein { animation:anim-menu-fadein-left 1s ease; animation-fill-mode:backwards; }
.game-grid .row.fadein { animation-duration:.3s }
.game-grid.fadein .row:nth-of-type(2) { animation-delay:100ms }
.game-grid.fadein .row:nth-of-type(3) { animation-delay:200ms }
.game-grid.fadein .row:nth-of-type(4) { animation-delay:300ms }
.game-grid.fadein .row:nth-of-type(5) { animation-delay:400ms }
.game-grid.fadein .row:nth-of-type(6) { animation-delay:500ms }
.game-grid.fadein { transition:none !important }

#game-keyboard-container { position:absolute; bottom:0; left:0; width:100%; height:var(--keyboard-height); padding:var(--keyboard-padding); box-sizing:border-box; touch-action:manipulation }
#game-keyboard { display:flex; flex-direction: column; height:100%; margin:auto; }
#game-keyboard .row { height: 100%; display:flex; align-items:center; justify-content:center; }
#game-keyboard .key { width:80px; height:100%; padding:2px; box-sizing:border-box; user-select:none; cursor:pointer; transition:transform .3s ease; }
#game-keyboard .key div { width:100%; height:100%; display:flex; align-items:center; justify-content:center; line-height:1; border-radius:5px;  background:#fff; color:#333; font-size:var(--keyboard-fontsize); font-weight:bold; text-transform:uppercase; box-shadow:0 0 4px #33333360; transition:background-color .6s ease, color .6s ease }
#game-keyboard .key[data-key="enter"], 
#game-keyboard .key[data-key="backspace"] { width:122px }
#game-keyboard .key[data-key="enter"] div, 
#game-keyboard .key[data-key="backspace"] div { font-size:var(--keyboard-fontsize-large); background:#ffffff40; color:#fff }
#game-keyboard .key:first-of-type { margin:0 }
#game-keyboard .key:active, #game-keyboard .key.active { transform:scale(.95); transition:none }
#game-keyboard .key:active div, #game-keyboard .key.active div { box-shadow:inset 0 0 10px #33333340, 0 0 8px #33333360; transition:none }

.game-grid .letter.wrong, #game-keyboard .key.wrong div { background:#333 !important; color:#fff; text-shadow:2px 2px #33333340 }
.game-grid .letter.near, #game-keyboard .key.near div { background:var(--fathom-orange) !important; color:#fff; text-shadow:2px 2px #33333340 }
.game-grid .letter.right, #game-keyboard .key.right div { background:var(--fathom-green) !important; color:#fff; text-shadow:2px 2px #33333340 }
.game-grid .row.complete .letter.right.multiple:after { content:'\2b'; font:var(--fa-font-solid); position:absolute; top:0; right:0; padding:var(--grid-sup-padding); font-size:var(--grid-fontsize-small); color:#ffffff80; animation:anim-fadein-top .4s ease; text-shadow:none }
/*#game-keyboard .key.wrong:active div, #game-keyboard .key.wrong.active div { background:var(--fathom-red) !important; }*/

.letter-flip.anim-flip .game-grid .row.active .letter { transition:background-color 0s, color 0s; animation:anim-flip 1s linear; }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(1) { transition-delay:500ms; }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(2) { animation-delay:400ms; transition-delay:900ms }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(3) { animation-delay:800ms; transition-delay:1300ms }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(4) { animation-delay:1200ms; transition-delay:1700ms }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(5) { animation-delay:1600ms; transition-delay:2100ms }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(6) { animation-delay:2000ms; transition-delay:2500ms }
.letter-flip.anim-flip .game-grid .row.active .letter:nth-of-type(7) { animation-delay:2400ms; transition-delay:2900ms }

.letter-flip .game-grid .row.correct .letter { animation:anim-correct 1s ease }
.letter-flip .game-grid .row.correct .letter:nth-of-type(2) { animation-delay:200ms }
.letter-flip .game-grid .row.correct .letter:nth-of-type(3) { animation-delay:400ms }
.letter-flip .game-grid .row.correct .letter:nth-of-type(4) { animation-delay:600ms }
.letter-flip .game-grid .row.correct .letter:nth-of-type(5) { animation-delay:800ms }
.letter-flip .game-grid .row.correct .letter:nth-of-type(6) { animation-delay:1000ms }
.letter-flip .game-grid .row.correct .letter:nth-of-type(7) { animation-delay:1200ms }


@media only screen and (min-width: 1011px) and (max-width: 1340px) {
    #toolbar-menu-timer { position:fixed; top:60px; right:12px }
}
@media only screen and (max-width: 1180px) {
    body[data-page="#game-container"] #toolbar-menu-stats span { display:none }
}
@media only screen and (max-width: 1010px) {
    :root {
        --keyboard-fontsize: calc((2.5vh + 2.5vw) / 2);
        --keyboard-fontsize-large: calc((2.5vh + 2.5vw) / 2);
        
        --grid-fontsize-small: calc((2.0vh + 2.0vw) / 2);
        --grid-sup-padding: calc((0.8vh + 0.8vw) / 2);
    }
    .toolbar-button span:not([id]) { display:none }
    #toolbar-menu-timer.large { transform:none !important }

    .game-menu { top:52px; height:calc(100% - 52px); justify-content:flex-start; overflow:hidden auto }
    .game-menu h1, .game-menu h2 { margin-bottom: 3vh }
    .menu-options { justify-content:flex-start; flex-direction:column; }
    .menu-option { flex:auto; width:100%; margin:10px 0 }

    #game-grid-container { top:unset; bottom:var(--keyboard-height); height:calc(var(--grid-height) - 52px) }
}
@media only screen and (max-width: 500px) {
    .game-modal-content { width:100%; height:auto }
    .game-modal-body { max-height:unset; padding:10px }
    .game-modal-close { position:fixed; top:15px; right:15px; box-shadow:0 0 10px #33333340 }

    .info-letters div { width:35px; height:35px; font-size:20px }
}
@media only screen and (max-height: 700px) {
    .menu-option-subtitle { min-height:15vh }
}


/* animations */
@keyframes anim-pop {
    0% { transform:scale(1.1) }
    100% { transform:scale(1) }
}
@keyframes anim-shake {
    0% { transform:translateX(0px) }
    25% { transform:translateX(10px) }
    75% { transform:translateX(-10px) }
    100% { transform:translateX(0px) }
}
@keyframes anim-flip {
    0% { transform:rotate3d(0, 1, 0, 0deg) }
    50% { transform:rotate3d(0, 1, 0, 90deg) }
    100% { transform:rotate3d(0, 1, 0, 0deg) }
}
@keyframes anim-correct {
    0% { transform:rotate(0deg) }
    100% { transform:rotate(360deg) }
}
@keyframes anim-fadein {
    0% { opacity:0 }
    100% { opacity:1 }
}
@keyframes anim-fadein-top {
    0% { opacity:0; top:-5% }
    100% { opacity:1; top:0% }
}
@keyframes anim-menu-fadein-right {
    0% { opacity:0; transform:translateX(-5%) }
    100% { opacity:1; transform:translateX(0%) }
}
@keyframes anim-menu-fadein-left {
    0% { opacity:0; transform:translateX(5%) }
    100% { opacity:1; transform:translateX(0%) }
}
@keyframes anim-menu-fadeout-right {
    0% { opacity:1; transform:translateX(0%) }
    100% { opacity:0; transform:translateX(5%) }
}
@keyframes anim-menu-fadeout-left {
    0% { opacity:1; transform:translateX(0%) }
    100% { opacity:0; transform:translateX(-5%) }
}
@keyframes anim-grid-fadeout {
    0% { opacity:1; margin-top:0% }
    100% { opacity:0; margin-top:-5% }
}
@keyframes anim-score-fadeout {
    0% { opacity:1; transform:translateY(0px) }
    100% { opacity:0; transform:translateY(40px) }
}
@keyframes anim-score-fadein {
    0% { opacity:0; transform:translateY(-40px) }
    100% { opacity:1; transform:translateY(0px) }
}