@import"https://fonts.googleapis.com/css2?family=Play&display=swap";*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;font-family:sans-serif}body{height:100vh;width:100%;background-image:radial-gradient(#bc19b5,#fd7d35);color:#fff;overflow:hidden}.title{text-align:center;font-size:2.5em;font-family:Play,sans-serif;font-weight:600;margin-top:10px}.main_wrapper{height:550px;width:380px;background-color:#361b57;margin:40px auto 0;padding:10px;border:12px solid #570cb3;border-radius:10px;box-shadow:5px 5px 5px 5px #361b57;display:grid;justify-content:center}.main_wrapper .score_time_wrapper{display:grid;grid-template-columns:auto auto auto;padding:10px;font-size:1.5em}.main_wrapper .score_time_wrapper .time_wrapper{text-align:end}.main_wrapper .score_time_wrapper .controls{justify-self:center}.main_wrapper .score_time_wrapper .controls .pause,.main_wrapper .score_time_wrapper .controls .play{margin:0 10px;cursor:pointer}.main_wrapper .score_time_wrapper .controls .play{font-size:.9em}.main_wrapper .score_time_wrapper .controls .pause:hover,.main_wrapper .score_time_wrapper .controls .play:hover{color:#f54ee4}.start_play{background-color:rgba(0,0,0,.8);position:fixed;top:0;left:0;height:100%;width:100%}.start_play .fa-start-wrapper{height:200px;width:250px;margin:150px auto;text-align:center}.start_play .fa-start-wrapper .play_p{font-size:3em;margin-bottom:15px;font-family:Play,sans-serif}.start_play .fa-start-wrapper .fa-start{font-size:6em;margin:0 auto}.start_play .fa-start-wrapper .fa-start:hover{color:green}.display_wrapper{height:150px;width:320px;margin:20px auto 10px;background-image:linear-gradient(#222,#222),linear-gradient(90deg,#22e3e0,#26b5fc);background-origin:padding-box,border-box;background-repeat:no-repeat;border:5px solid transparent;display:grid;align-items:center;color:#fff}.display_wrapper .fa-check{color:#90ee90;font-size:2em;margin:0 auto}.display_wrapper .invalid{display:grid;justify-content:center;align-self:flex-start;margin-top:8px;opacity:0}.display_wrapper .display{text-align:center;font-size:2.5em;letter-spacing:1.8px}.validity_display{animation:fadeInOut 3s ease}@keyframes fadeInOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}.letter_wrapper{display:flex;justify-content:space-around;align-items:center;gap:2px;height:100px;width:340px;margin:40px auto}.letter_wrapper .letter_container{height:60px;width:50px;border:1px solid green;border-radius:2px;background-color:#95c623;display:flex;align-items:center;justify-content:center}.letter_wrapper .letter{font-size:2em;padding:10px;cursor:pointer;color:#000;margin:0 20px}.letter_wrapper .letter_container:hover{background-color:rgba(149,198,35,.7)}.no_display{display:none}.button_wrapper{display:flex;justify-content:flex-end}.button_wrapper button{color:#fff;text-transform:uppercase;padding:10px;font-size:1.2em;border-radius:5px;margin:20px 10px;box-shadow:0 7px 7px rgba(0,0,0,.1);border:1px solid #f207db;cursor:pointer;background-color:#d327f5}.button_wrapper button:hover{background-color:#a557b5}.help_wrapper{color:#000;width:100%;background-color:blue}.help_wrapper .fa-q{font-size:2em;position:absolute;top:10px;right:10px;cursor:pointer}.help_wrapper .fa-q:hover,.help_wrapper .fa-thumb:hover{color:rgba(0,0,0,.6)}.help_wrapper .help_modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7)}.help_wrapper .help_modal .modal_content{background-color:#fefefe;margin:25% auto;padding:30px;border:1px solid #888;width:50%;position:relative}.help_wrapper .help_modal .modal_content .fa-thumb{position:absolute;right:5px;top:5px;font-size:1.2em}.fa-arrow{color:#fff;font-size:2em;cursor:pointer}.fa-arrow:hover{color:gray}.game_over_modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7)}.game_over_modal .game_over_content{background-color:#fefefe;margin:25% auto;padding:30px;border:1px solid #888;width:50%;position:relative}.game_over_modal .game_over_content .game_over_p{font-family:Play,sans-serif}@media(min-width:1300px){.main_wrapper{width:500px;height:650px}.display_wrapper{height:200px;width:375px}.letter_wrapper{height:125px;width:370px}.letter_wrapper .letter_container{height:70px;width:60px}}