/* General styles */
html, body
{
    max-width: 100%;
}
.hidden
{
  display: none;
}

.breedButton
{
  cursor: pointer;
  width: 200px;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #6b6b6b;
  border-radius: 5px;
  -webkit-user-select: none; /* Safari   //padding: 0.8rem 0.5rem;
*/
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
.breedButton:hover
{
  cursor: pointer;
  border: 1px solid #6b6b6b;
  filter: brightness(95%);
  transform: scale(1.02);
  transition: all .2s linear;
}
.breedButton:active
{
  cursor: pointer;
  border: 1px solid #6b6b6b;
  filter: brightness(105%);
  transform: scale(0.98);
  transition: all .2s linear;
}

.width150
{
  width: 150px;
}
.width130
{
  width: 130px;
}
.width20
{
  width: 20px;
}

#toggleSound
{
}
#timerDisplay
{
  font-size: 3rem;
  color: black;
}
.answerFeedback
{
  font-size: 2rem;
}

.currentDoggo
{
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gameDoggo
{
  height: 400px;
}
.doggoImg
{
  object-fit: contain;
  max-width:100%;
  max-height:100%;
}
#game
{
  position: relative;
}
#messageWrapper
{
  z-index: 1;
  position: absolute;
  width: 100%;
  text-align: center;
  margin-top: 300px;
}
#message
{
  color: #fff;
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
#messageParagraph
{
  color: #fff;
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.center
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.doggoPile
{
  width:100px;
}
.doggoPileText
{
  font-size: 11px;
}
#db-score
{
  font-weight: bold;
}
#db-user, #favBreed
{
  width: 200px;
}
#db-user-error-msg, #db-favBreed-error-msg
{
  height: 1rem;
}
.btn-danger
{
  background-color: #E47790;
  border-color: #E16682;
  color: white;
}
.btn-danger:hover
{
  background-color: #E47790;
  border-color: #E16682;
  filter: brightness(0.9);
}
.btn-danger:active
{
  background-color: #E47790;
  border-color: #E16682;
  filter: brightness(1.1);
}

#hsnewGame
{
  position: fixed;
  bottom: 50px;
  right: 50px;
}

/*shared summary styles*/
#playTheGame
{
  width: 200px;
}

/* text transition by me */

@-webkit-keyframes textScaling /* Safari and Chrome */ {
  from {
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  to {
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes textScaling {
  from {
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  to {
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
.textScaling {
  -webkit-animation: textScaling 1s ease-out infinite;
  -moz-animation: textScaling 1s ease-out infinite;
  -ms-animation: textScaling 1s ease-out infinite;
  -o-animation: textScaling 1s ease-out infinite;
  animation: textScaling 1s ease-out infinite;
}

/* MOBILE */
@media (max-width: 1001px)
{
  .breedButton
  {
    width: 160px;
    font-size: 1rem;
  }
  .breedButton:hover
  {
    filter: brightness(100%);
    transform: scale(1);
    transition: all .2s ease-in;
  }
  .breedButton:active
  {
    filter: brightness(100%);
    transform: scale(1);
    transition: all .2s ease-in;
  }
  #countdownMsg
  {
    font-size: 1rem;
  }
  .currentDoggo
  {
    height: 400px;
  }
  #messageWrapper
  {
  }
  #message
  {
    font-size: 1rem;
  }
}
@media (max-width: 321px)
{
  #countdownMsg
  {
    font-size: 1rem;
  }
  .currentDoggo
  {
    height: 350px;
  }
  .breedButton
  {
    width: 140px;
    font-size: 0.9rem;
  }
}