@import"https://fonts.googleapis.com/css2?family=Bangers&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--main-color: #1c4595;font-size:16px}body,button{font-family:Roboto}body{background-color:#041e42}img{grid-area:1 / 1 / 1 / 1;max-height:200px;height:90%}.card{height:35dvh;width:18%;display:grid;align-items:center;grid-template-rows:80% 20%;justify-items:center;margin-bottom:2%;border-radius:5px;transition:border-color .1s ease-in-out;background-color:#fff}.character-name{grid-area:2 / 1 / 2 / 1;display:flex;justify-content:center;align-items:center;background-color:orange;width:100%;height:100%;font-size:1.5rem;border-bottom-left-radius:5px;border-bottom-right-radius:5px;font-family:Bangers;transition:background-color .1s ease-in-out}.card:hover{cursor:pointer}.card:hover .character-name{background-color:red}@media (max-width: 900px){.card{width:40%;height:15dvh}.card:hover{cursor:auto}.card:hover .character-name{background-color:orange}}@media (min-width: 1900px){img{max-height:300px}}body{padding:0;margin:0}#cards{display:flex;flex-wrap:wrap;justify-content:space-evenly}#game-over{display:flex;flex-direction:column;align-items:center;justify-content:center}#game-over>h2{font-size:2rem;color:orange;margin-top:1%;margin-bottom:1%}#game-over>p{display:flex;align-items:center;justify-content:center;gap:.5%;width:50%;margin-top:1%;margin-bottom:1%;color:#fff}#game-over-character{color:orange;font-weight:600}.play-again{border:1px solid rgba(0,0,0,.5);padding-left:2.5%;padding-right:2.5%;height:6dvh;background-color:var(--main-color);color:#fff;font-weight:600;border-radius:5px}#header{display:grid;grid-template:1fr / 4fr 6fr 4fr;height:15dvh;background-color:var(--main-color);border-bottom:1px solid rgba(0,0,0,.15);margin-bottom:1.5%;padding-left:1%;padding-right:1%;justify-items:center;align-items:center}.title{grid-area:1 / 2 / 2 / 3;text-align:center;font-family:Bangers;font-size:3rem;margin-top:1%;margin-bottom:1%;color:#f5f5f5}#buttons{grid-area:1 / 1 / 2 / 2;display:flex;justify-content:space-evenly;align-items:center;width:100%;height:100%}.button-icon{fill:#000}#scores{grid-area:1 / 3 / 2 / 4;display:flex;justify-content:space-evenly;align-items:center;width:100%;height:100%}.header-item{border:none;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5%;margin:0;width:30%;background-color:#fff;height:40%;max-height:50px;max-width:150px;font-size:.875rem;border-radius:5px;transition:background-color .1s ease-in-out}#how-to-play-text{text-align:center;width:35dvw}.orange-hover:hover{background-color:orange;cursor:pointer}.red-hover:hover{background-color:red;cursor:pointer}.blue-hover:hover{background-color:var(--main-color);color:#fff;cursor:pointer}#difficulty{width:100%;height:30%;padding:2%;border-radius:5px;border:2px solid black;overflow:hidden}#difficulty-buttons{height:fit-content;max-height:40dvh;width:50dvw;display:flex;align-items:center}.difficulty-title{font-family:Bangers;font-weight:500;color:#000}.difficulty-list{list-style:none;display:flex;flex-direction:column;align-items:center;padding:0}.difficulty-listitem{font-size:1rem;color:#000000bf}.difficulty-item{grid-area:1 / 1 / 2 / 3;border:1px solid rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;flex-direction:column;width:85%;max-width:350px;height:25dvh;border-radius:100%;font-family:Roboto;font-size:1.38rem;font-weight:500;background-color:#fff;background-color:orange;border:none;transition:box-shadow .2s ease-in-out}.stars{display:flex;align-items:center;justify-content:space-evenly;list-style:none;padding:0}.star{fill:red;height:2dvh;width:2dvw}.start:before{transform:rotate(5deg)}.difficulty-item:hover{box-shadow:#4682b4 2px 2px 50px 3px;cursor:pointer}#selected-item{border-color:#00f;box-shadow:#00f 2px 2px 50px 5px}.grid-button{margin-left:auto;margin-right:auto;height:35%;width:80%;display:grid;grid-template-columns:9fr 1fr;justify-items:center;align-items:center}.difficulty-info{fill:var(--main-color)}.info-div{grid-area:1 / 2 / 2 / 2;width:100%;border:none;padding:0;background-color:transparent;transition:transform .15s ease-in-out}.info-div:hover{cursor:pointer;transform:scale(1.2)}.text-transition{animation:text-transition .5s ease-in-out}.timer-transition{animation:timer-transition .5s ease-in-out}@keyframes text-transition{0%{background-color:#fff}50%{background-color:orange}to{background-color:#fff}}@keyframes timer-transition{0%{background-color:#fff}50%{background-color:red}to{background-color:#fff}}@media (max-width: 850px){:root{font-size:12px}#buttons,#scores{flex-direction:row}.header-item{width:25%;height:5dvh}#header{display:flex;flex-direction:column;height:20dvh}#title{width:80%;font-size:2rem}#difficulty-buttons{height:fit-content;width:90dvw}.difficulty-item{height:20dvh;width:95%}.grid-button{width:100%}#game-over{gap:20px}#game-over>p{font-size:1.2rem;gap:3px}}dialog{border:1px solid rgba(0,0,0,.3);border-radius:5px;padding:1%;width:fit-content;height:fit-content;animation:fade-in .2s ease-in-out;background-color:#fafafae6}::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.dialog-content{width:fit-content;margin-left:auto;margin-right:auto;display:grid;grid-template-rows:1.2fr .6fr;align-items:center;justify-items:center}.close-modal{grid-area:2 / 1 / 2 / 1;align-items:center;border:0;border-radius:5px;padding-left:2.5%;padding-right:2.5%;height:4dvh;background-color:var(--main-color);color:#fff;font-weight:600;width:5dvw;font-size:.875rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width: 500px){dialog{padding:5%}.dialog-content{min-width:100%}.close-modal{width:fit-content;padding:0 2rem}}