index.css

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background-image: url("img/greenBG.jpeg");
	background-size: cover;
	background-repeat: repeat;
	height: 100vh;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

button {
	border: 1px solid #798897;
	border-radius: 10px;
	color: #ffffff;
	padding: 0.5em;
	margin: 0.5em;
	cursor: pointer;
	font-size: 1.5em;
	background-color: #930014;
	font-family: "Russo One", sans-serif;
}

.top-area {
	display: flex;
	align-self: flex-start;
}

.top-area > p {
	margin-left: 10px;
	align-self: center;
}

#new-deck {
	align-self: flex-start;
}

#new-deck:hover {
	background-color: #db0320;
}

#draw-card {
	min-width: 35vw;
	margin: auto;
}

#draw-card:hover {
	background-color: #db0320;
}

#cards-remaining {
	color: whitesmoke;
	font-size: 1.5em;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

#game-message {
	font-size: 3.5em;
	color: whitesmoke;
	font-family: "Russo One", sans-serif;
}

.score-title {
	font-size: 1.8em;
	color: #ffffff;
	font-family: "Staatliches", sans-serif;
}

.card-outline {
	border: 5px solid goldenrod;
	border-radius: 20px;
	height: 390px;
	width: calc(390px * 5 / 7);
	justify-content: center;
}

.card-outline:nth-of-type(1) {
	margin-bottom: 10px;
}

.outline-text {
	color: gold;
	font-size: 2.5em;
	text-align: center;
	font-family: "Staatliches", sans-serif;
}

.card {
	width: 100%;
	height: 100%;
}

button:disabled {
	cursor: not-allowed;
}

/** Modal **/
#openModal {
	position: absolute;
	top: 0;
	right: 0;
	margin: 30px 20px 0 0;
	color: gold;
	cursor: pointer;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(59, 5, 3, 0.95);
}

.modal-content {
	display: flex;
	flex-direction: column;
	background-color: whitesmoke;
	border: 5px solid #4581d0;
	margin: 100px auto;
	width: 85vw;
	max-width: 850px;
	height: 35vh;
	line-height: 1.5em;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.modal-content > h3 {
	padding: 0 10px;
}

#modalTitle {
	color: #fff;
	font-size: 1.5em;
	margin: 0;
	padding: 10px;
	background-color: #4581d0;
}

#modal-exit {
	position: absolute;
	align-self: flex-end;
	border-radius: 0;
	font-size: 0.75em;
	background-color: red;
	width: 25px;
	height: 25px;
}

/** Animations **/
/* Card Outline Text */
.shimmer {
	text-align: center;
	color: rgba(255, 255, 255, 0.1);
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(gold),
		color-stop(0.5, #fff)
	);
	background: -moz-gradient(
		linear,
		left top,
		right top,
		from(gold),
		color-stop(0.5, #fff)
	);
	background: gradient(
		linear,
		left top,
		right top,
		from(gold),
		color-stop(0.5, #fff)
	);
	-webkit-background-size: 125px 100%;
	-moz-background-size: 125px 100%;
	background-size: 55px 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-animation-name: shimmer;
	-moz-animation-name: shimmer;
	animation-name: shimmer;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: gold;
}

@-moz-keyframes shimmer {
	0% {
		background-position: top left;
	}
	100% {
		background-position: top right;
	}
}

@-webkit-keyframes shimmer {
	0% {
		background-position: top left;
	}
	100% {
		background-position: top right;
	}
}

@-o-keyframes shimmer {
	0% {
		background-position: top left;
	}
	100% {
		background-position: top right;
	}
}

@keyframes shimmer {
	0% {
		background-position: top left;
	}
	100% {
		background-position: top right;
	}
}

/* Generate A New Deck / Draw A Card */
.breathe {
	-webkit-animation-name: start; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
	animation-name: breathe;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes breathe {
	0% {
		background-color: #930014;
	}
	25% {
		background-color: #930014;
	}
	50% {
		background-color: #db0320;
	}
	100% {
		background-color: #930014;
	}
}

/* Standard syntax */
@keyframes breathe {
	0% {
		background-color: #930014;
	}
	25% {
		background-color: #930014;
	}
	50% {
		background-color: #db0320;
	}
	100% {
		background-color: #930014;
	}
}

@media screen and (max-height: 900px) {
	button {
		font-size: 1em;
	}

	#cards-remaining {
		font-size: 1em;
	}

	#game-message {
		font-size: 2.5em;
		margin: 0;
	}

	.score-title {
		font-size: 1.5em;
	}

	.outline-text {
		font-size: 1.5em;
	}

	.card-outline {
		height: 220px;
		width: calc(220px * 5 / 7);
	}

	.modal-content {
		height: 55vh;
	}

	.modal-content > h3 {
		font-size: 1em;
	}
}