/**
* Wordfind.js 0.0.1
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* For all details and documentation:
*     http://github.com/bunkat/wordfind
*/

body {
  font: 1em Arial;
}

p {
  font: 22pt sans-serif;
  margin: 20px 20px 0px 20px;
}

h1 {
  text-align: center;
  /* to center #puzzle on small devices */
}

#main {
  margin: 0 auto;
  max-width: 80rem;
  display:flex;
  flex-direction: column;
  text-align: center;
  /* to center #puzzle on small devices */
}



/**
* Styles for the puzzle
*/
#puzzle {
  display: inline-block;
  padding: 2rem;
  border-radius:20px
}

#puzzle>div {
  /* rows */
  width: 100%;
  margin: 0 auto;
}

/* style for each square in the puzzle */
.puzzleSquare {
  height: 7vw;
  width: 7vw;
  text-transform: uppercase;
  background-color: white;
  border: 0;
  color: #2583C6;
}

/* @media (max-width:1180px){
  .list-info{
    left:25%!important
  }
}  */

@media only screen and (max-width: 1030px) {
  #puzzle {
    float: left;
    /* padding: 1rem; */
  }  
}

@media only screen and (min-width:600px){
  .puzzleSquare {
    height: 3rem;
    width: 3rem;
    font-size: 20px;
    font-family: 'poppins_bold';
  }
}

@media only screen and (max-width:960px){
  .puzzleSquare {
    height: 2.5rem;
    width: 2.5rem;
    font-size: 20px;
    font-family: 'poppins_bold';
  }
  .title-puzzle > h4{
    top:-27px!important
  }
}


button::-moz-focus-inner {
  border: 0;
}

/* indicates when a square has been selected */
#puzzle .selected {
  background-color: #C8E8C4;
  color:#119C67
}

/* indicates that the square is part of a word that has been found */
#puzzle .found {
  background-color: #6EB864;
  opacity:0.75;
  color: white;
}

#puzzle .solved {
  background-color: purple;
  color: white;
}

/* indicates that all words have been found */

/**
* Styles for the word list
*/
#words {
  display: inline-block;
  max-width: 30rem;
  padding: 1em;
  list-style-type: none;
  text-align: left;
}

@media only screen and (min-width: 600px) {
  #words {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-gap: 20px;
  }
}

#words li {
  padding: 3px 0;
  font: 1em sans-serif;
}

/* indicates that the word has been found */
.wordFound {
  background-color: #6EB864!important;
  opacity:0.75
}

.wordFoundList{
  background-color: #6EB864!important;
}

/**
* Styles for the controls
*/
#controls {
  display: inline-block;
  max-width: 30rem;
  padding: 1em;
  border: none;
  text-align: left;
}

label {
  white-space: nowrap;
  margin-top: 1em;
}

input {
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 1em;
}

input[type="number"] {
  width: 2rem;
}

select {
  max-width: 10rem;
}

#create-grid,
#solve {
  display: block;
  margin-top: 1rem;
}

#secret-word {
  text-transform: uppercase;
}

#result-message {
  font-size: 1.2em;
}




body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.game-container {
  display: flex;
  min-height: 100vh;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  background-color: #0c96cf;
}

.game-container-info{
  width:100vw;
  background-image: url('../bg.png');
  background-position-y: center;
  height:100vh;
  display:flex;
  background-size:100%;
  background-repeat:no-repeat;
  justify-content: center;
}

.game-header {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-main {
  width: 50%
}

.game-introduction , .game {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}



.bg-white {
  background: white
}

.card-game {
  padding: 5rem 2rem;
  height: auto;
  max-width: 460px;
  border-radius: 20px;
  box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.53);
  -webkit-box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.53);
  -moz-box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.53);
}

.w-70 {
  width: 70%
}

.w-75 {
  width: 75%
}

p {
  font-size: 1rem;
}

.text-center {
  text-align: center
}

.text-primary {
  color: #2583C6;
  font-size:1rem;
}
.instructions{
    font-size:1.2rem
}
h4{
  font-weight: bold;
}

.p-relative{
  position:relative;
}

.p-absolute{
    position:absolute
}

.text-white{
  color:white;
}

.bg-blue{
  background:#1C2F74
}

.start-container{
  display: flex;
  justify-content: center;
}

.pointer{
  cursor:pointer;
}

.btn-start{
  background:#FF1065;
  border:none;
  outline:none;
  border-radius:10px;
  padding:0.75rem  2rem;
  max-width:283px;
  font-size:1.15rem;
  bottom:-20px;
}

.title-container{
  display:flex;
  justify-content: center;
}

.title-puzzle{
  width:100%;
  display: flex;
  justify-content: center;
}

.title-puzzle > h4{
  border-radius:10px;
  padding:0.75rem 2rem;
  top:0px;

}

.title{
  border-radius:10px;
  padding:0.75rem 2rem;
  top:-32px;
}

.d-none {
  display: none!important
}


.list-words{
  margin-top:.75rem;
  display:grid;
  list-style:none;
  grid-template-columns: repeat(3,1fr);
  gap:0.75rem
}

.word{
  border-radius: 25px;
  padding:0.5rem 1.5rem;
  font-family: 'poppins_bold';
}

.list-info{
  display:flex;
  gap:1rem;
  bottom:-5px;
  left:-288px
}


.item{
  display:flex;
  align-items: center;
  padding:0.75rem 1rem;
  border-radius: 10px;
  min-width: 125px;
}

.item > img{
  margin-right: 0.5rem;
  height:22px;
}

.game-container-play{
  display:flex;
  background:#0c96cf;
  justify-content:center
}

.game{
  /* background-image:url(../bg-game.png); */
  /* background-size:contain;
  background-repeat: no-repeat;
  background-position-y: center; */
  height:100vh;
  width:1080px;
  position:relative
}

.character-found{
  height:110px;
  z-index: 100;
}

.timer{
  top:0;
  left:0;
  margin:1rem 3rem;
  font-size: 2rem;
}

.result{
  width:100%;
  height:100%;
  background: black;
  opacity:0;
  position: relative;
  display:flex;
  align-items: center;
  justify-content: center;
  transition: all 500ms;
}


.show-result{
  opacity: 0.75;
}

.game-bg{
  background-image:url(../bg-game.png);
  width: 100%;
  background-position-x: center;
  height:600px;
  background-size: contain;
  background-repeat: no-repeat;
}

.formulario-info-global{
	display:flex;
	flex-direction: column;
	justify-content: center;
}