body,html{margin:0;height:100%;min-height:100%;background-color:gray}body{display:flex;flex-direction:column}header{flex:none;background-color:#fff;padding:2px;justify-content:space-between}.brand,header{display:flex;flex-wrap:wrap;align-items:center}.logo{position:relative;width:32px;height:32px}.name{font-size:15px;padding-left:4px}.options{display:flex;flex-wrap:wrap;align-items:center;gap:5px 5px;padding-right:5px}.difficulty,.newGame,.records{padding:2px 4px;border-radius:5px}.newGame:hover,.records:hover{background-color:#ede9e9}.easyDifficulty:hover{background-color:green}.mediumDifficulty:hover{background-color:#ff0}.hardDifficulty:hover{background-color:red}.difficulty:hover,.newGame:hover,.records:hover{cursor:pointer}main{flex:auto;display:flex;justify-content:center;align-items:center}.gameBoard{display:grid;width:85vmin;height:85vh;grid-gap:10px;gap:10px;padding:10px}.easyBoard{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}.mediumBoard{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}.hardBoard{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}.gameCard{background-color:#fff;border-radius:5px;overflow:hidden;position:relative}.cardImage{width:100%;display:block}.gameCard .front{transform:rotateY(90deg);transition:all .2s ease-in;position:absolute}.flipped .front{transform:rotateY(0deg);transition-delay:.2s}.gameCard .back{transition:all .2s ease-in;transition-delay:.2s}.flipped .back{transform:rotateY(90deg);transition-delay:0s}footer{flex:none;display:flex;justify-content:center;align-items:center}footer a{margin:4px}