@font-face {
  font-family: '7segment';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/7segment.woff') format('woff2');
}


body {
  background-color: grey;
  font-family: sans-serif;
}


.display {
  font-family: '7segment';
  font-size: 150px;
  color: #00cc00;
  background-color: #002000;
  width: 390px;
  height: 150px;
  border-radius: 100px;
  text-align: center;
}

.display-red {
  color: #cc0000;
  background-color: #200000;
}

.coins {
  width: 225px;
  height: 110px;
  background-color: #202020;
  padding-left: 50px;
  padding-top: 20px;
  margin-left: 52px;
}
.coins label {
  display: block;
  color: gray;
  font-family: monospace;
  margin-bottom: 15px;
}
.coin {
  display: inline-block;
  width: 50px;
  height: 35px;
  border: solid 1px white;
  border-radius: 25px;
  color: white;
  font-family: 'Lucida Sans Unicode', Arial, sans-serif;
  background-color: #202020;
  margin-left: -10px;
  text-align: center;
  vertical-align: middle;
  line-height: 100%;
  font-size: 20px;
  position: relative;
  padding-top: 15px;
  cursor: pointer;
}
.tray {
  width: 350px;
  height: 150px;
  background-color: #202020;
  color: dimgray;
  text-align: center;
  border: solid 4px darkslategray;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  cursor: grab;
  transition-duration: 0.1s;
}
.tray:active {
  cursor: grabbing;
}
.expel {
  border-radius: 300px;
  width: 300px;
  height: 300px;
  background-color: #202020;
  border: solid 4px darkslategray;
}
.handle {
  width: 250px;
  height: 70px;
  transition-duration: 0.2s;
  transform-origin: 50px 35px;
  background-color: #608080;
  border: solid 4px darkslategray;
  border-top-right-radius: 25px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 25px;
  position: relative;
  top: 110px;
  left: 25px;
}
.handle:hover {
  transform: rotate(2deg);
}
.handle:active {
  transform: rotate(15deg);
}

.productsContainer {
  background-color: white;
  width: 85%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: auto auto;
}
.productButton {
  background-image: url('../img/button.png');
  width: 75px;
  height: 36px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  display: block;
  transition-delay: 0.1s;
  margin-left: 12px;
  background-color: transparent;
}
.productButton:hover {
  background-image: url('../img/button-hover.png');
}
.productButton:active {
  background-image: url('../img/button-active.png');
}
.productPrice {
  display: block;
  font-family: '7segment';
  font-size: 33px;
  text-align: center;
}

.controlContainer {
  display: flex;
  width: 85%;
  margin: auto auto;
  margin-top: 100px;
  align-content: center;
  justify-content: space-evenly;
}
.arena {
  width: 90%;
  margin: auto auto;
  background-image: linear-gradient(darkred, firebrick, darkred);
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}

.toastHide {
  background-color: #CCCCCCCC;
  width: 300px;
  height: 350px;
  font-family: monospace;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  z-index: 200;
  top: 50%;
  left: 50%;
  margin-top: -475px;
  margin-left: -150px;
  transition-delay: 2s;
  display: none;
}
.toastShow {
  background-color: #CCCCCCCC;
  width: 300px;
  height: 350px;
  font-family: monospace;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  z-index: 200;
  top: 50%;
  left: 50%;
  margin-top: -475px;
  margin-left: -150px;
  transition-delay: 2s;
  display: block;
}


.footer {
  color: #F0F0F0;
  font-family: 'Lucida Console', monospace;
  font-size: 9pt;
  margin: auto;
  text-align: center;
  width: 65%;
}

.footer a {
  color: #FFFFFE;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  font-size: 12pt;
}

.footer a img {
  vertical-align: middle;
}