@import"https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext";.hangman-container{position:relative;width:200px;height:300px;margin-left:30px}@media (min-width: 640px){.hangman-container{margin:0 auto}}.fail{background-color:red}.bottom-bar{height:10px;width:100;background-color:#000}.middle-bar{height:300px;width:10px;background-color:#000;margin-left:calc(50% - 5px)}.top-bar{height:10px;width:100px;background-color:#000;margin-left:calc(50% - 5px)}.hangging-rope{position:absolute;height:50px;width:10px;background-color:#000;top:0;right:0}.head{position:absolute;height:50px;width:50px;background-color:#000;top:50px;right:-20px;border-radius:50%}.body{position:absolute;height:105px;width:10px;background-color:#000;top:95px;right:0}.right-arm{position:absolute;height:60px;width:10px;background-color:#000;top:100px;right:-20px;transform:rotate(60deg)}.left-arm{position:absolute;height:60px;width:10px;background-color:#000;top:100px;right:20px;transform:rotate(-60deg)}.right-leg{position:absolute;height:70px;width:10px;background-color:#000;top:187px;right:-20px;transform:rotate(-32deg)}.left-leg{position:absolute;height:70px;width:10px;background-color:#000;top:187px;right:20px;transform:rotate(32deg)}.word-container{display:flex;justify-content:center;align-items:center;margin-top:36px;margin-bottom:16px;font-size:1rem;font-weight:700;text-align:center;text-transform:uppercase;padding-top:36px;padding-bottom:8px}@media (min-width: 640px){.word-container{font-size:2rem}}@media (min-width: 768px){.word-container{font-size:3rem}}.letter{width:20px;margin:0 5px;border-bottom:4px solid #000;padding:0 4px}@media (min-width: 640px){.letter{width:36px}}@media (min-width: 768px){.letter{width:48px}}.keyboard-container{display:flex;flex-direction:column;align-items:center;gap:4px}.keyboard-row{display:flex;gap:4px}.key-button{width:28px;height:28px;border-radius:4px;border:none;background-color:#e4e4e7;cursor:pointer;z-index:1}@media (min-width: 640px){.key-button{width:36px;height:36px}}@media (min-width: 768px){.key-button{width:48px;height:48px}}.key{width:100%;height:100%;font-weight:700;font-size:.75rem;text-transform:uppercase}@media (min-width: 640px){.key{font-size:1rem}}@media (min-width: 768px){.key{font-size:1.25rem}}.key-button:hover:not(.disabled),.key-button:focus:not(.disabled){background-color:#d4d4d8}.active{background-color:#a3e635}.disabled{opacity:.5;cursor:not-allowed}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background-color:#fafafa}main{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.wrapper{width:100%;height:calc(100vh - 5rem);max-width:768px;display:flex;flex-direction:column;align-items:center;justify-content:center}.container{width:100%;max-width:768px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-items:center}.pop-up-container{width:100%;height:100vh;position:fixed;top:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2}.pop-up{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f0f8ff;max-width:320px;width:100%;padding:20px;display:flex;flex-direction:column;z-index:2;border:0;filter:drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08));border-radius:4px;transition:all .3s ease}.pop-up-content{display:flex;flex-direction:column;align-items:center;gap:20px}.pop-up-content h2{font-size:1.5rem;font-weight:700;color:#09090b}.pop-up-content p{font-size:1rem;color:#09090b}.pop-up-content button{padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background-color:#2563eb;color:#fff;font-size:.87rem;font-weight:700;border:none;border-radius:4px;cursor:pointer}.pop-up-content button:hover{background-color:#1d4ed8}.pop-up-content button:active{background-color:#3b82f6}.pop-up-content button:focus{outline:none}.pop-up-content>p>span{text-transform:uppercase;font-weight:700;color:#f59e0b}.close-button{position:absolute;top:10px;right:10px;background-color:transparent;border:none;cursor:pointer}.icon{width:24px;height:24px;color:#09090b}.icon:hover{color:#dc2626}.container>button{padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background-color:#fff;color:#2563eb;font-size:.87rem;font-weight:700;border:1px solid #2563eb;border-radius:4px;cursor:pointer;margin-top:24px;transition:all .2s ease}.container>button:hover{background-color:#2563eb;color:#fff}footer{width:100%;height:5rem;background-color:#f4f4f5;display:flex;align-items:center;justify-content:center;border-top:1px solid #d4d4d8;gap:8px}footer p{font-size:.87rem;color:#525252}footer a{color:#525252;font-weight:600;text-decoration:none}footer a:hover{text-decoration:underline;text-underline-offset:4px}