/*
Cool palettes:
Warm Reds
https://colorhunt.co/palette/dd5353b73e3edbc8aceddbc0
https://colorhunt.co/palette/781d42a3423cde834df0d290
https://colorhunt.co/palette/8c0000bd2000fa1e0effbe0f

Blues:
https://colorhunt.co/palette/7fbcd2a5f1e9e1ffeeffeeaf
https://colorhunt.co/palette/7fbcd2a5f1e9e1ffeeffeeaf

*/

/* #region Font */

@font-face {
	font-family: 'PT Sans Narrow';
	src: url(./fonts/PTSansNarrow-Regular.ttf);
}

@font-face {
	font-family: 'Jost Medium';
	src: url(./fonts/Jost-Medium.ttf);
}

/* #endregion Font */

/* #region HTML */

html {
	/* min-height: 100vh; */
	margin: 0px;
	padding: 0px;
	font-family: 'Jost Medium'; /*, 'PT Sans Narrow', 'NotoSans SC'; */
}

footer {
	text-align: center;
	margin: auto;
	padding-top: 20%;
}

/* #endregion HTML */

/* #region Media Queries */

@media (max-width: 800px) {
	#title {
		font-size: 3em;
	}
}

/* #endregion */

/* #region Main Panels */

#panel {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	background: rgb(117, 222, 112);
	background: radial-gradient(circle at bottom, rgb(230, 255, 146) 0%, rgb(128, 245, 122) 66%);
}

#panel-header {
	border-bottom: 10px dotted #4477d0;
	margin-bottom: 25px;
}

#panel-body {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

/*
#panel-footer {

}
*/

.panel-title {
	color: #354259;
	font-size: 3em;
	text-align: center;
	margin: 0;
	text-decoration: underline;
	width: 100%;
}


/* #endregion Main Panels */

/* #region General */

#body {
	background: rgb(117, 222, 112);
	background: radial-gradient(circle at bottom, rgb(230, 255, 146) 0%, rgb(128, 245, 122) 66%);
	margin: 0;
}

#title {
	/* font-family: 'Jost Medium'; */
	text-align: center;
	font-size: 4em;
	color: #354259;
	margin: 0px;
	padding: 0px;
}

.no-list-style {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.panel {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.label {
	font-size: 3em;
	margin: 0px;
	padding: 0px;
	color: #354259;
}

/* #endregion General */

/* #region Player */

/*
#player-name {
	animation-timing-function:cubic-bezier(1, 0, 0, 1);
}
*/

#player-leader {
    height: 64px;
    width: 64px;
    text-align: center;
    vertical-align: top;
	margin-left: 10px;
	display: none;
}

/* #endregion Player */

/* #region Join */

#room-code {
	text-transform: uppercase;
}

/* #endregion Join */

/* #region Section */

#pre-game-info {
	margin: 25px 0px;
	color: #354259;
	font-size: 1.5em;
	text-align: center;
	border: 5px solid #4477d0;
	background-color: #f9f9f9;
}

.pre-game-info-title {
	padding: 0;
	margin: 0;
	text-decoration: underline;
}

.pre-game-info-data {
	padding: 0;
	margin: 0;
	font-size: 1.5em;
}

#section-player-name {
	text-align: center;
	color: #4477d0;
	border-top: 10px solid #354259;
	border-bottom: 10px solid #354259;
	background-color: #f9f9f9;
	display: none;
}

#section-change-back {
	margin-top: 50px;
}

.section-label {
	text-align: center;
	font-size: 3em;
}

.section-turn-start-instructions {
	display: none;
}

#section-pre-game,
#section-turn-answer {
	width: 80%;
	margin: auto;
}

.section-pre-game-panel-title {
	color: #354259;
	padding: 0;
	margin: 0;
	text-align: left;
	font-size: 3em;
}

#section-turn-panel,
#section-non-leader,
#section-winner,
#section-loser {
	/* font-family: 'PT Sans Narrow'; */
	text-align: center;
}

.section-non-leader-fieldset {
	border: 7px;
	/* font-family: 'PT Sans Narrow'; */
}

/* #endregion Section */

/* #region Error */

#error-info {
	color: #354259;
	font-size: 2em;
	text-align: center;
}

/* #endregion Error */

/* #region Input */

input:focus, textarea:focus {
	outline: none;
}

.input {
	font-family: 'Jost Medium';
	font-size: 3em;
	border-radius: 10px;
}

.input-field {
	width: 99%;
	text-align: center;
	border-style: solid;
	border-width: 7px;
	border-color: #354259;
	background-color: #f9f9f9;
	color: #111;
	margin: 0px;
	padding: 0px;
}

.input-button {
	color: #ebe2d1;
	background-color: #4477d0;
	border: none;
	text-align: center;
	width: 100%;
	height: 100px;
	border-bottom-color: #CDC2AE;
	border-bottom-width: 5px;
	margin: 10px 0px 10px 0px;
	cursor: pointer;
}

.input-button-disabled {
	background-color:#949494;
}

/* #endregion Input */

/* #region Button */

.green-button {
	background-color: #1dc041;
}

.red-button {
	background-color: #8f2126;
}

/* #endregion Button */

/* #region Letter */

#letter-list {
	text-align: center;
}

.letter-list-entry {
	width: 100px;
	height: auto;
	font-size: 3em;
	font-family: 'Jost Medium';
	font-weight: bold;
	text-align: center;
	background-color: #4477d0;
	color: #ebe2d1;
	padding: 0px;
	margin: 5px;
	border-radius: 10%;
	cursor: pointer;
	user-select: none;
	/*
	border-color: #354259;
	border-width: 5px;
	border-style: outset;
	*/
	display: inline-block;
}

.letter-list-hr {
	margin: 1px;
	border-color: #354259;
}

/* #endregion Letter */

/* #region Turn List */

.turn-list-entry {
	font-size: 1.2em;
}

.turn-list-entry-table {
	border-collapse: collapse;
	width: 40%;
	margin: auto;
}

.turn-list-entry-actor-name {
	background-color: #358259;
}

.turn-list-entry-score {
	background-color: #359259;
}

.turn-list-entry-player-name {
	background-color: #35a259;
}

.turn-list-entry-objection-failed {
	background-color: #35d259;
}

/* #endregion Turn List */

/* #region Option */

#option-panel {
	background-color: #4477d0;
	width: 100%;
	/*
	vertical-align: bottom;
	position: absolute;
	bottom: 0;
	*/
}

.option-entry {
	display: inline-block;
	height: 100px;
	line-height: 100px;
	text-align: center;
	width: 20%;
	cursor: pointer;
	color: #ebe2d1;
	background-color: #4477d0;
	font-size: 0.5em;
}

.option-entry-selected {
	background-color: #354259;
}

/* #endregion Option */