*{margin:0;padding:0;color:#fff}body{display:flex;justify-content:center;align-items:center;background-color:#1c1b22}dialog.main-menu{display:flex;justify-content:center;align-items:flex-start;flex-direction:column;gap:10px}dialog.main-menu input{background-color:#33313f;border:2px solid white;padding:10px 20px;font-family:Montserrat,Open Sans,sans-serif;font-size:1.2em;border-radius:5px;color:#fff}dialog{border-radius:10px;box-shadow:0 0 10px #0003;padding:20px;background-color:#33313f;color:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000}dialog h2{font-family:Montserrat,Open Sans,sans-serif;font-size:2em;margin-bottom:10px}dialog p{font-family:Montserrat,Open Sans,sans-serif;font-size:1.5em;margin-bottom:20px}dialog button{background-color:#33313f;border:2px solid white;padding:10px 20px;font-family:Montserrat,Open Sans,sans-serif;font-size:1.2em;border-radius:5px;cursor:pointer}dialog button:hover{background-color:#5d5a72}dialog::backdrop{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);opacity:.5;background:#000000bf}.main{height:100vh;width:100vw;display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:20px;background-color:#1c1b22}.main nav{display:flex;justify-content:space-evenly;align-items:center;width:100vw}.main nav button{background-color:#33313f;border:none;padding:5px 10px;font-family:Montserrat,Open Sans,sans-serif;font-size:1.2em;border-radius:5px;cursor:pointer}.main nav button:hover{background-color:#5d5a72}.main nav .state{font-family:Montserrat,Open Sans,sans-serif;font-size:20px}.main .wordle-con-con{width:100vw;height:60vh;display:grid;place-items:center}.main .wordle-con{width:100vw;display:grid;place-items:center;height:60vh;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:20px}.main .wordle-con.single{grid-template-columns:1fr}.main .wordle-con .wordle{aspect-ratio:5/6;display:flex;justify-content:center;align-items:center;flex-direction:column;height:min(100%,50vw - 20px);gap:5px}.main .wordle-con .wordle .row{display:flex;justify-content:center;align-items:center;width:100%;height:16%;gap:5px}.main .wordle-con .wordle .row .col{font-family:Montserrat,Open Sans,sans-serif;aspect-ratio:1/1;background-color:#33313f;width:100%;border-radius:5px;font-size:clamp(20px,(100vw - 90px) / 30,30px);display:flex;justify-content:center;align-items:center}.main .keyboard{width:100%;height:40vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px}.main .keyboard .row{display:flex;justify-content:center;align-items:center;gap:clamp(7px,(100vw - 90px) / 30,10px);width:min(90vh,90vw)}.main .keyboard .row .key{font-family:Montserrat,Open Sans,sans-serif;font-size:min(20px,(100vw - 90px) / 30);border:none;background-color:#33313f;border-radius:5px;padding:calc((13.3333333333vh - 20px) / 9) clamp(5px,(70vw - 90px) / 30,20px)}@media screen and (max-width: 600px){.main .wordle-con-con{overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}.main .wordle-con-con .wordle-con{width:200vw;height:100%}.main .wordle-con-con .wordle-con.single{width:100vw}.main .wordle-con-con .wordle-con .wordle{height:min(50vh,90vw)!important}.main .keyboard{width:100vw}.main .keyboard .row{gap:5px}.main .keyboard .row .key{font-size:16px;padding:7px min(15px,(100vw - 45px - 160px) / 16)}}
