*{box-sizing:content-box;margin:0;padding:0;--lavanda: #caaacd;--dark-lavanda: #96699b;--dark-purple: #6c4a7d;--light-purple: #9b6bb3;--background: #fdf7ed;--box-shadow: 4px 4px 7px #00000075}body{background-color:var(--background);font-family:Caprasimo,serif;color:var(--background);letter-spacing:1px;overflow-x:hidden}#root{display:flex;flex-direction:column;gap:10px;width:100vw;height:100vh}nav{background-color:var(--light-purple);height:50px;width:100%;display:flex;justify-content:space-around;align-items:center;position:fixed}button{appearance:none;font-family:Caprasimo,serif;background-color:var(--dark-purple);padding:10px;border:1px solid transparent;border-radius:15px;color:var(--background);letter-spacing:1px;cursor:pointer;box-shadow:var(--box-shadow)}button:hover{background-color:#bb8fd4;box-shadow:4px 4px 7px #000000a8;border:1px solid var(--background)}button:focus,.card:focus{background-color:#8c67a1;box-shadow:4px 4px 7px #000000a8;border:1px solid var(--background);outline:none}main{margin-top:4%;display:flex;flex-wrap:wrap;row-gap:clamp(5px,1%,20px);column-gap:clamp(5px,1.5%,20px);width:100%;height:90%;align-items:center;justify-content:center}.card{background-color:var(--dark-purple);min-width:150px;max-width:400px;height:calc(100%/2.3);width:calc(100%/6);min-height:150px;max-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--box-shadow);font-size:.8rem;cursor:pointer;border:1px solid transparent}.card15{height:calc(100%/3.1);width:calc(100%/6.5)}.card20{width:12.5%;height:calc(100%/3.3)}.card:hover,.card:focus{border:1px solid var(--background)}.imgWrapper{height:70%;width:80%}img{width:100%;height:100%}.textWrapper{width:100%;height:40px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}dialog,dialog:focus{width:fit-content;height:250px;margin:auto;padding:0 10%;background-color:var(--light-purple);border-radius:18px;color:var(--background);border:none;outline:none}dialog::backdrop{content:"";position:fixed;inset:0;background:#261a2c73}dialog>div{width:100%;height:100%}.playAgain{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.difficulty{width:400px;display:flex;align-items:center;justify-content:space-evenly}.difficulty_card{height:40%;width:25%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.5rem;border-radius:0;position:relative;box-shadow:none;background-color:var(--dark-purple);padding:10px;cursor:pointer;border:1px solid transparent}.difficulty_card:after{content:"";position:absolute;bottom:-40px;left:50%;transform:translate(-50%);width:0;height:0;border-left:62px solid transparent;border-right:62px solid transparent;border-top:40px solid var(--dark-purple)}.difficulty_card:hover{background-color:#bb8fd4;box-shadow:4px 4px 7px #000000a8;border:1px solid var(--background)}.difficulty_card:hover:after{border-top:40px solid #bb8fd4}.difficulty_card:focus,.difficulty_card:focus:after{background-color:#8c67a1;box-shadow:4px 4px 7px #000000a8;border:1px solid var(--background);outline:none}.selected{background-color:#bb8fd4;border:1px solid var(--background)}.selected:after{border-top:40px solid #bb8fd4}