/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.container{
  display: block;
  width: 100%;
  gap: 10px;
  padding: 10px;
  max-width: 80vw;
}
.pokemon{
  padding-bottom: 2vh;
  margin-bottom: 25vh;
  margin-top: 20vh;
  background-color: #eeeeee;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(119, 119, 119);
}
.pokename{
  padding: auto;
  text-align: center;
  font-size: xx-large;
  text-transform: capitalize;
}
.pokedrawings{
  width: 100%;
  justify-content: center;
  display: flex;
}
.image{
  box-sizing: content-box;
}
.image img{
  height: 40vh;
  width: auto;
  margin: 1vw;
  z-index: -5;
}
.originalsprite{
  display: inline-block;
  margin-inline: 2vw;
  border: 4px solid rgb(174, 225, 235);
  background-color: white;
  border-radius: 20px;
  box-shadow: 3px 3px 3px inset grey;
}

.userdrawings{
  display: inline-block;
  height: 300px + 2vw;
  width: 100%;
  margin-inline: 2vw;
  overflow-x: scroll;
  white-space: nowrap;
  border-left: 3px gray solid;
  border-right: 3px gray solid;
  border-radius: 20px;
  background-color: #d1d1d1;
}

.userdrawing{
  display: inline-block;
  box-sizing: content-box;
  border: 3px solid rgb(174, 225, 235);
  border-radius: 20px;
  background-color: white;
  box-shadow: 3px 3px 3px inset grey;
  height: fit-content;
  width: fit-content;
}

.userdrawing.selected{
  box-shadow: inset 0px 0px 10px 5px #E55EB8;;
}

.votelabel {
  display: inline-block;
  padding: 5px;
  text-align: center;
  width: 100%;
}

.voteuser {
  font-weight: bolder;
}

.userdrawings.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
}

@media (max-width: 768px) {
  .container {
    max-width: 95vw;
  }

  .pokemon {
    margin-top: 5vh;
    margin-bottom: 10vh;
  }

  .pokedrawings {
    flex-direction: column;
    align-items: center;
  }

  .originalsprite {
    margin-inline: 0;
    margin-bottom: 20px;
  }

  .image img {
    height: 30vh;
  }

  .userdrawings {
    width: 90%;
    border-left: none;
    border-right: none;
    border-top: 3px gray solid;
    padding-top: 15px;
  }
}