#tic-tac-toe-container {
		display: inline-block; 
	}
	
	.container {
		flex: 1;
		display: grid;
		grid-template-rows: 1fr;
		align-items: center;
		justify-items: center;
		letter-spacing: 1px;
		font-family: Helvetica Now Display, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		width: 150px;
		min-width: 150px;
		max-width: 150px;
		height: 150px;
		min-height: 150px;
		max-height: 150px;
		position: relative;
        padding: 0px;
	}

	.board-container {
		width: 100%;
		height: 100%;
	}

	.result-and-replay {
		display: none; 
		justify-content: center;  
		align-items: center;      
		flex-direction: column;   
		position: absolute;      
		top: 0;   
		left: 0;  
		width: 100%;
		height: 100%; 
		z-index: 2;   
	}

	.result-and-replay::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(18, 18, 18, 0.4); 
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		z-index: -1; 
	}


	.result {
		font-size: 18px;
		font-weight: 400;
		color: #FFFFFF; 
		padding-bottom: 8px;
		transition: all 0.2s ease-in-out;
		text-align: center;
	}


	.replay {
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		background-color: rgba(255, 255, 255, 0.10);
		color: #FFFFFF;
		transition: background-color 0.3s ease, color 0.3s ease;
		border: none;            
		outline: none;           
		box-shadow: none;
	}

	.replay:hover {
		background-color: rgba(255, 255, 255, 0.14)
	}

	#player-1-name, #player-2-name {
		letter-spacing: 2px;
		font-weight: 700;
		font-size: 1rem;
	}

	::placeholder {
		opacity: 0.5;
	}

	.load-up {
		display: grid;
		grid-template-rows: 3fr 1fr;
		grid-auto-columns: 100%;
		align-items: stretch;
		gap: 1rem;
		width: 100%;
		height: 100%;
		margin-bottom: 1rem;
	}

	.load-up .button-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.load-up .button-container p {
		font-size: 5rem;
		font-weight: 900;
	}

	.start {
		display: inline-block;
		padding: 10px 20px;
		border: 1px solid #000000;
		font-size: 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		font-weight: 700;
	}
	  
	.start:hover {
		background-color: #dddcdcbc;
	}

	.player-choices {
		display: grid;
		grid-template-columns: 250px 150px 250px;
		gap: 3rem;
		justify-content: center;
		align-content: space-evenly;
	}

	.player {
		border-radius: 15px;
		border: 1px solid #000000;
		display: grid;
		grid-template-rows: repeat(5, min-content);
		align-items: center;
		justify-items: center;
		gap: 1rem;
		padding: 1rem;
		height: 100%;
		padding-bottom: 0px;
		font-weight: 500;
	}

	.player fieldset{
		display: flex;
		justify-content: space-around;
	}

	.player-choices .player-2 h2,
	.player-choices .player-1 h2{
		margin-bottom: 0px;
	}

	.marker {
		display: grid;
	}

	.marker p{
		margin-bottom: 8px;
		font-weight: 600;
		font-size: 1.4rem;
	}

	.color {
		display: flex;
		gap: 1rem;
	}

	.color p {
		margin-top: 0px
	}

	.player-selection {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
	}
	.player-chooser {
		font-size: 4rem;
		cursor: pointer;
		background-color: transparent;
		border: none;
		width: 100%;
		height: 100%;
	}


	.reset-container {
		display: none;
		width: 100%;
		height: 30px;
		margin: 1rem 0px;
		/* display: flex; */
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}

	.reset{
		padding: 10px 20px;
		border: 1px solid #000000;
		font-size: 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		font-weight: 700;
	}
	  
	.reset:hover {
		background-color: #dddcdcbc;
	}
	.board{
		display: grid;
		grid-template-columns: repeat(3, calc(100% / 3));
		grid-template-rows: repeat(3, calc(100% / 3));
		width: 100%;
		height: 100%;
		align-items: center;
		justify-items: center;
		font-size: 24px;
	}

	.board div {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition:  0.2s ease-in-out;
		border-bottom: 2px solid #353535;
		border-right: 2px solid #353535;
	}

	.board div:hover {
		background-color: rgba(255, 255, 255, 0.05);
	}

	#square6, #square7, #square8 {
		border-bottom: none;
	}

	#square2, #square5, #square8 {
		border-right: none;
	}