:root {
	--minContainerHeight: 650px;
	--topRightRowHeightPercentage:45%;
	--bottomRightRowHeightPercentage:55%;
	--header-1-font-size:24px;
	--header-2-font-size:18px;
	--header-padding:15px;
	--nav-bar-height: calc(var(--header-1-font-size) + (var(--header-padding) * 2));
	--accent-text:sans-serif;
	--primary-text:sans-serif;
	--rich-black:#01161E;
	--midnight:#124559;
	--air-force:#598392;
	--ash-gray:#AEC3B0;
	--beige:#EFF6E0;

  }



  *,html,body{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:var(--primary-text);
  }
  body{
	background-color:var(--air-force);
  }
  .module{
	min-height:calc(var(--minContainerHeight) * var(--topRightRowHeightPercentage));
	border:1px solid var(--ash-gray);
	border-radius:18px;
	background-color:white;

	box-sizing:border-box;
	overflow:hidden;
  }

  .module h2{
	width:100%;
	display:block;
	padding:var(--header-padding) 0;
	background-color:var(--beige);
	text-align:center;
	font-family:var(--accent-text);
	font-weight:bold;
	color:var(--rich-black);
	margin:auto;
	font-size:var(--header-2-font-size);
  }

  .score{
	font-size:15px;
	font-weight:bold;
	text-align: center;
	font-family:var(--accent-text);
  }


  nav{
	display:block;
	background-color:var(--midnight);
	padding:var(--header-padding);
	height:var(--nav-bar-height);
	display:flex;
	flex-direction:column;
	justify-content:center;
	box-sizing:border-box;
	color:white;
  }

  .nav-container{
	width: 100%; /* Full viewport width */
	max-width:1300px;
	margin:0 auto;
	padding:0 5%;
	display:flex;
	
  }

  .hold-auth a{
	color:white;
  }

  .hold-auth a:hover{
	text-decoration:none;
  }

  nav h1{
	color:white;
	font-family:var(--accent-text);
  }

  nav h1 a {
	color: white;
	text-decoration: none;
	}

	nav h1 a:hover {
	text-decoration: underline;
	}

  .container {
	min-height: var(--minContainerHeight);
	height: calc(100vh - var(--nav-bar-height)); /* Full viewport height */
	width: 100%; /* Full viewport width */
	max-width:1300px;
	display: grid;
	grid-template-rows: var(--topRightRowHeightPercentage) var(--bottomRightRowHeightPercentage); /* Two rows, each taking 50% of height */
	grid-template-columns: 50% 50%; /* Two columns, each taking 50% of width */
	box-sizing:border-box;
	padding:2.5% 5%;
	margin:auto;
}

.general-container{
	min-height: var(--minContainerHeight);
	height: calc(100vh - var(--nav-bar-height)); /* Full viewport height */
	width: 100%; /* Full viewport width */
	max-width:1300px;
	box-sizing:border-box;
	padding:2.5% 5%;
	margin:auto;
}

.box{
	padding:10px;
	box-sizing:border-box;
	gap:10px;
}

.box-1 {
	grid-row: 1 / 3; /* Spans both rows */
	grid-column: 1 / 2; /* Stays in the left column */
	display:flex;
	flex-direction:column;
}

/*box-1 Modules*/

.previous-cycle,.current-cycle, .scores {
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

.cycle-row {
	width:100%;
	height:100%;
	flex-shrink:1;
	display: flex;
	box-sizing: border-box; /* Include padding in calculations */
	margin:auto;
	gap:5%;
	justify-content: space-evenly;
	justify-items: center;
	align-content: space-evenly;
	align-items: center;
	overflow:hidden;
}

.cycle-row .hold-player-info {
	max-height:100%;
	width:100%;
	border-right: 1px solid var(--ash-gray); /* Add vertical line to the right of each image */
	flex:1 1 0;
	padding:5% 5% 5% 0%;
	display:flex;
	flex-direction:column;
	overflow:hidden;

}

.cycle-row .hold-player-info h3{
	font-family:var(--accent-text);
	text-align:center;
	font-size:15px;
	flex-shrink:1;
	margin:0px auto 10px;
	font-weight:normal;
}

.cycle-row .hold-player-info img{
	width:100%;
	height:100%;
	object-fit: contain; /* Scale to fill the grid cell without distortion */
	display: block; /* Eliminate whitespace around images */
	margin:0;
	padding:0;


}
.cycle-row .hold-player-info .score{
	width:100%;
	height:100%;
}

.cycle-row .hold-player-info:last-child {
	border-right: none; /* Remove the border from the last image */
	padding-right:0;
}

.module.scores{

	min-height:150px;
	flex-grow:0;
}

.box-2 {
	grid-row: 1 / 2; /* Top row */
	grid-column: 2 / 3; /* Right column */
	display:flex;
}

/*box-2 Modules*/
.choice-options{
	display: flex;
	flex-direction: column;
	flex-grow:1;
}
.hold-login{
	padding:10px;
}
.choice-options .hold-images,.previous-cycle .hold-images,.current-cycle .hold-images, .scores .hold-scores,  .instructions .hold-instructions, .announcements .hold-announcements, .login .hold-login{
	flex-grow:1;
	display: flex; /* Use flexbox for centering */
	align-items: center; /* Center vertically */
	justify-content: center; /* Center horizontally */
	box-sizing: border-box;
	overflow:hidden;
	margin:10px;
	max-height:100%;
	max-width:100%;
}


.game-controls{
  flex: 0 1 150px;
  display: flex;
  flex-direction: column;
}
.controls {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  margin: 10px;
  max-height: 100%;
  max-width: 100%;
  flex-direction: column;
}
.controls button,.choice-options button,.button {

  display: block;
  background-color: var(--midnight);
  color: white;
  padding: 10px;
  margin: 5px;
  border: 1px var(--rich-black) solid;
  border-radius: 10px;
  font-family: var(--primary-text);
  font-size: 18px;
  text-decoration:none;
  text-align:center;
}

.box-3 {

	grid-row: 2 / 3; /* Bottom row */
	grid-column: 2 / 3; /* Right column */
	display:flex;
	flex-direction:column;
}

/*box-3 Modules*/
.chat{
	flex-grow:1;
}

.image-container {
	width:100%;
	height:100%;
	flex-shrink:1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Responsive columns */
	box-sizing: border-box; /* Include padding in calculations */
	margin:auto;
	gap:5px;
	justify-content: space-evenly;
	justify-items: center;
	align-content: space-evenly;
	align-items: center;
	overflow:hidden;

}

.image-container img {
	width:100%;
	height:100%;
	object-fit: contain; /* Scale to fill the grid cell without distortion */
	display: block; /* Eliminate whitespace around images */
	margin:0;
	padding:0;
}
.hold-details {
	display: flex;
	flex-direction: column;
	flex-grow:1;
	}

.hold-details input {
	margin: 10px 0;
	padding: 5px;
	border-radius: 5px;
	box-shadow: none;
	border: 1px solid var(--ash-gray);
	}
	.hold-details input[type="submit"], .hold-details .button {
	background-color: var(--midnight);
	color: white;
	border: 1px solid var(--rich-black);
	}
	.hold-details input[type="submit"]:hover, .hold-details .button:hover {
	background-color: var(--rich-black);
	}

	.login-register {
		width: 50%;
		margin: 0 auto;
		height: 50%;
		width: 275px;
		display: flex;
		flex-direction: column;
		height: auto;
  
	  }

	.hold-auth {
		align-self:center;
		flex-grow: 1;
		text-align: right;
	}

	.info-button {
		flex: 1 1 0;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		border: 2px solid var(--midnight);
		background-color: white;
		font-weight: bold;
		color: var(--midnight);
		height: 50%;
	  }
	
	  .hold-lr-fields {
		display: flex;
		gap: 10px;
	}
		
	.hold-details input {
		width: 100%;
		flex-grow: 1;
	}

	.tippy-content ul {
		margin: 20px;
	}

	.tippy-box {
		margin-left: 20px;
	}

	.tooltip-wrapper {
		width: ;
		flex-basis: 30px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		overflow: hidden;
	}

	.error {
		font-size: small;
		padding: 5px;
		border: 1px solid red;
		border-radius: 5px;
		margin: 0px 0 20px;
		background-color: rgba(225,0,0,0.1);
	}

	.manage-box {
		min-height:200px;
		max-width: 800px;
		margin: 20px auto;
		display: flex;
		flex-direction: column;
	}

	#participant-select {
		display: flex;
		flex-direction: column;
	}

	.participant-list {
		justify-content: center;
		display: flex;
		flex-grow: 1;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

	.manage-details {
		flex-grow: 1;
	}

	.game-list {
		margin: 20px;
		text-align: left;
	}

	.game-button {
		display: inline-block;
		font-size: 15px;
		margin-left:0;
	  }

	  .downloads {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		margin: 20px;
	  }

	  .download-error{
		margin:20px;
	  }

/* Mobile Styles */
@media (max-width: 780px) {
	.tippy-box {
		margin-left: unset;
	}
	.hold-chat textarea {

		min-height: 200px;
		overflow-y: scroll;
	}
	.container {
		width:100%;
		height:unset;
		grid-template-rows: auto; /* Adjust to content */
		grid-template-columns: 100%; /* Single column layout */
	}

	.box{
		padding:0;
		gap:0;
	}

	.login-register.module {
		margin: 0 auto;
		min-height:auto;
	}
	.module{
		margin:5px;
		min-height: 300px;
	}
	.box-1 {
		grid-row: 2; /* Second on mobile */
		grid-column: 1; /* Full width */
	}

	.box-2 {
		grid-row: 1; /* First on mobile */
		grid-column: 1; /* Full width */
		flex-direction:column;
	}

	/*box-2 modules*/

	.choice-options{
		order:2;
	}

	.game-controls{
		flex: 1 1 100%;
		order:1;
	}

	.box-3 {
		grid-row: 3; /* Third on mobile */
		grid-column: 1; /* Full width */
	}



 }

 .hold-chat {
	flex-grow: flex;
	flex-direction: column;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	height: 100%;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	margin: 10px;
	max-height: 100%;
	max-width: 100%;
  }

  .hold-chat textarea {
	flex-grow: 1;
	width: 100%;
	border: none;
	resize: none;
	overflow-y: scroll;
  }

  #chat-message-input {
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	box-shadow: none;
	border: 1px solid #777777;
	margin: 10px;
  }
  #chat-message-submit {
	width: 100%;
	border: 1px solid var(--ash-gray);
	background-color: var(--beige);
	border-radius: 10px;
	padding: 10px;
	cursor:pointer;
  }
  #message-target {
	align-self: flex-end;
  }
  #chat-message-submit:hover {
	color:white;
	background-color:var(--midnight);
  }
  .chat {
	display: flex;
	flex-direction: column;
  }

/*.selected-choice {
	border: solid 5px black;
}
table{
	border: solid 1px black;
	min-width: 100%;
}
tr{
	border: solid 1px black;
}
td{
	border: solid 1px black;
	text-align: center;
}
img{
	width: 8vw;
	height: 8vw;
	max-width: 155px;
	min-width: 100px;
	max-height: 155px;
	min-height: 100px;
}
div{
	background-color: white;
}
.flex-body{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: 90%;
}
.flex-col{
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 35%;
	border: black 1px solid;
}
.manager-flex-col{
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex-grow: 1;
	border: black 1px solid;
}
#col-1{
	gap: 40px;
	margin: 20px;
}

#banner-div{
	text-align: center;
	width: 100%;
	background-color: lightgrey;
}
#chat-div{
	display: flex;
	flex-direction: column;
	max-height: 85%;
}
#top-cols-div{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-evenly;
	align-items: center;
}
#choice-table-div{
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}
.chat-send-row-div{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 50%;
	width: 100%;
}
#chat-col-2-container-div{
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#chat-message-input{
	width: 100%;
}
.instructions-div{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	gap: 20px;
}
.not-turn{
	opacity: .5;
}
#header-div{
	background-color: lightgrey;
	width: 100%;
}
.button {
  background-color: #993685;
  color: white;
  border: 3px solid #993685;
  font-size: 24px;
  text-decoration: none;
  padding: 8px 24px;
  border-radius: 3px;
  transition: .3s all ease-in-out; }
  .button:hover {
    background-color: white;
    color: #993685; }
	*/