* {
	/* font-family: undefined; */
}

@font-face {
	font-family: undefined;
	src: url("undefined-medium.ttf");
}

.cashwrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cashout {
	width: 400px;
	height: 40px;
	background-color: rgb(100, 200, 130);
	text-align: center;
	line-height: 40px;
	align-self: center;
	justify-self: center;
	border-radius: 50px;
	border: 5px solid rgb(0, 100, 30);
	color: black;
}

.cashout:hover {
	transition: background-color 1s;
	background-color: rgb(20, 120, 50);
}

:root {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	--mocha-base: #1e1e2e;
	--mocha-text: #cdd6f4;
	--mocha-pink: #f5c2e7;
	--mocha-mauve: #cba6f7;
	--mocha-red: #f38ba8;
	--mocha-maroon: #eba0ac;
	--mocha-peach: #fab387;
	--mocha-yellow: #f9e2af;
	--mocha-green: #96f391;
	--mocha-teal: #94e2d5;
	--mocha-sky: #89dceb;
	--mocha-sapphire: #74c7ec;
	--mocha-blue: #89b4fa;
	--mocha-lavender: #b4befe;
	--mocha-text: #cdd6f4;
	--mocha-subtext1: #bac2de;
	--mocha-subtext0: #a6adc8;
	--mocha-overlay2: #9399b2;
	--mocha-overlay1: #7f849c;
	--mocha-overlay0: #6c7086;
	--mocha-surface2: #585b70;
	--mocha-surface1: #45475a;
	--mocha-surface0: #313244;
	--mocha-surface0-bg: rgba(31, 32, 44, 0.5);
	--mocha-mantle: #181825;
	--mocha-crust: #11111b;
	overflow-x: hidden;
	color: var(--mocha-mauve);
}

li {
	color: var(--mocha-lavender);
}

a {
	color: pink;
}

p {
	color: var(--mocha-text);
}

b {
	color: var(--mocha-blue);
}

body {
	background-color: var(--mocha-surface0);
	background-size: 130%;
}

span {
	color: var(--mocha-sapphire);
}

button {
	background-color: var(--mocha-surface1);
	border-radius: 10%;
	border: 1px solid var(--mocha-lavender);
	color: var(--mocha-text);
}

.article>img {
	width: 100%;
}

code {
	background-color: var(--mocha-surface1);
}

.article {
	width: 50%;
	padding: 1em;
	justify-self: center;
	align-self: center;
	margin: auto;
	background-color: var(--mocha-surface0-bg);
	border: 1px solid var(--mocha-lavender);
	backdrop-filter: blur(10px);
	border-radius: 30px;
}

@media only screen and (max-width: 760px) {
	.article {
		width: 75%;
		padding: 1em;
		justify-self: center;
		align-self: center;
		margin: auto;
		border-left: 1px solid var(--mocha-lavender);
		border-right: 1px solid var(--mocha-lavender);
	}
}

.gamble {
	width: 100px;
	height: 100px;
	border-radius: 3px;

	background-color: var(--mocha-surface0-bg);
	border: 3px solid var(--mocha-lavender);

	justify-self: center;
	align-self: center;
}

.container>.lost {
	width: 100px;
	height: 100px;
	border-radius: 3px;

	background-color: var(--mocha-red);
	border: 3px solid #702020;

	justify-self: center;
	align-self: center;
}

.container>.won {
	width: 100px;
	height: 100px;
	border-radius: 3px;

	background-color: var(--mocha-green);
	border: 3px solid #208610;

	justify-self: center;
	align-self: center;
}

.container>.won:hover {
	background-color: var(--mocha-green);
}

.container>.lost:hover {
	background-color: var(--mocha-red);
}

.container {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	row-gap: 20px;
	padding: 10px;
}

.next {
	width: 100%;
	height: 20px;
	display: inline-block;
	text-align: center;
	margin-top: -10;
	text-justify: top;
	color: #a0a0a0;
	y: -10;
}

.container>div:hover {
	transition: background-color 1s;
	background-color: var(--mocha-lavender);
	border: 3px solid #747ebe;
}

.container>.won:hover {
	border: 3px solid #208610;
}

.container>.lost:hover {
	border: 3px solid #702020;
}

.winnings {
	font-size: 20px;
	color: rgb(255, 255, 255);
}

@keyframes shake {
	0% {
		transform: translate(2px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(0px, 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(2px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(2px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

.shakewrap {
	width: 100%;
	/* height: 80px; */
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.missed {
	background-color: var(--mocha-yellow);
	border: 3px solid #ba832e;
}

.shake {
	animation-name: shake;
	animation-duration: 10s;
	transform-origin: 50% 50%;
	animation-iteration-count: infinite;
	line-height: 0px;
}

.shake {
	display: inline-block
}

.wobble {
	animation: wobble 5s ease-in-out infinite;
	transform-origin: center bottom;
	transition: padding .3s, bottom .3s;
	text-align: center;
}

@keyframes wobble {
	33% {
		transform: rotate(5deg);
	}

	66% {
		transform: rotate(-5deg);
	}
}