style.css

.container-fluid {
		padding-left: 0px;
		height: 100%
}

.money-table {
		font-size: 20px;
		text-align: center;
		margin-top: 15px;
		padding: 0px 0px 0px 30px;
		width: 100%;
}

.sidebar {
		background-image: url("./img/gold-polka-dot-background.jpg");
		background-color: #5ddae2;
		height: 100%;
		position: fixed;
}

.gameboard {
		float: right;
		background-image: url("./img/galaxy.jpg");
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #b9b9b9;
		margin: 0px;
		padding: 30px 0px 112px 60px;
		height: 100%;
		display: inline-block;
}

.game-box {
		position: relative;
		display: inline-block;
		width: 15%;
		height: 10%;
		background-image: radial-gradient(#fef4b3, #b48e2b);
		border: 2px solid #1b110a;
		border-radius: 10px;
		padding: 18px;
		margin: 10px;
		text-align: center;
		font-weight: bold;
		box-shadow: -5px -10px 10px #ffca00;
}

.final-game-box {
		position: relative;
		display: inline-block;
		width: 15%;
		height: 10%;
		border: 2px solid #1b110a;
		border-radius: 10px;
		padding: 25px;
		margin: 10px;
		text-align: center;
		font-weight: bold
}

.opened-box {
		position: relative;
		display: inline-block;
		align-items: stretch;
		width: 15%;
		height: 10%;
		/* background-color: #89b5e8; */
		background-image: radial-gradient(#df2456, #730613);
		border: 2px solid #1b110a;
		border-radius: 10px;
		padding: 20px;
		margin: 10px;
		text-align: center;
		font-weight: bold;
}

.player-box {
		position: relative;
		display: inline-block;
		width: 15%;
		height: 10%;
		background-image: url(./img/golddust.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		border: 2px solid #1b110a;
		border-radius: 10px;
		padding: 15px;
		margin: 10px;
		text-align: center;
		font-weight: bold;
}

.final-player-box {
		position: relative;
		display: inline-block;
		width: 15%;
		height: 10%;
		background-image: url(./img/golddust.jpg);
		border: 2px solid #1b110a;
		border-radius: 10px;
		padding: 25px;
		margin: 10px;
		text-align: center;
		font-weight: bold;
}

.initial-box {
		background-image: url(./img/golddust.jpg);
		background-size: 100%;
		font-weight: bold;
		font-size: 30px;
		width: 150px;
		border: 3px solid #1b110a;
		border-radius: 10px;
		padding: 15px;
		margin-left: 30px;
		text-align: center;
		display: inline-block;
		box-shadow: -5px 10px 10px #6b6b6b;
}

#initial-box-display {
		background-color: rgb(214, 214, 214);
		text-align: center;
		align-content: center;
		width: inherit;
		margin-top: 10px;
		height: 18%
}

.value-box {
		display: inline-block;
		background-image: radial-gradient(#ffe767, #a37600);
			border: 2px solid #c2d2d9;
		margin: 1px;
		text-align: center;
		width: 100%
}

.strike-box {
		text-decoration: line-through;
		background-image: radial-gradient(#df2456, #730613);
		background-color: #23e95b
}

.btn {
		width: 150px;
		height: 120px;
		white-space: normal;
		word-wrap: break-word;
}

#chosen-box-text {
		margin-left: 30px;
		padding-top: 10px;
		font-weight: bold;
}

#jumbotron {
		position: absolute;
		background-color: rgb(204, 203, 209);
		margin-left: -60px;
		margin-top: -30px;
		height: 100%;
		width: 100%;
		z-index: 10;
		display: none;
		text-align: center;
}

#winning-page {
		background-color: #7258de
}

#jumbotron-image {
		height: 350px;
		width: 500px;
}

#instructions-display {
	background-color: #e2e2e8;
	text-align: center;
	font-size: 15px
}

#message-display {
		color: #e2e2e8;
		font-weight: bold;
		display: inline-block;
		text-align: center;
}

@keyframes slidein {
		from {
				margin-left: 100%;
				width: 300%;
		}

		to {
				margin-left: 0%;
				width: 100%;
		}
}

.puff-in-center {
		-webkit-animation: puff-in-center 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
		animation: puff-in-center 1.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-18 17:10:4
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-in-center {
		0% {
				-webkit-transform: scale(2);
				transform: scale(2);
				-webkit-filter: blur(2px);
				filter: blur(2px);
				opacity: 0;
		}

		100% {
				-webkit-transform: scale(1);
				transform: scale(1);
				-webkit-filter: blur(0px);
				filter: blur(0px);
				opacity: 1;
		}
}

@keyframes puff-in-center {
		0% {
				-webkit-transform: scale(2);
				transform: scale(2);
				-webkit-filter: blur(2px);
				filter: blur(2px);
				opacity: 0;
		}

		100% {
				-webkit-transform: scale(1);
				transform: scale(1);
				-webkit-filter: blur(0px);
				filter: blur(0px);
				opacity: 1;
		}
}

.heartbeat {
		-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
		animation: heartbeat 1.5s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-18 18:31:7
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
		from {
				-webkit-transform: scale(1);
				transform: scale(1);
				-webkit-transform-origin: center center;
				transform-origin: center center;
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		10% {
				-webkit-transform: scale(0.91);
				transform: scale(0.91);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		17% {
				-webkit-transform: scale(0.98);
				transform: scale(0.98);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		33% {
				-webkit-transform: scale(0.87);
				transform: scale(0.87);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		45% {
				-webkit-transform: scale(1);
				transform: scale(1);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}
}

@keyframes heartbeat {
		from {
				-webkit-transform: scale(1);
				transform: scale(1);
				-webkit-transform-origin: center center;
				transform-origin: center center;
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		10% {
				-webkit-transform: scale(0.91);
				transform: scale(0.91);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		17% {
				-webkit-transform: scale(0.98);
				transform: scale(0.98);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		33% {
				-webkit-transform: scale(0.87);
				transform: scale(0.87);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		45% {
				-webkit-transform: scale(1);
				transform: scale(1);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}
}

.tracking-in-contract-bck-top {
		-webkit-animation: tracking-in-contract-bck-top 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
		animation: tracking-in-contract-bck-top 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-19 11:23:30
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-top
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract-bck-top {
		0% {
				letter-spacing: 1em;
				-webkit-transform: translateZ(400px) translateY(-300px);
				transform: translateZ(400px) translateY(-300px);
				opacity: 0;
		}

		40% {
				opacity: 0.6;
		}

		100% {
				-webkit-transform: translateZ(0) translateY(0);
				transform: translateZ(0) translateY(0);
				opacity: 1;
		}
}

@keyframes tracking-in-contract-bck-top {
		0% {
				letter-spacing: 1em;
				-webkit-transform: translateZ(400px) translateY(-300px);
				transform: translateZ(400px) translateY(-300px);
				opacity: 0;
		}

		40% {
				opacity: 0.6;
		}

		100% {
				-webkit-transform: translateZ(0) translateY(0);
				transform: translateZ(0) translateY(0);
				opacity: 1;
		}
}

.bounce-in-top {
		-webkit-animation: bounce-in-top 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
		animation: bounce-in-top 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-19 13:21:58
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
		0% {
				-webkit-transform: translateY(-500px);
				transform: translateY(-500px);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
				opacity: 0;
		}

		38% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
				opacity: 1;
		}

		55% {
				-webkit-transform: translateY(-65px);
				transform: translateY(-65px);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		72% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		81% {
				-webkit-transform: translateY(-28px);
				transform: translateY(-28px);
				-webkit-animation-timing-function: ease-in;
		}

		90% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		95% {
				-webkit-transform: translateY(-8px);
				transform: translateY(-8px);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		100% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}
}

@keyframes bounce-in-top {
		0% {
				-webkit-transform: translateY(-500px);
				transform: translateY(-500px);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
				opacity: 0;
		}

		38% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
				opacity: 1;
		}

		55% {
				-webkit-transform: translateY(-65px);
				transform: translateY(-65px);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		72% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		81% {
				-webkit-transform: translateY(-28px);
				transform: translateY(-28px);
				-webkit-animation-timing-function: ease-in;
		}

		90% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}

		95% {
				-webkit-transform: translateY(-8px);
				transform: translateY(-8px);
				-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		}

		100% {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-animation-timing-function: ease-out;
				animation-timing-function: ease-out;
		}
}

.slide-in-blurred-tr {
		-webkit-animation: slide-in-blurred-tr 2.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
		animation: slide-in-blurred-tr 2.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-19 14:21:19
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-blurred-tr
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-tr {
		0% {
				-webkit-transform: translate(1000px, -1000px) skew(-80deg, -10deg);
				transform: translate(1000px, -1000px) skew(-80deg, -10deg);
				-webkit-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
				-webkit-filter: blur(40px);
				filter: blur(40px);
				opacity: 0;
		}

		100% {
				-webkit-transform: translate(0, 0) skew(0deg, 0deg);
				transform: translate(0, 0) skew(0deg, 0deg);
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				-webkit-filter: blur(0);
				filter: blur(0);
				opacity: 1;
		}
}

@keyframes slide-in-blurred-tr {
		0% {
				-webkit-transform: translate(1000px, -1000px) skew(-80deg, -10deg);
				transform: translate(1000px, -1000px) skew(-80deg, -10deg);
				-webkit-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
				-webkit-filter: blur(40px);
				filter: blur(40px);
				opacity: 0;
		}

		100% {
				-webkit-transform: translate(0, 0) skew(0deg, 0deg);
				transform: translate(0, 0) skew(0deg, 0deg);
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				-webkit-filter: blur(0);
				filter: blur(0);
				opacity: 1;
		}
}

.text-focus-in {
		-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-19 16:0:26
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
		0% {
				-webkit-filter: blur(12px);
				filter: blur(12px);
				opacity: 0;
		}

		100% {
				-webkit-filter: blur(0px);
				filter: blur(0px);
				opacity: 1;
		}
}

@keyframes text-focus-in {
		0% {
				-webkit-filter: blur(12px);
				filter: blur(12px);
				opacity: 0;
		}

		100% {
				-webkit-filter: blur(0px);
				filter: blur(0px);
				opacity: 1;
		}
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-19 19:10:55
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}