/*General*/

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
}

.background-image {
  background-image: url("../images/mountains.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;

}

/*Header and three buttons (top section)*/

h1 {
  font-family: 'Work Sans', sans-serif;
  font-size: 80px;
  background-color:#f2f2f2;opacity:0.6;
  padding-top: 10px;
}


.game-objects {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  border: none;
  font-size: 40px;

}

button:hover {
  font-weight: bold;
  animation: shake 0.2s;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

button:focus {
  background-color:#82B0D1;opacity:0.6;
}

/*Font and extra styling for rest of the elements*/

h2 {
  color: white;
  background-color: black;
  font-size: 35px;
}

p {
  display: inline;
  padding: 10px;
  font-size: 30px;
}

p.choice {
  font-color: black;
  font-weight: bold;
  font-size: 35px;
  padding-bottom: 20px;
}

.choice-section {
  padding-bottom: 20px;
}

h3 {
  font-color: black;
  font-weight: bold;
  font-size: 35px;
  padding-top: 10px;
}