/* Global css variables used for colors */
:root {
  --primary: #ffffff;
  --secondary: #000000;
}

body {
  display: flex;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;

  background-color: #ffffff;
  /*dots background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E"); */
  background-color: #DFDBE5;
  background-color: #ffffff;
  /* squiggles background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%23000000' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

h1 {
  font-size: 42px;
  font-weight: 500;
  line-height: 48px;
  margin: 10px 0;
  color: white;
}

.question-section {
  width: 30%;
  min-height: 100vh;
  background-color: var(--secondary);
  display: flex;
  flex-direction: column;
  padding: 4vw;
  align-items: flex-start;
  box-sizing: border-box;
}

#questions {

  padding: 0.5rem;
  color: rgb(0, 0, 0);
  background-color: white;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

}

#questions:focus,
#questions:hover {

 outline: violet; 
 border: 3px solid;
}

#questions option {

  background: turquoise;

}


select {
  display: block;
  border: black;
  color: white;
  font-size: 1rem;
  font-family: 'Montserrat';
  color: var(--secondary);
  width: 100%;
  margin: 24px 0;
}

.disclaimer {
  font-size: 0.68rem;
  font-weight: 100;
  color: white;
  line-height: 1.2rem;
  align-self: end;
}




.guess-who-icon {
  width: 126px;
}

.board-wrapper {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-board {
  width: 90%;
  margin-top: 10vh;
  max-width: 950px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 1rem;
}

/****** CARD ******/
.card {
  width: 200px;
  overflow: hidden;
  border: 3px solid var(--secondary);
  border-radius: 4px;
  /*margin: 30px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: black;

}

.card img {

  width: 100%;
  margin-top: 0;
}

.card p {
  text-align: center;
  color: white;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 500;
  display: block;
    margin-block-start: 0.3em;
    margin-block-end: 0.2em;
}

.card .guess {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  height: inherit;
}

.card:hover {
  background-color: var(--secondary);
}

.card:hover img,
.card:hover p {
  display: none;
}

/* The div with the guess class is only shown on hover */
.card:hover .guess {
  display: flex;
}

.guess span {
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  width: 90%;
}

/****** BUTTONS ******/
button {
  border: 2px solid var(--primary);
  border-radius: 70px;
  font-size: 16px;
  font-family: 'Montserrat';
  font-weight: bold;
  padding: 17px 27px;
  cursor: pointer;
}

/* .small {
  padding: 8px 16px;
}

.outlined-button {
  background-color: transparent;
  color: var(--primary);
  align-self: flex-end;
}
.outlined-button:hover {

  background-color: white;
  color: #000000;
} */

.restart-button {
  padding: 8px 16px;
  margin-bottom: 3rem;
  font-size: 0.7rem;
  background-color: transparent;
  color: var(--primary);
  align-self: flex-end;
}
.restart-button:hover {

  background-color: white;
  color: #000000;
}
/* 
.filled-button {
  background-color: var(--primary);
  color: rgb(0, 0, 0);
  border-radius: 0;
  width: 100%;
}

.filled-button:hover {
  background-color: black;
  border-color: white;
  color: var(--primary);
  border-radius: 50px;
} */

.findout-button {

  border-radius: 0px;
  width: 100%;
}
.findout-button:hover {

  border-radius: 0px;
  width: 100%;
  background-color: black;
  border-color: white;
  color: white;
}

.guess-button-small {
  padding: 8px 20px;
  border-radius: 50px;
  color: #ffffff;
  background-color: black;
  margin-top: 1rem;
}
.guess-button-small:hover {

  border-radius: 50px;
  color: #000000;
  background-color: rgb(255, 255, 255);
  
}

/****** WIN OR LOSE SECTION ******/
.win-or-lose-wrapper {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
}

.win-or-lose {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  text-align: center;
}

.win-or-lose img {
  align-self: flex-start;
  margin-left: 15%;
}

.win-or-lose h1 {
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  .question-section {
    width: 100%;
    min-height: 0;
  }
  button {
    padding: 8px 16px;
  }
  h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .guess-who-icon {
    width: 51px;
  }

  .board-wrapper {
    width: 100%;
  }

  .game-board {
    width: 100%;
    max-width: 750px;
  }

  .card {
    width: 113px;
    position: relative;
  }

  .card .guess {
    display: flex;
    top: 0;
    position: absolute;
    justify-content: flex-end;
  }

  .card .guess span {
    display: none;
  }

  .card .guess .filled-button {
    padding: 6px 11px;
    margin-bottom: 1px;
    background: white;
    color: var(--primary);
    border: none;
  }
}