html,
body { 
	background-image: url("img/joker_wallpaper.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center, center; 
	background-size: cover;
	background-color: #f8f8f8;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

html,
body {
	height:100%;
	font-size: 1.25em;
}

.footer {
	margin-bottom:.5em;
	margin-left:.5em;
	margin-right:.5em;
}
.suggestion-display {
	margin-top: 2em;
}

.suggestion-image-display {
	display:none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway',sans-serif;
	font-weight: 800;
}

.suggestion-text-display { 
	font-size: 3.6em;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
@media (max-width: 992px) {
    .suggestion-text-display{font-size: 3em;}
}
@media (max-width: 768px) {
    .suggestion-text-display{font-size: 2.1em;}
}
@media (max-width: 450px) {
    .suggestion-text-display{font-size: 1.8em;}
}
@media (max-width: 350px) {
    .suggestion-text-display{font-size: 1.4em;}
}
.bottom-button {
	font-size: 2.5em;
}
@media (max-width: 768px) {
	.bottom-button {
		font-size: 1.3em;
	}
}

.credits {
	font-size: .8em;
	color: #bbb;
}

.options-modal-header {
	padding-bottom: .3em;
    padding-top: .3em;
}
.options-modal-footer {
	padding: .2rem;
}