.container-background {
	height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.container-foreground {
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.img-container-trump-initial {
	height: 100%;
	position: absolute;
	left: -10%;
}

.img-container-biden-initial {
	height: 100%;
	position: absolute;
	right: -10%;
}

.container-background>div>img {
	height: 100%;
}

.trump-slide {
	animation: trump-slide 1s;
	animation-fill-mode: forwards;
}

@keyframes trump-slide {
	from {
		transform: translate(0px, 0px);
	}
	to {
		transform: translate(-70px, 0px);
	}
}

.biden-slide {
	animation: biden-slide 1s;
	animation-fill-mode: forwards;
}

@keyframes biden-slide {
	from {
		transform: translate(0px, 0px);
	}
	to {
		transform: translate(70px, 0px);
	}
}

.modal {
	height: 90vh;
	margin-top: 5vh;
	margin-bottom: 5vh;
}

.modal-content {
	background: none;
	border: none;
}

#modal-difficulty-menu-header {
	font-size: 2.25rem;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.modal-content ul li {
	list-style: none;
	line-height: 1.25rem;
}

.opt input[type="radio"] {
	position: fixed;
	opacity: 0;
	pointer-events: none;
}

.opt input[type="radio"]:checked~label {
	font-size: 1.75rem;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

#game-btn {
	color: black;
	background: white;
	border: solid 6px black;
	margin: 4px auto;
	font-size: 1.5rem;
	width: 33vw;
	animation: shake 0.75s;
	animation-iteration-count: infinite;
}

#game-btn:hover {
	animation: shake 0.5s;
	animation-iteration-count: infinite;
	text-decoration: none;
	border-width: 8px;
}

.row-top {
	height: 15vh;
}

.box span,
.box i {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	line-height: 1;
	margin: 10px auto;
}

.row-fixed {
	width: 100%;
	position: fixed;
	bottom: 5%;
}

.box {
	border-width: 6px;
	border-style: solid;
	margin: 4px;
}

.box-game {
	font-size: 1.5rem;
}

.box-trump {
	border-color: red;
	background: rgba(250, 250, 250, 0.5);
}

.box-biden {
	border-color: blue;
	background: rgba(250, 250, 250, 0.5);
}

.box-user-info,
.box-user-info-volume-on,
.box-user-info-volume-off {
	font-size: 0.85rem;
	color: black;
	border-color: black;
	background: white;
}

a.box-user-info:hover {
	color: black;
	text-decoration: none;
}

button {
	border: none;
	background: none;
}

.box-trump-1 {
	transform: translate(-4px, 2px) rotate(-5deg);
}

.box-biden-1 {
	transform: translate(-4px, 5px) rotate(5deg);
}

.box-trump-2 {
	transform: translate(-2px, 2px) rotate(-1deg);
}

.box-biden-2 {
	transform: translate(-2px, 6px) rotate(-1deg);
}

.box-trump-3 {
	transform: translate(-2px, 4px) rotate(5deg);
}

.box-biden-3 {
	transform: translate(5px, 10px) rotate(-7deg);
}

.text-pop {
	font-size: 1.75rem;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

/*https://www.w3schools.com/howto/howto_css_shake_image.asp*/
.shake {
	animation: shake 0.5s;
}

.long-shake {
	animation: shake 0.5s infinite;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}
	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}
	30% {
		transform: translate(3px, 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(3px, 1px) rotate(-1deg);
	}
	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}
	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

/* Media queries */
@media (min-width: 600px) {
	.img-container-trump-initial {
		left: -5%;
	}
	.img-container-biden-initial {
		right: -5%;
	}
}

@media (min-width: 768px) {
	.img-container-trump-initial {
		left: 0;
	}
	.img-container-biden-initial {
		right: 0;
	}
	.box-game {
		font-size: 1.65rem;
	}
	.box-user-info,
	.box-user-info-volume-on,
	.box-user-info-volume-off {
		font-size: 1.35rem;
	}
	.text-pop {
		font-size: 2rem;
	}
    .row-top {
		height: 5vh;
	}
}

@media (min-width: 992px) {
	.container-background {
		height: 70vh;
		margin: 15vh 0 0 0;
		border: solid black 16px;
	}
	.container-foreground {
		height: 70vh;
	}
	.modal-dialog {
		max-width: 700px;
	}
	#modal-difficulty-menu-header {
		font-size: 3rem;
		text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
	}
	.opt input[type="radio"]~label {
		font-size: 2rem;
		line-height: 30px;
	}
	.opt input[type="radio"]:checked~label {
		font-size: 2.25rem;
	}
	.row-fixed {
		bottom: 20%;
	}
	.box {
		border-width: 8px;
	}
	.box-game {
		font-size: 2.25rem;
	}
	.box-user-info,
	.box-user-info-volume-on,
	.box-user-info-volume-off {
		font-size: 2rem;
	}
	.box span,
	.box i {
		margin: 14px auto;
	}
	.text-pop {
		font-size: 2.75rem;
		text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
	}
}

@media (min-width: 1200px) {
	#modal-difficulty-menu-header {
		font-size: 3.25rem;
	}
	.opt input[type="radio"]~label {
		font-size: 2.25rem;
		line-height: 35px;
	}
	.opt input[type="radio"]:checked~label {
		font-size: 2.5rem;
	}
	#game-btn {
		font-size: 2.5rem;
	}
}

@media (min-width: 1350px) {
	#modal-difficulty-menu-header {
		font-size: 3.5rem;
	}
	.opt input[type="radio"]~label {
		font-size: 2.5rem;
		line-height: 40px;
	}
	.opt input[type="radio"]:checked~label {
		font-size: 2.75rem;
	}
	#game-btn {
		font-size: 2.75rem;
	}
	.row-fixed {
		bottom: 22.5%;
	}
	.box {
		border-width: 10px;
	}
	.box-game {
		font-size: 2.75rem;
	}
	.box-user-info,
	.box-user-info-volume-on,
	.box-user-info-volume-off {
		font-size: 2.5rem;
	}
	.box span,
	.box i {
		margin: 16px auto;
	}
	.text-pop {
		font-size: 3.25rem;
		text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;
	}
}