header{
	top: 0;
	left: 0;
	height: var(--menuButtonSideLength);
	width: 100%;
	z-index: 1;
	position: fixed;
	background: var(--nimmtPurple);
	visibility: hidden;
	color: white;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

#headerContent{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	font-size: calc(var(--menuButtonSideLength) * 0.8);
	margin-left: 75px;
	font-family: 'Yanone Kaffeesatz';
}

.headerButton{
	font-size: 0.7em;
	border-radius: 0.5em;
	padding: 0.2em;
	background: rgba(200, 200, 200,1);
	color: rgba(128, 128, 128,1);
}

.selectedHeaderButton{
	color: white;
	background: rgba(0, 0, 0, 0.3);
}

.selectedHeaderButton:hover {
	background: var(--lightPurple);
	color: white;
}

#game {
	display: flex;
	visibility: hidden;
	margin-top: var(--menuButtonSideLength);
}

.gallery {
	background: transparent;
	width: 100%;
}

.galleryCell {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background: transparent;
}

#scoreboard{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: calc(var(--margin)/2);
	font-family: 'Yanone Kaffeesatz';
}

.scoreboardElement{
	margin: calc(var(--margin)/2);
	border-radius: var(--radius);
	color: rgba(255, 255, 255, 1); 
	background: rgba(110, 70, 127, 1);
}

.pink{
	color: rgba(235, 117, 117, 1);
}

/* This container is just so the play card button wont show wider than necessary on some browsers*/
#handMessageContainer{
	display: flex;
	flex-flow: row;
	font-family: 'Bangers'; 
	color: rgba(255, 255, 255, 1); 
}

#playCardButton{
	border-radius: 0.5em;
	padding: 0.5em; 
	background: rgba(0, 0, 0, 0.3); 
	display: none;
}
 
#selectCardMessage{ 
	display: none;
} 

#notTimeToPlayCardMessage{
	display: none;
}

.flickity-button {
	color: white;
	background: hsla(0, 0%, 100%, 0.15);
}

.flickity-button:hover {
	background: hsla(0, 0%, 100%, 0.25);
  }

.flickity-prev-next-button {
	width: 20px;
	height: 20px;
	border-radius: 5px;
}