:root{
  --bg-dialog-btn: #5c6bc0;
  --dialog-btn: white;
  --bg-dialog: white;
  --dialog: black;
  --canvas-border: #5C6BC0;
  --bgsolution-btn: #5C6BC0;
  --solution-btn: white;
  --bg-help: #cae3eb;  
  --help: black;
}
* {
  box-sizing: border-box;
}
html {
  font-family: Arial;
  font-size: 18px;
}
.game-container {
  margin: 0 auto;
  width: min(799px, 100%);
  padding: 20px;
}
.game-container h2 {
    text-align: center;
  }

/*
* Next styles are necesary for the game
*/
.wordsearch {
   position: relative;
   /*title of the game*/
  .title {
    display: flex;
    align-items: center;
  }
  /*Container of all the game board*/
  .wrapper {
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
 
  }
  .wrapper[data-status]{
    cursor: pointer;
  }
  .wrapper:after{
    content: attr(data-status);
    background-color: #cae3eb;
    background: url(cover.jpg) no-repeat;
    background-size: contain;
    position: absolute;
    background-color:#d3e7ee;
    top:0;
    left:0;
    width: 100%;
    height: 100%;      
  }
  
  /*Help button*/
  .btnhelp {
    display: flex;
    justify-content: center;
    align-items: end;
    margin-left: 1rem;
    font-size: 1.5rem;
    border-radius: 50%;
    width: 2rem;
    aspect-ratio: 1;
    border: 1px solid blue;
    transition: all 300ms ease;
    cursor: pointer;
    user-select: none
  }
  .btnhelp:hover {
    background: lighblue;
  }
  .btnhelp.active {
    background: blue;
    color: white;
    transform: rotate(180deg);
  }
  /*Start Button*/
  .btnstart {
    display: inline-block;
    margin: 0 0 4px 1rem;
    background-color: black;
    color: white;
    border-radius: 10px;
    padding: 0 1rem;
    cursor: pointer;
    user-select: none
  }
  
  /*Contain the grid of the game*/
  .board {
    flex: 1;
    padding-top: 20px;
    position: relative;
  }
  /*Dialog for messages*/
  .board dialog {
    background-color: var(--bg-dialog);
    color: var(--dialog);
    left: 50%;
    line-height: 150%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 600ms ease;
    opacity: 0;
    user-select: none
  }
  .board dialog button:focus-visible{
    outline: none
  }

  .board dialog button{
    background-color: var(--bg-dialog-btn);
    border-radius: 10px;
    border: none;
    color: var(--dialog-btn);
    cursor:pointer;
    font-size: 1.1rem;
    padding: 0.2rem 2rem 0.1rem 2rem;
  }
  /*The grid with letters*//
  .wsCanvas {
    border: 2px solid var(--canvas-border);
  }
  /*Show solution button*/
  .showsolution {
    font-family: sans-serif;
    font-size: 2rem;
    margin: 10px auto;
    width: fit-content;
    padding: 10px;
    background-color: var(--bgsolution-btn);
    color: var(--solution-btn);
    border-radius: 10px;
    box-shadow: 5px 5px 4px 1px #b9b6b6b0;
    cursor: pointer;
    transition: all 300ms ease;
    user-select: none;
  }
  .showsolution:hover {
    background-color: #5163c7;
    box-shadow: 0px 0px 5px 0px #b9b6b6b0;
  }
  /*List of words*/
  .wordlist {
    margin-left: 20px;
    align-self: flex-start;
    margin: 0 auto;
  }
  .wordlist h2 {
    margin-top: 0;
  }
  .wordlist ul {
    list-style: none;
    line-height: 200%;
    padding-left: 0;
  }
  .wordlist li.found {
    color: #0000005c;
    text-decoration: line-through;
  }
  /*Help panel*/
  .helptext {
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0%;
    left: 0;
    transition: opacity 300ms ease;
    z-index: -1;
    opacity: 0;
    border: 1px solid rgba(0, 0, 0, 0.67);
    padding: 1rem;
    background-color:var(--bg-help);
    color: var(--help);
    line-height:150%;
    text-align: left;
  }
  .helptext.active {
    z-index: 1;
    opacity: 1
  }
  
  @media (max-width: 575px) {
     .wrapper {
      flex-direction: column;
    }
    .helptext{
      width: 100%
    }
  }

}