* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
}
body {
  font-weight:400;
  font-optical-sizing:auto;
  font-style:normal;
  color:#D7D7D7;
  background:#2a2a2a;
  font-family:"Quicksand",serif;
  overflow:auto;
}
.navbar {
  position:fixed;
  display:flex;
  justify-content:center;
  width:100%;
  z-index:999;
  transition:all 0.3s ease;
  top:0;
  height:75px;
  background-image:-webkit-gradient(linear,left top,left bottom,from(#000),color-stop(59%,rgba(0,0,0,0.8)),to(transparent));
  background-image:linear-gradient(180deg,#000,rgba(0,0,0,0.9) 80%,transparent);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#FCD43E",endColorstr="#336C9C",GradientType=1 );
}
.navbar .max-width {
  width:90%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.navbar .logo a {
  color:#fff;
  margin-top:3px;
  font-size:30px;
  font-weight:600;
}
.navbar .logo img {
  margin-bottom:5px;
  height:60px;
}
.navbar .logo {
  display:flex;
  align-items:center;
  margin:0 0 0 5px;
}
.menu {
  margin-right:15px;
}
.navbar .menu li {
  list-style:none;
  display:inline-block;
}
.navbar .menu li a {
  display:block;
  color:#fff;
  font-size:18px;
  font-weight:600;
  margin-left:20px;
  transition:color 0.3s ease;
}
.navbar .menu li a:hover {
  color:hsla(47,97%,62%,1);
  text-decoration:none;
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#FCEA74",endColorstr="#FCD43E",GradientType=1 );
}
.navbar.sticky .menu li a:hover {
  color:#fff;
}
.menu-btn {
  color:#fff;
  font-size:23px;
  cursor:pointer;
  display:none;
}
.inaclogo {
  display:none;
}
@media (max-width:947px) {
  .navbar .max-width {
  width:90%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.aclogo a {
  color:white;
  font-size:30px;
  font-weight:600;
}
.aclogo img {
  margin-top:0;
  width:50px;
}
.aclogo {
  border-bottom:1px solid white;
  position:absolute;
  padding-bottom:5px;
  width:100%;
  top:1%;
  display:flex;
  justify-content:center;
  align-items:end;
  color:white;
  font-size:35px;
  font-weight:500;
}
#menu-btn {
  position:absolute;
  left:5%;
  display:flex;
  align-items:center;
  z-index:999;
}
.menu-btn {
  display:block;
  z-index:999;
}
.menu-btn i.active:before {
  content:"\f00d";
}
.navbar .menu .menu-name {
  font-weight:600;
}
.navbar .menu {
  position:fixed;
  height:100vh;
  width:100%;
  left:-100%;
  top:0;
  background:#111;
  text-align:center;
  padding-top:80px;
  transition:all 0.3s ease;
}
.navbar .menu.active {
  left:0;
}
.navbar .menu li {
  display:block;
}
.navbar .menu li a {
  display:inline-block;
  margin:20px 0;
  font-size:25px;
}
}@media (max-width:690px) {
  .navbar .logo a,.aclogo a {
  font-size:30px;
}
.navbar .logo {
  }.max-width {
  padding:0 23px;
}
}.head {
  /* background-image:url('../img/chess-bg.jpg');
  */
      background-color:#171717;
  background-size:cover;
  font-family:"Quicksand",serif;
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
  width:100vw;
  margin-bottom:1em;
  padding:6rem 0 3rem 0;
}
.head h1 {
  margin-bottom:15px;
  font-weight:1000;
  text-align:center;
  font-size:clamp(25px,5vw,32px);
  color:#ffffff;
}
.head span {
  font-weight:500;
  margin-bottom:1em;
  font-size:clamp(18px,4vw,25px);
  text-align:center;
}
.head .about {
  width:80%;
  display:flex;
  text-align:center;
  font-weight:bold;
  font-size:22px;
  line-height:1.7;
}
/* main container */
    .chess {
  display:flex;
  flex-direction:row;
  justify-content:center;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:1rem;
  flex-wrap:wrap;
  color:#D7D7D7;
  background:#2a2a2a;
  border-radius:15px;
  transition:all 0.3s ease;
}
/* Wrapper for board and controls */
    .board-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:100%;
  min-width:500px;
  margin:0 auto;
}
/* upward section */
    .up {
  display:flex;
  width:100%;
  max-width:500px;
  align-items:center;
  margin-bottom:0.5rem;
  justify-content:space-between;
}
.up-btn {
  display:flex;
  flex-direction:row;
  width:100%;
  justify-content:space-between;
}
/* upward buttons */
    .copyMoves {
  display:flex;
  flex-flow:column;
  justify-content:center;
  height:2rem;
  width:48%;
  background-color:#98D5FF;
  border:1px solid transparent;
  border-radius:3px;
  box-shadow:rgba(255,255,255,.4) 0 1px 0 0 inset;
  color:black;
  cursor:pointer;
  font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.15385;
  text-align:center;
  white-space:nowrap;
}
.copytext {
  margin:0;
  display:inline-block;
}
#copyicon {
  font-size:17px;
}
.copyMoves:disabled,.generate:disabled,#undoBtn:disabled,#redoBtn:disabled {
  background:gray;
  color:black;
}
.copied {
  display:none;
  font-size:15px;
}
.reset {
  color:white;
  background:red;
  border-radius:5px;
  width:48%;
  height:2rem;
  appearance:none;
  border:1px solid rgba(27,31,35,.15);
  box-shadow:rgba(27,31,35,.1) 0 1px 0;
  cursor:pointer;
  font-size:12px;
  font-weight:450;
  line-height:20px;
  text-align:center;
  user-select:none;
}
/* chessboard */
    .board-cont {
  display:flex;
  margin:0 auto;
  padding:0;
  width:100%;
  max-width:800px;
  aspect-ratio:1/1;
}
#myBoard {
  width:100%;
  height:100%;
  overflow:hidden;
}
.highlight-white {
  box-shadow:inset 0 0 3px 3px yellow;
}
.highlight-black {
  box-shadow:inset 0 0 3px 3px blue;
}
.highlight-hint {
  box-shadow:inset 0 0 3px 3px red;
}
/* suggestion and generate div */
    
    .bottom-btn {
  margin:1rem 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  max-width:500px;
}
.action {
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-bottom:0.5rem;
}
.action-btn {
  color:white;
  border-radius:5px;
  width:48%;
  height:2rem;
  appearance:none;
  border:1px solid rgba(27,31,35,.15);
  box-shadow:rgba(27,31,35,.1) 0 1px 0;
  cursor:pointer;
  font-size:12px;
  font-weight:450;
  line-height:20px;
  text-align:center;
  user-select:none;
}
#undoIcon,#redoIcon {
  margin-right:5px;
}
#undoBtn {
  background:red;
}
#redoBtn {
  background:green;
}
#showHint {
  margin-right:0.5em;
}
.suggest {
  color:#D7D7D7;
  display:flex;
  align-items:center;
  font-size:16px;
  width:70%;
}
.suggest-crypt {
  display:flex;
  flex-wrap:nowrap;
  flex-direction:row;
}
.gen-div {
  display:flex;
  justify-content:flex-end;
  width:60%;
}
/* downward buttons */
    .generate {
  background-color:#2ea44f;
  color:white;
  border-radius:5px;
  max-width:100%;
  min-width:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:2rem;
  appearance:none;
  border:1px solid rgba(27,31,35,.15);
  box-shadow:rgba(27,31,35,.1) 0 1px 0;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  line-height:20px;
  text-align:center;
  user-select:none;
}
.generate:focus {
  box-shadow:rgba(46,164,79,.4) 0 0 0 3px;
  outline:none;
}
#lock {
  font-size:15px;
  margin-right:5px;
}
.output {
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  max-width:500px;
  margin:0 auto;
}
/* hashed password text */
    .pass {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  padding:0;
  margin:0 0 2rem 0;
  font-weight:bold;
  color:#cdcdcd;
  width:100%;
}
#showInput {
  font-size:17px;
  margin:0 10px 0 0;
}
.copy-text {
  padding:10px;
  border-radius:15px;
  background:rgb(35 35 35);
  border:1px solid rgb(35 35 35);
  display:flex;
  justify-content:space-between;
  width:100%;
  max-width:500px;
}
.showcopy {
  display:flex;
  align-items:center;
}
.copy-text input.password {
  padding:10px;
  width:70%;
  background:rgb(35 35 35);
  font-size:clamp(14px,4vw,18px);
  color:#D7D7D7;
  border:none;
  outline:none;
}
.copy-text button {
  padding:10px;
  background:#5784f5;
  color:#fff;
  font-size:15px;
  border:none;
  outline:none;
  border-radius:10px;
  cursor:pointer;
}
#copiedpassicon {
  display:none;
  font-size:15px;
}
.advstatus {
  text-align:center;
  display:flex;
  flex-direction:column;
}
.advantage {
  margin:0 0 20px 0;
}
.advantage h2 {
  font-size:clamp(24px,5vw,35px);
  font-weight:500;
}
.advantage p {
  font-size:clamp(16px,4vw,20px);
  font-weight:400;
}
.status h2 {
  font-size:clamp(24px,5vw,35px);
  font-weight:500;
}
.status p {
  font-size:clamp(16px,4vw,20px);
  font-weight:400;
}
.progress {
  margin:20px 0 0 0;
  background-color:rgba(17,17,17);
  border-radius:7px;
}
.progress>.progress-bar {
  background-color:#5784f5;
  width:50%;
  /* Adjust with JavaScript */
      height:20px;
  border-radius:7px;
}
.getstore {
  display:flex;
  margin:3em 0 0 0;
  width:100%;
  align-items:center;
  justify-content:center;
}
.getstore img {
  color:white;
}
/* Strength Section Container */
.strength-section {
  background-color:rgba(20,20,20);
  padding:60px 20px;
  width:100vw;
  margin:0 auto;
  margin-top:30px;
  text-align:center;
}
/* Section Title */
.section-title {
  font-size:2rem;
  margin-bottom:40px;
  color:#ffffff;
}
/* Cards Container */
.strength-cards {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}
/* Individual Card */
.strength-card {
  background:#1c1c1c;
  width:280px;
  border-radius:8px;
  padding:20px;
  text-align:center;
  transition:transform 0.3s ease;
  border:1px solid #333;
}
.strength-card:hover {
  transform:translateY(-5px);
}
/* Icon */
#strength-icon{
  font-size: 50px;
  margin-bottom: 20px;
}
/* Title */
.strength-card-title {
  font-size: 1.2rem;
  margin-bottom:16px;
}
/* Description */
.strength-card-desc {
  font-size:0.95rem;
  line-height:1.5;
}
/* FAQ Section Container */
.faq-section {
  max-width:900px;
  margin:0 auto;
  padding:40px 20px;
}
.faq-title {
  text-align:center;
  font-size:2rem;
  margin-bottom:10px;
}
.faq-subtitle {
  text-align:center;
  margin-bottom:40px;
}
/* FAQ Container */
.faq-container {
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* Individual FAQ Item */
.faq-item {
  background:#1c1c1c;
  border-radius:8px;
  border:1px solid #1c1c1c;
  overflow:hidden;
  transition:background 0.3s ease;
}
/* FAQ Question */
.faq-question {
  background:#1c1c1c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  padding:18px;
  border-bottom:1px solid #4A4A4A;
}
.faq-question h3 {
  font-size:1.1rem;
  flex:1;
}
.faq-icon {
  font-size:1.9rem;
  color:#999;
  transition:transform 0.3s ease;
}
.faq-answer {
  max-height:0;
  overflow:hidden;
  padding:0 16px;
  transition:max-height 0.4s ease,padding 0.4s ease;
  background:#1c1c1c;
}
/* Expanded FAQ State */
.faq-item.active .faq-answer {
  max-height:300px;
  /* Adjust according to content size */  
  padding:16px;
  line-height:1.5;
}
.faq-item.active .faq-icon {
  transform:rotate(45deg);
}
/*Footer*/
footer {
  background-color:#1D1D1D;
  color:#ffffff;
  font-size:16px;
}
footer * {
  font-family:"Poppins",sans-serif;
  box-sizing:border-box;
  border:none;
  outline:none;
}
.row {
  padding:2em 1em;
}
.row.primary {
  display:grid;
  grid-template-columns:2fr 1fr 2fr;
  align-items:stretch;
}
.column {
  width:100%;
  display:flex;
  flex-direction:column;
  padding:0 2em;
  max-height:17em;
  line-height:1.3;
}
.followhead,.quickhead,.namehead {
  width:100%;
  margin-bottom:1rem;
  text-align:left;
  color:#2a8ded;
  font-size:1.6em;
  white-space:nowrap;
}
footer ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  padding:0;
  margin:0;
  line-height:1.4;
  font-size:17px;
}
footer li:not(:first-child) {
  margin-top:0.8em;
}
footer ul li a {
  color:#ffffff;
  text-decoration:none;
}
footer ul li a:hover {
  color:#2a8ded;
}
footer .a p {
  text-align:justify;
  margin:0;
}
.social a {
  text-decoration:none;
  color:white;
}
.social {
  color:white;
  display:flex;
  justify-content:flex-start;
  font-size:2.4em;
  flex-direction:row;
}
.social i {
  padding:1rem;
}
.social i:hover {
  color:#2a8ded;
}
.copyright {
  flex-wrap:wrap;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1em 3em;
  background-color:#2A2A2A;
}
#made {
  color:white;
  text-decoration:none;
}
.copyright p {
  font-size:0.9em;
  text-align:center;
}
@media screen and (max-width:850px) {
  .row.primary {
  grid-template-columns:1fr;
}
.row.secondary {
  flex-direction:column;
}
.head .about {
  width:80%;
  line-height:1.4;
}
}/* Media Queries */
    @media (max-width:991px) {
  .board-wrapper {
  min-width:500px;
}
.chess {
  flex-direction:column;
  align-items:center;
}
.output {
  max-width:500px;
  margin-top:1rem;
}
.faq-title {
  font-size:1.8rem;
}
.faq-answer p {
  font-size:0.92rem;
}
.subscribe {
  min-height:5em;
}
.column {
  margin:0.5em 0 1em 0;
}
}@media (max-width:600px) {
  .head {
  padding:5rem 0 2rem 0;
  font-size:5px;
}
.head .about {
  width:90%;
  display:flex;
  text-align:center;
  font-weight:bold;
  font-size:17.7px;
  line-height:1.4;
}
.board-wrapper {
  min-width:400px;
}
.chess {
  padding:0.5rem;
}
.output {
  max-width:400px;
}
.faq-section {
  padding:30px 15px;
}
.faq-title {
  font-size:1.6rem;
}
.faq-item {
  margin:0 auto;
  width:100%;
}
.faq-question h3 {
  font-size:1rem;
}
footer .social {
  display:flex;
  flex-wrap:wrap;
  font-size:1.8em;
}
.column {
  padding:0;
  min-height:10em;
}
.subscribe {
  min-height:5em;
}
.social i {
  padding:0.5rem;
}
footer .about p {
  word-wrap:wrap;
  display:flex;
  flex-wrap:wrap;
}
.getstore {
  display:flex;
  margin:2em 0 1em 0;
  width:100%;
  align-items:center;
  justify-content:center;
}
}@media (max-width:450px) {
  .head {
  padding:5rem 0 2rem 0;
}
.head .about {
  width:90%;
  display:flex;
  text-align:center;
  font-weight:bold;
  font-size:15px;
  line-height:1.4;
}
.board-wrapper {
  min-width:300px;
}
.progress>.progress-bar {
  height:15px;
}
.output {
  max-width:300px;
}
.getstore img {
  width:250px;
}
.strength-card {
  padding:5px;
  width:300px;
}
.faq-title {
  font-size:1.4rem;
}
.faq-item {
  width:100%;
}
.faq-question h3 {
  font-size:0.95rem;
}
}@media (max-width:350px) {
  .head {
  padding:5rem 0 2rem 0;
}
.head .about {
  width:95%;
  font-size:13.7px;
  line-height:1.28;
}
}