*{font-family:Verdana,Geneva,Tahoma,sans-serif;overflow-x:hidden;padding:0;margin:0}body{width:100vw;height:100vh;background-color:#3a3a3a}.header-main{display:flex;flex-direction:column;align-items:center}.header-main h1{display:flex;flex-direction:column;color:#fff;text-align:center;font-size:40px}.header-main-separator{height:1px;width:100%;margin:8px 0;background-color:#fff}.header-main button{display:block;margin:15px auto;padding:15px;border:none;border-radius:15px;cursor:pointer}.header-main button:hover{box-shadow:0 12px 16px #0000003d,0 17px 50px #00000030}.header-main-moves{font-weight:700;font-size:18px;color:#fff;padding:8px 0;overflow:hidden}.header-main-moves-number{color:#000;background-color:#fff;border-radius:45%;margin-left:10px;font-size:22px;padding:2px 10px}.main{display:flex;justify-content:center;overflow:hidden}.card-grid{width:70vw;display:grid;grid-template-columns:auto auto auto;margin:10px 0}.card-grid-item{width:15vw;height:18vh;margin:10px 20px;border-top-left-radius:10px;border-bottom-right-radius:10px;border:2px solid transparent;background-color:#c4c4c4;justify-self:center;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;cursor:pointer}.card-grid-item-img{width:75%;height:100px;object-fit:contain}.card-grid-item-flipped{border:2px solid green;cursor:unset}.card-grid-item:hover{border:2px solid red}.card-grid-item-back{transition:transform .6s}.card-grid-item:hover .card-grid-item-back{transform:rotate(180deg)}.card-grid-item .card-grid-item-front{transform:rotate(90deg);position:absolute}.card-flipped .card-grid-item-front{transform:rotateY(0)}.card-grid-item-key{font-size:20px;margin-top:2px}.record-section{width:50vw;background-color:#fff;text-align:center;margin-top:20px;padding-top:10px;padding-bottom:40px;border-radius:5px;display:flex;flex-direction:column;align-items:center}.record-section-title{font-weight:700;font-size:28px;color:#014296}.record-section-sub{font-weight:700;color:#000000cb;margin:6px 0}.record-section-summary{font-weight:700;color:#014296}.record-section-summary-count{font-size:35px;margin-left:20px;padding-right:5px}.record-board{margin-top:20px;width:70%}.record-board li:nth-child(even){background-color:#f0f0f0}.record-board li:nth-child(odd){background-color:#c4c4c4}.record-board-item{width:100%;display:flex;justify-content:space-around;align-items:center;padding:10px 0}.record-board-item:hover{background-color:#c4c4c4!important}.record-board-item-player{font-size:17px;text-align:left!important}.record-board-item-score{background-color:#000;color:#fff;font-weight:bolder;border-radius:50px;padding:5px 10px;text-align:left!important}.form{display:flex;flex-direction:column;padding-top:20px}.form label{display:block;font-size:20px;font-weight:700;color:#333232;margin-bottom:10px}.form input{height:35px;min-width:300px;max-width:300px;font-size:20px;padding:0 15px}.form button{cursor:pointer;height:40px;color:#fff;font-weight:bolder;font-size:20px;background-color:#a5a5a5;border:none;border-radius:20px;margin-top:15px}.form button:active{border:2px solid #014296}.footer{display:flex;justify-content:center;font-weight:600}.loader-container{margin-top:8vh;display:flex;flex-direction:column;align-items:center;color:#fff}.loader-container *{overflow:hidden}.lds-ring{display:inline-block;position:relative;width:80px;height:80px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:64px;height:64px;margin:8px;border:8px solid #fff;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#fff transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-.45s}.lds-ring div:nth-child(2){animation-delay:-.3s}.lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes inAnimation{0%{transform:scale(.1);opacity:0}60%{transform:scale(1.2);opacity:1}to{transform:scale(1)}}@keyframes outAnimation{20%{transform:scale(1.2)}to{transform:scale(0);opacity:0}}@media screen and (max-width: 1190px){.record-section{width:90vw}.card-grid{width:100vh}.card-grid-item{width:85%}}
