/**
* Wordfind.js 0.0.1
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* For all details and documentation:
*     https://github.com/bunkat/wordfind
*/
@font-face {
  font-family: 'Apercu Pro';
  /* Provide a name for your font */
  src: url("/hn_apercu_2024-03-05_1621/Apercu/Apercu_Pro_Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

body {
  margin: 0;
  overflow: hidden;
  width: 1018px;
  height: 360px; }

#blocker,
#win-screen {
  position: fixed;
  width: 1020px;
  height: 330px; }

#win-screen {
  background-color: #007fbff8;
  display: flex;
  display: -webkit-flex;
  /* NEW */
  flex-direction: column;
  align-items: center;
  top: -330px;
  transition: transform 1s ease-out; }
  #win-screen h2 {
    text-align: center;
    font-family: "Domaine Display";
    font-size: 50px;
    font-style: normal;
    font-weight: 800;
    line-height: 50px;
    color: white;
    margin-top: 76px;
    margin-bottom: 0;
    width: 592px;
    height: 141px;
    -webkit-flex-shrink: 0;
    /* NEW */
    flex-shrink: 0;
    /* 100% */ }
  #win-screen a {
    display: flex;
    display: -webkit-flex;
    /* NEW */
    width: 95px;
    height: 21px;
    flex-direction: column;
    -webkit-flex-direction: column;
    /* NEW */
    justify-content: center;
    -webkit-flex-shrink: 0;
    /* NEW */
    flex-shrink: 0;
    text-align: center;
    font-family: "Apercu Pro";
    font-size: 13.167px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.141px;
    /* 168.162% */
    letter-spacing: 0.026px;
    border-radius: 6.583px;
    background: #BD9C69;
    text-decoration: none;
    color: white; }

.slide-in-y {
  transform: translateY(330px); }

.slide-out-y {
  transform: translateY(-330px); }

.slide-out {
  transform: translateX(-100%);
  /* Move the element to the left by its width */ }

#title {
  position: fixed;
  top: 50px;
  transition: transform 1s ease-out;
  /* Specify the animation properties */ }

#footer {
  width: 1008px;
  display: -webkit-flex;
  /* NEW */
  display: flex;
  justify-content: space-between;
  padding: 5px;
  align-items: center; }

#play {
  display: -webkit-flex;
  /* NEW */
  display: flex;
  width: 96px;
  height: 22px;
  padding: 0.587px 0.556px 0.413px 0.444px;
  justify-content: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  /* NEW */
  flex-shrink: 0;
  border-radius: 6.583px;
  border-color: transparent;
  background-color: #007EBF;
  color: white;
  text-align: center;
  font-family: "Apercu Pro";
  font-size: 13.167px;
  font-style: normal;
  font-weight: 600;
  line-height: 22.141px;
  /* 168.162% */
  letter-spacing: 0.026px; }

#penninn-logo {
  width: 200px; }

.puzzleWrap {
  background-color: white; }

/**
* Styles for the puzzle
*/
#puzzle {
  float: left;
  width: 1018px;
  text-wrap: nowrap;
  word-wrap: normal;
  overflow-wrap: normal;
  white-space: nowrap; }

#puzzle div {
  width: 1018px;
  margin: 0 auto;
  white-space: nowrap; }

/* style for each square in the puzzle */
#puzzle .puzzleSquare {
  height: 30px;
  width: 30px;
  text-transform: uppercase;
  background-color: white;
  border: solid black 0.1px;
  outline: none;
  font: 1.2em sans-serif;
  color: #1C404D;
  font-weight: bold;
  cursor: none; }

button::-moz-focus-inner {
  border: none;
  outline: none; }

/* indicates when a square has been selected */
#puzzle .selected {
  outline: none;
  background-color: yellow;
  border-color: white;
  border: solid black 0.1px; }

/* indicates that the square is part of a word that has been found */
#puzzle .found {
  color: #1C404D;
  background-color: yellow; }

#puzzle .solved {
  color: #ee5426; }

/* indicates that all words have been found */
/**
* Styles for the word list
*/
#words {
  width: 250px;
  color: #6891ad;
  float: left;
  margin-top: 37px; }

#words ul {
  list-style-type: none; }

#words li {
  padding: 0 0 7px;
  font: 1em sans-serif;
  display: inline-block;
  float: left;
  width: 100px; }

/* indicates that the word has been found */
#words .wordFound {
  text-decoration: line-through;
  color: #ee5426; }

/**
* Styles for the button
*/
#solve {
  margin: 30px 30px 0 40px;
  background: transparent;
  color: #ee5426;
  padding: 10px 20px;
  border: 2px solid #ee5426;
  border-radius: 25px;
  opacity: .5;
  transition: opacity .25s ease-in; }
  #solve:hover, #solve.gameSolved {
    opacity: 1; }

#custom-cursor {
  position: absolute;
  pointer-events: none;
  /* Ensure the cursor doesn't interfere with clicks */
  width: 15px;
  /* Set the width of your cursor image */
  height: 15px;
  /* Set the height of your cursor image */
  background-size: cover;
  z-index: 9999;
  /* Make sure it's above other elements */
  background-color: rgba(247, 241, 2, 0.755);
  border-radius: 50%; }