.scoreboard {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 20px
  }

  .scoreboard>div {
      align-self: center;
      line-height: 1.5;
      margin: 8px 20px
  }

  #stars {
      margin-top: -10px;
      color: #63bcca;
      user-select: none;
      letter-spacing: 3px;
      text-indent: 3px
  }

  .pangrama #stars {
      color: #fc0
  }

  span.pangrama {
      font-weight: bolder;
      color: #ec4a49
  }

  #definition,
  .sol-def {
      font-size: 10pt;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      margin-top: 0;
      margin-bottom: 10px
  }

  #definition a,
  .sol-def a {
      cursor: initial;
      text-decoration: none
  }

  .title {
      font-weight: 700
  }

  sup {
      top: -.5em
  }

  sub,
  sup {
      position: relative;
      font-size: 75%;
      line-height: 0;
      vertical-align: baseline
  }

  .versaleta {
      font-variant: small-caps;
      text-align: justify
  }

  #definition h3,
  .sol-def h3 {
      font-weight: 400;
      font-size: 14px;
      color: #e3282a
  }

  .tagline {
      font-style: italic;
      text-align: right
  }

  .italic {
      font-style: italic
  }

  .bold {
      font-style: italic;
      font-weight: 700
  }

  .bolditalic {
      font-style: italic;
      font-weight: 700
  }

  div.copyright {
      margin-top: 10px
  }

  .scoreboard div.copyright {
      margin-bottom: 20px
  }

  #hex-grid {
      display: grid;
      grid-gap: 6px;
      grid-template-columns: repeat(6, 2fr);
      padding-bottom: 30px;
      width: 250px;
      margin: 0 auto;
      font-size: .9em;
      list-style-type: none;
      overflow: hidden
  }

  .container-hexgrid {
      display: flex;
      flex-direction: column;
      align-items: center
  }

  .hex {
      grid-column-end: span 2;
      position: relative;
      user-select: none;
      pointer-events: none
  }

  .hex::after {
      content: '';
      display: block;
      padding-bottom: 86.602%
  }

  .hex p {
      text-transform: uppercase;
      width: 100%;
      padding: 38%;
      box-sizing: border-box;
      font-size: 1.4em;
      color: #000
  }

  .hex #center-letter p {
      color: #fff
  }

  .hex-in {
      position: absolute;
      width: 100%;
      padding-bottom: 115.47%;
      overflow: hidden;
      transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
      pointer-events: none
  }

  .hex-in * {
      position: absolute
  }

  #center-letter {
      background-color: #813a3a
  }

  .hex-link {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      background-color: #ffcc05;
      overflow: hidden;
      transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
      outline: 0;
      pointer-events: auto;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent
  }

  .no-pointer {
      cursor: inherit
  }

  .hex-link:not(.no-pointer):focus p,
  .hex-link:not(.no-pointer):hover p {
      box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, .1)
  }

  .hex:nth-child(5n+1) {
      grid-column-start: 2
  }

  .hex:nth-child(5n+3) {
      grid-column-start: 1
  }

  #test-word {
      text-align: center
  }

  #cursor {
      font-weight: 100;
      color: #63bcca;
      margin-top: -5px
  }

  .cursor-container {
      font-size: 2rem;
      position: relative;
      margin: 30px auto;
      margin-top: 10px
  }

  h1 {
      position: relative;
      text-align: center;
      margin-top: 30px
  }

  #level {
      user-select: none
  }

  #input-word {
      display: flex;
      height: 30px
  }

  .button-container {
      display: inline-flex;
      margin: 30px auto;
      width: 300px
  }

  button {
      overflow: visible;
      text-transform: none;
      background-color: #fff;
      border: 2px solid #e7e7e7;
      margin: 0 auto;
      color: #000;
      padding: 0 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: .8em;
      border-radius: 30px;
      cursor: pointer;
      outline: 0;
      padding: 12px;
      user-select: none;
      touch-action: none
  }

  button.icon {
      padding: 10px 12px;
      padding-top: 12px
  }

  button:focus,
  button:hover {
      background-color: #e7e7e7;
      color: #000;
      border: 2px solid #e7e7e7
  }

  .logo-gameswordle {
      float: left
  }

  .logo-gameswordle img {
      display: inline-block;
      margin-top: -9px;
      margin-left: 20px;
      border: 2px solid #e7e7e7;
      border-radius: 30px
  }

  .logo {
      max-width: 50%;
      margin-left: -63px
  }

  .container-notifications {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: 8px
  }

  #message {
      position: absolute;
      background-color: #ec4a49;
      color: #fff;
      border-radius: 3px;
      padding: 5px;
      z-index: 100;
      pointer-events: none
  }

  .message-ok {
      background-color: #63bcca !important
  }

  .hide {
      opacity: 0;
      transition: opacity 1.5s
  }

  .hide-initial {
      opacity: 0
  }

  .message-shake {
      animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px
  }

  @keyframes shake {

      25%,
      75% {
          transform: translate3d(1px, 0, 0)
      }

      50% {
          transform: translate3d(0, 0, 0)
      }
  }

  .nav-container {
      position: absolute;
      top: 20px;
      right: 20px
  }

  h2 {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 10px;
      clear: both
  }

  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 200;
      background-color: rgba(255, 255, 255, .96);
      overflow-y: auto;
      overflow-x: hidden
  }

  .modal .container {
      max-width: 800px;
      margin: 20px auto;
      margin-top: 10px
  }

  .modal-content {
      margin: 40px;
      margin-top: 20px
  }

  .close-button-container {
      text-align: center
  }

  .close-icon-container {
      float: right
  }

  img.ok-icon {
      width: 10px;
      height: auto;
      margin-left: -14px;
      margin-right: 4px
  }

  img.close-icon {
      width: 28px;
      height: auto;
      margin-right: 20px;
      margin-top: 20px
  }

  .logo-vilaweb img,
  img.close-icon,
  img.ok-icon {
      user-select: none
  }

  #solution-list {
      list-style-type: none;
      column-count: 2;
      column-gap: 25px;
      position: relative
  }

  @media (min-width:500px) {
      #solution-list {
          column-count: 3
      }
  }

  @media (min-width:600px) {
      #solution-list {
          column-count: 4
      }
  }

  #solution-list li {
      width: 100%;
      break-inside: avoid-column;
      line-height: 1.5;
      letter-spacing: .005em;
      padding-top: 7px;
      padding-left: 24px
  }

  .words-yesterday-container {
      margin-top: 20px;
      text-align: center
  }

  #found-yesterday {
      text-align: center
  }

  #discovered-text .show-def {
      font-weight: bolder
  }

  .show-def {
      cursor: pointer
  }

  .show-def:hover {
      text-decoration: underline
  }

  audio {
      display: none;
      height: 0
  }

  .sol-def {
      display: none;
      z-index: 100;
      position: absolute;
      left: 0;
      width: auto;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 40%);
      padding: 10px;
      line-height: inherit;
      letter-spacing: inherit
  }
  .content-profile1 {
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
  .content-profile2 {
      text-align: center;
      font-weight: bold;
  }

 .image-center {
    display: flex;
    justify-content: center;
 }

  button1 {
      --green: #1BFD9C;
      font-size: 15px;
      padding: 0.5em 1.2em;
      letter-spacing: 0.06em;
      position: relative;
      font-family: inherit;
      border-radius: 0.6em;
      overflow: hidden;
      transition: all 0.3s;
      line-height: 1.4em;
      border: 2px solid var(--green);
      background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%, rgba(27, 253, 156, 0.1) 100%);
      color: var(--green);
      box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
  }

  button1:hover {
      color: #82ffc9;
      box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
  }

  button1:before {
      content: "";
      position: absolute;
      left: -4em;
      width: 4em;
      height: 100%;
      top: 0;
      transition: transform .4s ease-in-out;
      background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%);
  }

  button1:hover:before {
      transform: translateX(15em);
  }