@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');

body {
  background: url("../img/squairy_light.png");
}
div.container {
  padding: 10px 0;
}
h2 {
  font-size: 34px;
}
h3 {
  font-size: 28px;
  margin-bottom: 30px;
}
#gameWelcome {
  padding-bottom: 8px;
  display: block;
}

#gameWelcome, #js-playerResult, #myModalLabel {
  font-size: 40px;
  font-family: 'Bowlby One SC', cursive;
}

#myModalLabel, #js-computerName, #js-computerPick, #js-playerName, #js-playerPick, button, .playerNameLabel {
  font-family: 'Baloo Bhaina', cursive;
}

.img-howToPlay {
  margin: 0 auto;
  max-height: 300px;
  max-width: 300px;
}

button.badge, button span.badge, button i.badge, #js-playerChoiceView span.badge, #js-computerChoiceView span.badge {
  background-color: inherit;
}

#js-playerChoiceView div, #js-computerChoiceView div {
  border-radius: 5px;
}
#js-playerChoiceView i, #js-computerChoiceView i {
  padding: 10px;
}

.mainView {
  display: flex;
  justify-content: center;
}

.imgElement {
  padding: 0 20px;
}
.badge {
  font-size: 20px;
}
form {
  padding-bottom: 20px;
}

.result-success {
  color: rgb(49, 199, 37);
}
.result-danger {
  color: rgb(195, 37, 37);
}
.result-warning {
  color: rgb(233, 182, 50);
}

#js-playerName, #js-playerPick, #js-computerName, #js-computerPick {
  font-size: 16px;
}

.form-control {
  display: inline-block;
  width: auto;
}
.imgElement {
    display: none;
}

#js-gameWinner {
  font-size: 22px;
}
button[id^="js-playerPick"] {
 margin: 3px;
}

@media (min-width: 768px){
  .imgElement {
      display: inline-block;
  }
}