:root{--main-box-shadow: #030712 1px 10px 27px -9px, #fed7aa 1px 4px 10px -1px;--card-width: 160px;--card-height: 210px;--main-dark-color: #18181b}@font-face{font-family:BungeeSpice;src:url(/memory-card/assets/BungeeSpice-Regular-C1T0yWSy.ttf) format("truetype")}body{margin:0;width:100vw;height:100vh;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:BungeeSpice;background-color:var(--main-dark-color)}#game-container{position:relative;margin:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:stretch;align-items:center;z-index:1}#game-over-modal{position:absolute;margin:0;width:100vw;height:100vh;display:none;flex-direction:column;justify-content:space-evenly;align-items:center;font-family:BungeeSpice;background-color:var(--main-dark-color);z-index:2}#game-over-modal.active{display:flex}#game-over-modal>div{width:500px}#game-over-title{font-size:4rem;text-align:center}#game-over-btns{display:flex;justify-content:space-around}#game-over-btns>button{font-size:1.3rem;font-family:inherit;background-color:var(--main-dark-color);width:180px;height:55px;box-shadow:var(--main-box-shadow);border-radius:.8rem}#game-over-btns>button:hover{cursor:pointer}#title{padding-top:20px;padding-bottom:20px;width:100vw;height:100px;display:flex;justify-content:center;align-items:center;font-size:3.2rem;letter-spacing:.2rem;perspective:100px}#title>p{transform:rotateX(-15deg)}#score-board{width:100vw;height:150px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;font-size:.85rem;letter-spacing:.06rem;margin-bottom:30px}#game-progress{width:200px;display:flex;justify-content:space-between}.progress-color{accent-color:rgb(255,115,0)}#board{width:100vw;height:100vh;display:grid;justify-content:center;align-items:center;grid-template-rows:repeat(2,calc(var(--card-height) + 25px));grid-template-columns:repeat(5,calc(var(--card-width) + 50px))}.card{width:var(--card-width);height:var(--card-height);display:flex;justify-content:center;align-items:center;background-color:transparent}.card-inner{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#18181b;transition:transform .6s;transform-style:preserve-3d}.card-inner:hover{cursor:pointer}.card-flip{transform:rotateY(180deg)}.card-front,.card-back{width:100%;height:100%;border-radius:.5rem;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card-back:hover{cursor:none}.card-back{content:url(/memory-card/assets/card-design-C9DL04HC.jpg);transform:rotateY(180deg)}