*{margin:0;padding:0}
#board-container{min-height:350px;margin-top: -45px;}
.unselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
html,body{background-color:#0f172a;height:100%;perspective:500px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}
#container{display:flex;background-color:#0f172a;height:100%;align-items:center;flex-direction:column}
#game{width:100%;max-width:500px;height:100%;display:flex;flex-direction:column}
.Header{border-bottom:1px solid #fff}
.title{color:#dcdcdc;font-size:1.5rem;font-weight:700;margin:.4rem 0;text-align:center}
#board-container{display:flex;justify-content:center;align-items:center;flex-grow:1;overflow:hidden}
#board{display:grid;grid-template-columns:repeat(5,1fr);direction:rtl;grid-gap:5px;padding:10px;box-sizing:border-box}
#process{justify-content: center;align-items: center;width: 90%;margin: auto;display:grid;grid-template-columns:repeat(5,0fr);direction:rtl;grid-gap:5px;box-sizing:border-box;}
.square{border:2px solid #475569;border-radius:5px;min-width:40px;min-height:40px;font-size:25px;cursor:default;font-weight:700;color:#fff;text-transform:uppercase;display:flex;justify-content:center;align-items:center}
.guessed{border:2px solid #fff!important}
#keyboard-container{height:auto;margin-right: 5px;margin-left: 5px;}
.keyboard-row{display:flex;justify-content:center;width:100%;margin:0 auto 5px;touch-action:manipulation}
.keyboard-row button{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;width:38px!important;height:50px;font-size:large;font-weight:700;border:0;padding:0;cursor:pointer;background-color:#475569;color:#fff;color:#d7dadc;flex-grow:1;text-transform:uppercase;margin-right:6px;border-radius:4px;user-select:none;font-weight:bold;font-size:15px}
.animate__flipInX{border:2px solid #0f172a!important;transition:all .1s}
.keyboard-row button.wide-button{flex-grow:1.5}
.spacer-half{flex-grow:.5}
.del{background-color:#dc3545!important}
.enter{background-color:#007bff!important}
.overlay{z-index:1;position:fixed;top:0;bottom:0;left:0;right:0;background:#545b6b8f;transition:opacity 500ms;visibility:hidden;opacity:0}
.overlay:target{visibility:visible;opacity:1}
.popup{font-weight:100;margin:100px auto;padding:20px;background:#fff;border-radius:5px;width:35%;max-width: 350px;position:relative;transition:all 5s ease-in-out;color:#fff;background-color:#1f2937}
.popup h3{margin-top:0;color:#fff;text-align:center;font-family:Tahoma,Arial,sans-serif}
.popup .close{position:absolute;top:5px;right:30px;transition:all 200ms;font-size:30px;font-weight:700;text-decoration:none;color:#fff}
.popup .close:hover{color:#06D85F}
.popup .content{max-height:30%;overflow:auto;direction:rtl;margin-top:20px;text-align:center}
.bars{display: flex;align-items: center;justify-content: left;margin-top:3px;margin-right:10px;background-color:#3a3a3c;height:20px;text-align:left;border-radius: 10px 0px 0px 10px;padding-left:5px;padding-right:3px;padding-bottom:3px;font-weight:700}
.restart:hover{background-color:#22c55e!important;transition:1000ms}
.CC{background-color:#22c55e!important;border-color:#22c55e!important}
.C{background-color:#eab308!important;border-color:#eab308!important}
.W{background-color:#1e2632!important;border-color:#1e2632!important}
.EX{border: 1px solid white !important;width: 100%;max-width: 50px;max-height: 50px;min-width: 40px;min-height: 40px;}
@media screen and (max-width: 769px) {
.popup{width:80%;margin:30px auto}
}

.container {
  display: inline-block;
  cursor: pointer;
  width:10%;
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 4px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.sidemenu{
  visibility: hidden;
  position: absolute;
  left: 0;
  height: -webkit-fill-available;
  width: 0px;
  max-width: 400px;
  background-color: #141e37;
  border-right: 1px solid gray;
  /* border-bottom: 1px solid gray; */
  transition: 0.5s;
  overflow: hidden;
  padding-bottom: 25px;
  /* min-height: 250px; */
  /* max-height: 600px; */
  /* overflow-y: scroll; */
  z-index: 10;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

}

.ShowMenu{
  /* display: block !important; */
  width: 100%;
}

.box{
  border-bottom: 1px white solid;
  padding-bottom : 10px;
}

.input-container{
	position:relative;
	margin-top:25px;
}
.input-container label{
	position:absolute;
	top:0px;
	right:0px;
	font-size:20px;
	color:white;
    pointer-event:none;
	transition: all 0.5s ease-in-out;
}
.input-container input{
  border:0;
  border-bottom:1px solid #555;
  background:transparent;
  /* width:250px; */
  padding:8px 0 5px 0;
  width: 100%;
  margin-bottom: 10px;
  font-size:16px;
  color:white;
}
.input-container input:focus{
 border:none;
 outline:none;
 border-bottom:1px solid #e74c3c;
}
.input-container input:focus ~ label,
.input-container input:valid ~ label{
	top:-12px;
	font-size:12px;

}

.sbbtn {
  --c:  #229091; /* the color*/

  box-shadow: 0 0 0 .1em inset var(--c);
  --_g: linear-gradient(var(--c) 0 0) no-repeat;
  background:
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 0%,
    var(--_g) calc(var(--_p,0%) - 100%) 100%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, background-position 0s .4s;
}
.sbbtn:hover {
  --_p: 100%;
  transition: background-position .4s, background-size 0s;
}
.sbbtn:active {
  box-shadow: 0 0 9e9q inset #0009;
  background-color: var(--c);
  color: #fff;
}


.sbbtn {
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  cursor: pointer;
  padding: .1em .6em;
  font-weight: bold;
  border: none;
  color: white;
}