.center{
	text-align: center;
}

.hidden {
	display: none !important;
}

.column.is-centered {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.text-align-right {
	text-align: right;
}

.logo {
	color: white;
}

.question-image {
	border-radius: 5px;
	max-height: 128px;
	max-width: 100%;
	width: auto !important;
}

#game-wrapper {
	position: relative;
	width: 100%;
	height: 64vw;
	overflow: hidden;
}

#game {
	position: absolute;

	width: 100%;
	height: 63.97vw;
	background: url("../images/the-map.jpg");
	background-size: 100% 100.9%;

	display: grid;
	grid-template-columns: repeat(50, 2%);
	grid-template-rows: repeat(30, 3.33%);

}

.square {
	display: flex;

	overflow: hidden;
	justify-content: center;
	align-items: center;

	font-size: 90%;

	white-space: nowrap;

}
.square .coordinates span {
	display: none;
	white-space: nowrap;
	padding:0;
	margin:0;
}
.square .coordinates span.show {
	display: inline;
}

.square.clickable:hover {
	cursor: pointer;
	background-color: rgba(220, 20, 60, 0.5);
	box-shadow: 0 0 2px 2px rgba(220, 20, 60, 0.5);
}

.square.clickable:hover .coordinates span{
	display: inline;
}

.square.highlight-correct {
	background-color: rgba(38, 191, 11, 0.5);
	animation-name: shine-correct;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes shine-correct {
	0%   {box-shadow: none}
	50%  {box-shadow: 0 5px 15px rgba(46, 236, 13, 0.5);background-color: rgba(46, 236, 13, 0.5);}
	100%   {box-shadow: none}
}

.square.highlight-guess {
	background-color: rgba(255, 140, 0, 0.5) !important;
	animation-name: shine-guess;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes shine-guess {
	0%   {box-shadow: none}
	50%  {box-shadow: 0 5px 15px rgba(246, 202, 42, 0.5);background-color: rgba(246, 202, 42, 0.5);}
	100%   {box-shadow: none}
}

.facebook {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.current-time {
	font-size: 40%;
	font-weight: normal;
}

.zoom-wrapper  {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.zoom-wrapper span, .zoom-wrapper a {
	margin: 5px 5px;
}