@import"https://fonts.googleapis.com/css2?family=Montserrat&display=swap";*{margin:0;padding:0;box-sizing:border-box}body,button{font-family:Montserrat,sans-serif}#heading{text-align:center;margin:10px 0;color:#570303}.guess-box-container{display:flex;flex-direction:row;justify-content:center;gap:10px;margin-top:10px}.guess-box{display:flex;align-items:center;justify-content:center;height:50px;width:50px;border:rgb(105,32,32) 1px solid;border-radius:5px}.selected-box{background-color:#ebc1c180}.green{background-color:#7aff7a80}.orange{background-color:#ffc56280}.keyboard-button-colour{background:#ebc1c1}.grey{background-color:#c4c4c4d3}#keyboard-container{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}#keyboard-container .action-keys{width:80px}#keyboard-container .arrow-keys{width:65px}#keyboard-container button{font-size:17px;border:rgba(105,32,32,.373) 1px solid;color:#fff;text-shadow:2px 2px 1px rgba(0,0,0,.462);border-radius:5px;cursor:pointer;height:50px;width:50px}.keyboard_flex-row{display:flex;gap:7px}#popup-container{position:absolute;z-index:5;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center}#popup-box>h2{margin-bottom:40px}.button-container>button{padding:10px 16px;border-radius:10px;background-color:transparent;border:1px solid black;cursor:pointer;transition:all .5s}.button-container>button:hover{color:#fff;border:1px white solid}.button-container>button:first-of-type{margin-right:10px}#popup-box{background-color:#fadddd;width:40%;min-width:250px;height:280px;border-radius:1rem;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width: 720px){.guess-box,#keyboard-container button{height:40px;width:40px}}@media (max-width: 480px){.guess-box,#keyboard-container button{height:30px;width:30px;font-size:12px}}