@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/BebasNeue-Regular.ttf');
}

@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/SourceSansPro-Light.ttf');
	font-weight: 200;
}

@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/SourceSansPro-Regular.ttf');
	font-weight: 400;
}

@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/SourceSansPro-SemiBold.ttf');
	font-weight: 600;
}


html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*::before,
*::after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	overflow: auto;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	width: 100%;
	margin: 0;
	background-color: #191727;
	font-family: 'Source Sans Pro';
	font-size: 14px;
	font-weight: 400;
}

body button {
	cursor: pointer;
	-webkit-transition: -webkit-filter 0.2s ease-in-out;
	transition: -webkit-filter 0.2s ease-in-out;
	-o-transition: filter 0.2s ease-in-out;
	transition: filter 0.2s ease-in-out;
	transition: filter 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
}

@media (hover: hover) {
	body button:hover {
		-webkit-filter: brightness(0.9);
		filter: brightness(0.9);
	}
}

#banner .game-banner {
	background-color: #eb147a;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#banner .game-banner .banner-col {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 80%;
}

#banner .game-banner .banner-right {
	width: 31%;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

#banner .game-banner .logo {
	width: 35%;
	margin: 5%;
}

#banner .game-banner .logo img {
	width: 100%;
}

#banner .game-banner img.sock,
#banner .game-banner img.game-logo {
	width: 100%;
}

#banner .game-banner .divider {
	width: 12%;
	margin-bottom: 20px;
	border-top: 2px solid #fff;
}

#banner .game-banner .banner-content {
	margin-bottom: 15px;
}

#banner .game-banner .banner-content p {
	color: #fff;
	margin: 0;
	text-align: center;
}

#banner .game-banner .banner-button {
	height: 41.5px;
	width: 106.5px;
	margin: 15px 0;
	border-radius: 5px;
	font-size: 16px;
	border: none;
	outline: none;
	background-image: url('../img/button.png');
	background-size: 100%;
	background-repeat: no-repeat;
	font-family: 'Bebas Neue';
	color: #fff;
	letter-spacing: 0.05em;
}

#banner .game-banner .arrow-down {
	width: 20px;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin: 0 0 30px;
}

#banner .game-banner .banner-button:hover+.arrow-down {
	margin: 10px 0 20px;
}

#banner .shelter-banner {
	padding: 10px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #fff;
}

#banner .shelter-banner .shelter-logo {
	width: 165px;
}

.game-width-limiter {
	display: block;
	margin: auto;
	width: 100%;
	max-width: 800px;
}

.game-container * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.game-container::after {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content: url('../img/card-frames/front-matched.png') url('../img/card-frames/front-unmatched.png');
}

.game-container {
	position: relative;
	font-family: 'Bebas Neue';
	line-height: 1;
	padding: 4.3% 3% 13.3% 0;
	background-image: url('../img/background.png');
	background-size: 100%;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.game-header {
	width: 87.75%;
	margin-left: 12.25%;
	padding-bottom: 4%;
	font-size: 3.75vw;
	letter-spacing: 0.05em;
	position: relative;
	z-index: 1;
}

.game-header .gradient-box {
	padding-top: 0.7%;
}

.game-header #round {
	width: calc(22% - 1.15vw);
	margin-right: calc(4% + 0.575vw);
	float: left;
}

.game-header #sound {
	cursor: pointer;
	float: left;
	width: 5.9%;
}

.game-header #sound .line {
	display: none;
}

.game-header #sound.muted .line {
	display: block;
	width: 53%;
	position: absolute;
	left: 26%;
}

.game-header img.sound {
	width: 65%;
}

.game-header img.clock {
	position: absolute;
	left: 78%;
	z-index: 4;
	width: 6.8%;
}

.game-header img.clock.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
}

.game-header #timer {
	width: calc(19% - 1.15vw);
	float: right;
}

.gradient-box {
	text-align: center;
	border-radius: 1.1vw;
	background-color: #fff;
	-webkit-box-shadow: inset 0px 0px 4px 0px rgba(141, 62, 2, 0.35);
	box-shadow: inset 0px 0px 4px 0px rgba(141, 62, 2, 0.35);
	position: relative;
	margin: 0.575vw;
}

.gradient-box:before,
.gradient-box:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.gradient-box:before {
	z-index: -2;
	margin: -0.575vw;
	background-image: -webkit-gradient(linear, left top, right top, from(rgb(226, 161, 88)), to(rgb(251, 239, 219)));
	background-image: -o-linear-gradient(left, rgb(226, 161, 88) 0%, rgb(251, 239, 219) 100%);
	background-image: linear-gradient(90deg, rgb(226, 161, 88) 0%, rgb(251, 239, 219) 100%);
}

.gradient-box:after {
	z-index: -1;
	margin: -0.39vw -0.42vw;
	background-image: -webkit-gradient(linear, left top, right top, from(rgb(255, 214, 145)), to(rgb(251, 239, 219)));
	background-image: -o-linear-gradient(left, rgb(255, 214, 145) 0%, rgb(251, 239, 219) 100%);
	background-image: linear-gradient(90deg, rgb(255, 214, 145) 0%, rgb(251, 239, 219) 100%);
}

.game-board {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	z-index: 1;
}

.game-sidebar {
	width: 12.25%;
	font-size: 3.75vw;
	letter-spacing: 0.05em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.game-sidebar #point {
	color: #eb147a;
	width: calc(60.1% - 1.15vw);
	padding: 9.3% 0 4.3%;
}

.game-sidebar #point p {
	margin: 0;
}

.game-sidebar #point p.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.game-sidebar #fill-bar {
	width: calc(41% - 1.15vw);
	height: calc(92% - 0.575vw);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.game-sidebar #fill-bar::before,
.game-sidebar #fill-bar::after {
	margin-top: 0;
}

.game-sidebar #fill-bar img {
	width: 100%;
	position: absolute;
	height: 0;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: bottom;
	object-position: bottom;
	-webkit-transition: height 0.5s ease-out;
	-o-transition: height 0.5s ease-out;
	transition: height 0.5s ease-out;
}

.game-content {
	width: 87.75%;
}


/*
 * Styles for the deck of cards
 */


.deck {
	width: 100%;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.deck .card {
	width: 22%;
	margin: 2% 0;
	position: relative;
	color: #ffffff;
	border-radius: 10%;
	cursor: pointer;
	list-style: none;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	left: 0;
	top: 0;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

/* Dealing Cards */
.deck .card.not-shuffled {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

/* Card Columns */
.deck .card.not-shuffled:nth-child(4n+1) {
	left: -11.8vw;
}

.deck .card.not-shuffled:nth-child(4n+2) {
	left: -33.9vw;
}

.deck .card.not-shuffled:nth-child(4n+3) {
	left: -56.1vw;
}

.deck .card.not-shuffled:nth-child(4n+4) {
	left: -78.2vw;
}

/* Card Rows */
.deck .card.not-shuffled:nth-child(n+1):nth-child(-n+4) {
	top: -13.5vw;
}

.deck .card.not-shuffled:nth-child(n+5):nth-child(-n+8) {
	top: -35.8vw;
}

.deck .card.not-shuffled:nth-child(n+9):nth-child(-n+12) {
	top: -57.9vw;
}

.deck .card.not-shuffled:nth-child(n+13):nth-child(-n+16) {
	top: -80vw;
}

.deck .card:nth-child(-n+4) {
	margin-top: 0;
}

.deck .card:nth-child(n+13) {
	margin-bottom: 0;
}

.deck .card::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.deck .card .front,
.deck .card .back {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.deck .card .front {
	-webkit-transform: rotate3d(1, 1, 0, -180deg);
	transform: rotate3d(1, 1, 0, -180deg);
	background-image: url('../img/card-frames/front.png');
}

.deck .card.unmatched .front {
	background-image: url('../img/card-frames/front-unmatched.png');
	-webkit-animation-name: shake;
	animation-name: shake;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
}

.deck .card .back {
	z-index: 2;
	background-image: url('../img/card-frames/back.png');
}

.deck .card .front .sock {
	width: 45%;
	z-index: 1;
}

.deck .card .front .flare {
	width: 0;
	position: absolute;
}

.deck .card.open {
	-webkit-transform: rotate3d(1, 1, 0, -180deg);
	transform: rotate3d(1, 1, 0, -180deg);
}

.deck .card.matched .front {
	background-image: url('../img/card-frames/front-matched.png');
}

.deck .card.matched .front .flare {
	width: 200%;
	-webkit-transition: width 0.5s ease-out;
	-o-transition: width 0.5s ease-out;
	transition: width 0.5s ease-out;
}

.deck .card.disabled {
	pointer-events: none;
}

/*
 * Styles for congratulations modal
 */

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 34.5%;
	background: rgba(25, 23, 39, 0.47);
	-webkit-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
}

.overlay:target {
	visibility: visible;
	opacity: 1;
}

.ribbon {
	background-image: url('../img/popup/ribbon.png');
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	height: 7%;
	z-index: 2;
	left: 30%;
	right: 30%;
	top: 27%;
	text-align: center;
	font-size: 3.75vw;
	letter-spacing: 0.05em;
	line-height: 2.2;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.ribbon.small {
	font-size: 3.35vw;
	line-height: 2.3;
}

.popup {
	margin-left: calc(26% + 0.575vw);
	margin-right: calc(23.5% + 0.575vw);
	padding: 4.2% 1.5% 2%;
	background: #ffffff;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.overlay.show {
	visibility: visible !important;
	opacity: 1 !important;
}

.overlay.show .ribbon,
.overlay.show .popup {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	-webkit-transition: -webkit-transform 0.2s ease-in-out;
	transition: -webkit-transform 0.2s ease-in-out;
	-o-transition: transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.popup-content {
	width: 60.7%;
	padding: 0 5%;
}

.popup #popup-content {
	margin: 0;
	text-align: left;
	font-family: 'Source Sans Pro';
	font-size: 1.6vw;
	line-height: 1.1;
	letter-spacing: 0.05em;
	font-weight: 600;
	white-space: pre-line;
}
.popup #popup-content a {
	color: inherit;
	text-decoration: none;
}

.popup-buttons-wrapper {
	margin-top: 7%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.popup-buttons-wrapper .popup-button {
	width: 44%;
	border: none;
	outline: none;
	border-radius: 0.5vw;
	background-image: url('../img/popup/button.png');
	background-size: 100%;
	background-repeat: no-repeat;
	font-family: 'Bebas Neue';
	color: #fff;
	padding: 3.1% 0 1.5%;
	font-size: 2.3vw;
	letter-spacing: 0.05em;
	z-index: 1;
}

.popup .popup-images-wrapper {
	width: 39.3%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
}

.popup .popup-images-wrapper img#popup-img {
	width: 100%;
	z-index: 1;
}

.popup .popup-images-wrapper img.clock-face {
	position: absolute;
	width: 100%;
	height: 0;
	bottom: 0;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: bottom;
	object-position: bottom;
}

.overlay.show.clock-animation .popup .popup-images-wrapper img.clock-face {
	-webkit-transition: height 1s ease-out;
	-o-transition: height 1s ease-out;
	transition: height 1s ease-out;
	height: 100%;
}

.popup .popup-images-wrapper img.flare {
	position: absolute;
	width: 0;
	margin-top: 50%;
	margin-left: 50%;
}

.overlay.show .popup .popup-images-wrapper img.flare {
	width: 200%;
	-webkit-transition: width 1s ease-out;
	-o-transition: width 1s ease-out;
	transition: width 1s ease-out;
}

footer {
	padding: 60px 0 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #a4a4a4;
}

footer .logo {
	width: 125px;
}

footer .shelter-logo {
	width: 130px;
	margin: 40px 0;
}

footer .legal-link {
	margin-top: 0;
	margin-bottom: 25px;
	color: #a4a4a4;
	text-decoration: none;
}

footer .legal-text {
	margin: 0;
	font-weight: 200;
}

/* animations */
@-webkit-keyframes flipInY {
	from {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

@keyframes flipInY {
	from {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

@-webkit-keyframes pulse {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.3, 1.3, 1.3);
		transform: scale3d(1.3, 1.3, 1.3);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.3, 1.3, 1.3);
		transform: scale3d(1.3, 1.3, 1.3);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes shake {

	10%,
	90% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(-1px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(2px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(2px, 0, 0);
	}

	30%,
	50%,
	70% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(-4px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(-4px, 0, 0);
	}

	40%,
	60% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(4px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(4px, 0, 0);
	}
}

@keyframes shake {

	10%,
	90% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(-1px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(2px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(2px, 0, 0);
	}

	30%,
	50%,
	70% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(-4px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(-4px, 0, 0);
	}

	40%,
	60% {
		-webkit-transform: rotate3d(1, 1, 0, -180deg) translate3d(4px, 0, 0);
		transform: rotate3d(1, 1, 0, -180deg) translate3d(4px, 0, 0);
	}
}

/* Tablet and Desktop */
@media (min-width: 768px) {
	#banner .game-banner {
		background-image: url('../img/banner-background.png');
		min-height: 100vh;
		background-attachment: fixed;
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: 100%;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	#banner .game-banner .banner-left {
		width: 31%;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	#banner .game-banner .banner-center {
		width: 38%;
	}

	#banner .game-banner .logo {
		margin: 10%;
	}

	#banner .game-banner .divider {
		margin-bottom: 50px;
	}

	#banner .game-banner .banner-content {
		margin-bottom: 30px;
	}

	#banner .game-banner .banner-content p {
		font-size: 22px;
	}

	#banner .game-banner .banner-button {
		height: 83px;
		width: 213px;
		margin: 30px 0;
		border-radius: 10px;
		font-size: 48px;
	}

	#banner .game-banner .arrow-down {
		width: 30px;
	}
}

/* Screen larger than max game width
****************/

@media (min-width: 800px) {
	.game-header {
		font-size: 30px;
	}

	.game-header #round {
		width: calc(22% - 9.2px);
		margin-right: calc(4% + 4.6px);
	}

	.game-header #timer {
		width: calc(19% - 9.2px);
		float: right;
	}

	.game-sidebar {
		font-size: 30px;
	}

	.game-sidebar #point {
		width: calc(60.1% - 9.2px);
	}

	.game-sidebar #fill-bar {
		width: calc(41% - 9.2px);
		height: calc(92% - 4.6px);
	}

	.gradient-box {
		border-radius: 8.8px;
		margin: 4.6px;
	}

	.gradient-box:before {
		margin: -4.6px;
	}

	.gradient-box:after {
		margin: -3.12px -3.36px;
	}

	/* Dealing Cards */
	.deck .card.not-shuffled:nth-child(4n+1) {
		left: -94.4px;
	}

	.deck .card.not-shuffled:nth-child(4n+2) {
		left: -271.2px;
	}

	.deck .card.not-shuffled:nth-child(4n+3) {
		left: -448.8px;
	}

	.deck .card.not-shuffled:nth-child(4n+4) {
		left: -625.6px;
	}

	.deck .card.not-shuffled:nth-child(n+1):nth-child(-n+4) {
		top: -108px;
	}

	.deck .card.not-shuffled:nth-child(n+5):nth-child(-n+8) {
		top: -286.4px;
	}

	.deck .card.not-shuffled:nth-child(n+9):nth-child(-n+12) {
		top: -463.2px;
	}

	.deck .card.not-shuffled:nth-child(n+13):nth-child(-n+16) {
		top: -640px;
	}

	/* Popup */
	.ribbon {
		font-size: 30px;
	}

	.ribbon.small {
		font-size: 26.8px;
	}

	.popup {
		margin-left: calc(26% + 4.6px);
		margin-right: calc(23.5% + 4.6px);
	}

	.popup #popup-content {
		font-size: 12.8px;
	}

	.popup-buttons-wrapper .popup-button {
		border-radius: 4px;
		font-size: 18.4px;
	}
}