@import url(https://fonts.googleapis.com/css?family=Bangers&subset=vietnamese);
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:initial;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:initial}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{height:100%;width:100%}body{overflow:hidden}#root{background:#fff;font-family:Bangers,cursive;margin:auto}#root,.App{height:100%;width:100%}.App{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.user-score{bottom:1vh;color:#fff;font-size:clamp(4em,10vmin,10em);position:absolute;text-align:center;text-shadow:5px 5px 10px #000;width:100%}.user-score .round{font-size:.4em;left:50%;position:absolute;top:-1em;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.top{background:linear-gradient(180deg,#333e,#333d,#3337,transparent);height:calc(50% - min(60vh, 600px)/3);position:relative;width:100vw}.top>*{background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;top:2vh}.top .dc,.top .marvel{height:max(10vw,10vh);width:max(15vw,15vh)}.top .dc{left:5vw}.top .marvel{right:5vw}.arrows,.restart{aspect-ratio:1/1;height:min(20vw,13vh);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.arrows{-webkit-animation:shake 5s cubic-bezier(.36,.07,.19,.97) 0s infinite both;animation:shake 5s cubic-bezier(.36,.07,.19,.97) 0s infinite both}.arrows.stop{-webkit-animation:none;animation:none}.restart{-webkit-animation:slideDown .25s cubic-bezier(.61,.81,.42,1.32) 0s forwards,breathing 4s ease-out infinite normal;animation:slideDown .25s cubic-bezier(.61,.81,.42,1.32) 0s forwards,breathing 4s ease-out infinite normal;background-color:initial;border:none;cursor:pointer;-webkit-filter:drop-shadow(15px 10px 1px #000a);filter:drop-shadow(15px 10px 1px #000a);height:min(35vw,30vh);opacity:0;outline:none;top:-20vh;z-index:1}.stamp{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;align-content:center;align-items:center;display:flex;height:200vh;justify-content:center;left:50%;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none;visibility:visible;width:200vw;z-index:7}.stamp i{-webkit-animation:stamp 1.2s cubic-bezier(.85,.81,.87,1.32) .1s forwards;animation:stamp 1.2s cubic-bezier(.85,.81,.87,1.32) .1s forwards;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;-webkit-filter:drop-shadow(70px 70px 3px #000a);filter:drop-shadow(70px 70px 3px #000a);height:100%;opacity:0;scale:.9;width:100%}@-webkit-keyframes breathing{0%,60%,to{scale:.9}25%{scale:1}}@keyframes breathing{0%,60%,to{scale:.9}25%{scale:1}}@-webkit-keyframes slideDown{to{opacity:1;top:20vh}}@keyframes slideDown{to{opacity:1;top:20vh}}@-webkit-keyframes stamp{35%,85%{height:40%;opacity:1;width:40%}to{height:0;opacity:0;width:0}}@keyframes stamp{35%,85%{height:40%;opacity:1;width:40%}to{height:0;opacity:0;width:0}}@-webkit-keyframes shake{18%,2%{-webkit-transform:translateX(-51%);transform:translateX(-51%)}16%,4%{-webkit-transform:translateX(-49%);transform:translateX(-49%)}10%,14%,6%{-webkit-transform:translateX(-53%);transform:translateX(-53%)}12%,8%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes shake{18%,2%{-webkit-transform:translateX(-51%);transform:translateX(-51%)}16%,4%{-webkit-transform:translateX(-49%);transform:translateX(-49%)}10%,14%,6%{-webkit-transform:translateX(-53%);transform:translateX(-53%)}12%,8%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.card{background-position:50%;background-size:cover;border-radius:10px;cursor:pointer;height:min(60vh,600px);position:relative;width:min(400px,75vw)}.card.welcome{background-color:#111d}.card.welcome p{color:#fff;font-size:min(max(3.2vh,2vw),1.5em);letter-spacing:.05em;line-height:1.3em;padding:1em 1em .3em;position:relative}.card.welcome .arrow{background-position:50%;background-repeat:no-repeat;background-size:contain;display:inline-block;height:.8em;margin-inline:.3em;position:relative;width:1.5em}.card.welcome h3{text-align:center}.card.welcome .arrow.right{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.card *{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;position:absolute;-webkit-user-select:none;user-select:none}.card img{object-fit:cover;width:100%}.card h3{background:linear-gradient(90deg,#333e,#333d,#3332,transparent);bottom:5%;color:#fff;font-size:1.5em;letter-spacing:.05em;padding:.5em 0;text-indent:1em;width:min(400px,75vw)}.Card_container{display:flex;justify-content:center;left:50%;position:fixed;top:calc(50% - min(60vh, 600px)/2)}.swipe{position:absolute}.swipe.true h3{background:linear-gradient(90deg,#005020dd,#005020aa,transparent)}.swipe.false h3{background:linear-gradient(90deg,#500d00dd,#500d00aa,transparent)}.swipe.true:after{background:#005020aa;content:"CORRECT"}.swipe.false:after,.swipe.true:after{color:#fff;display:inline-block;font-size:1.3em;left:0;letter-spacing:.5em;padding-block:10px;position:absolute;text-align:center;top:0;width:100%}.swipe.false:after{background:#500d00cc;content:"WRONG"}.loader-wrapper{background:#fff;height:100vh;position:fixed;top:0;width:100vw;z-index:10}.loader-container{left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.loader-container h4{color:#eb3349;font-size:1.5rem;position:relative;text-transform:uppercase}.loader-container h4:after{-webkit-animation:Dots 2s cubic-bezier(0,.39,1,.68) infinite;animation:Dots 2s cubic-bezier(0,.39,1,.68) infinite;content:"";position:absolute}.loader-container .loader{margin:5% auto 30px}.loader-container .book{background:#fff;border:4px solid #eb3349;height:45px;-webkit-perspective:150px;perspective:150px;position:relative;width:60px}.loader-container .page{background:#eee;border:4px solid #eb3349;border-left:3px solid #f45c43;display:block;height:45px;margin:0;overflow:hidden;position:absolute;right:-4px;top:-4px;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:30px}.loader-container .page:before{top:10%}.loader-container .page:after,.loader-container .page:before{background:#eee;border-radius:20%;content:"";height:40%;left:20%;position:absolute;width:55%;z-index:9}.loader-container .page:after{top:55%}.loader-container .book .page:first-child{-webkit-animation:pageTurn 1.2s cubic-bezier(0,.39,1,.68) 1.6s infinite;animation:pageTurn 1.2s cubic-bezier(0,.39,1,.68) 1.6s infinite}.loader-container .book .page:nth-child(2){-webkit-animation:pageTurn 1.2s cubic-bezier(0,.39,1,.68) 1.45s infinite;animation:pageTurn 1.2s cubic-bezier(0,.39,1,.68) 1.45s infinite}.loader-container .book .page:nth-child(3){-webkit-animation:pageTurn 1.2s cubic-bezier(0,.39,1,.68) 1.2s infinite;animation:pageTurn 1.2s cubic-bezier(0,.39,1,.68) 1.2s infinite}@-webkit-keyframes pageTurn{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}20%{background:#f45c43;border-color:#f45c43}40%{background:#fff;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}to{background:#fff;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}@keyframes pageTurn{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}20%{background:#f45c43;border-color:#f45c43}40%{background:#fff;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}to{background:#fff;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}@-webkit-keyframes Dots{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}@keyframes Dots{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}
/*# sourceMappingURL=main.86c92cb7.css.map*/