styles.css

:root {
	--color-primary: #bce29e;
	--color-secondary: #e5ebb2;
	--color-accent: #f8c4b4;
	--color-text: #100f0f;
	--color-bg: #f1f1f1;
	--color-hover: #f2be22;
	--color-border: #100f0f;
	--color-border-hover: #ea5455;
	--color-inside-btn: #cd1818;
}

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
	font-family: 'Montserrat', sans-serif;
	font-family: 'Roboto Mono', monospace;
	background: var(--color-bg);
	color: var(--color-text);
	position: relative;
	min-height: 100vh;
}

.main {
	display: none;
}

.game-intro {
	text-align: center;
	transform: scale(1);
	transition: transform 4s;
}

.game-intro.animate {
	transform: scale(0.03) rotate(720deg);
}

img {
	width: 40%;
}

.game-board {
	margin: 3% auto 0;
	width: 30%;
	min-height: 310px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	overflow: hidden;
	border-radius: 2rem;
}

.game-board .cell {
	font-weight: 700;
	display: grid;
	place-items: center;
	font-size: 3rem;
	margin: 3%;
}

.buttons {
	text-align: center;
}

.return-to-main {
	width: 10%;
	font-size: 0.8rem;
	margin: 2% 1% 1% 0;
	transition-duration: 0.3s;
	border: 1px solid var(--color-text);
	padding: 0.5% 1%;
	transition-duration: 0.3s;
	font: inherit;
}

.return-to-main:hover {
	border: none;
	background: var(--color-inside-btn);
	color: #fff;
	border: 1px solid var(--color-border-hover);
	transform: scale(1.2);
}

.restart-btn {
	width: 10%;
	font-size: 0.8rem;
	margin: 2% 0 1% 1%;
	transition-duration: 0.3s;
	border: 1px solid var(--color-text);
	padding: 0.5% 1%;
	transition-duration: 0.3s;
	font: inherit;
}

.restart-btn:hover {
	border: none;
	background: var(--color-inside-btn);
	color: #fff;
	border: 1px solid var(--color-border-hover);
	transform: scale(1.2);
}

.cell {
	padding: 5px;
	border-radius: 3%;
}

.cell:hover {
	background: var(--color-bg);
}

.cell1 {
	border-right: 3px var(--color-text) solid;
	border-bottom: 3px solid var(--color-text);
}

.cell2 {
	border-right: 3px var(--color-text) solid;
	border-bottom: 3px solid var(--color-text);
}

.cell3 {
	border-bottom: 3px solid var(--color-text);
}

.cell4 {
	border-right: 3px var(--color-text) solid;
	border-bottom: 3px solid var(--color-text);
}

.cell5 {
	border-right: 3px var(--color-text) solid;
	border-bottom: 3px solid var(--color-text);
}

.cell6 {
	border-bottom: 3px solid var(--color-text);
}

.cell7 {
	border-right: 3px var(--color-text) solid;
}

.cell8 {
	border-right: 3px var(--color-text) solid;
}

.display-result {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 40%;
	gap: 5%;
	margin: auto;
	text-align: center;
	margin-top: 9%;
}

.display-result p {
	font-size: 1.2rem;
}

.player-x {
	background: var(--color-primary);
}

.ties {
	background: var(--color-secondary);
}

.player-o {
	background: var(--color-accent);
}

.logo {
	width: 10%;
	margin-top: 5%;
}

.game-intro h1 {
	font-weight: 100;
}

.choice {
	margin: 6% 0;
	font-size: 1rem;
}

.ui-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.s-input {
	border: 1px solid var(--color-text);
	padding: 1% 2%;
	transition-duration: 0.3s;
}

.s-input:hover {
	background: var(--color-hover);
	border: 1px solid var(--color-bg);
}

.start-btn {
	border: 1px solid var(--color-text);
	padding: 1% 2%;
	transition-duration: 0.3s;
	font: inherit;
}

.start-btn:hover {
	background: var(--color-primary);
	border: 1px solid var(--color-bg);
	transform: scale(1.3);
}

footer {
	position: absolute;
	width: 100%;
	text-align: center;
	font-weight: 200;
	margin: auto;
	bottom: 0;
}

footer a {
	text-decoration: none;
	color: inherit;
}

.hide {
	display: none;
}

.show {
	display: block;
}

.announceWinnerText {
	text-align: center;
	margin-top: 6%;
}

@media screen and (max-width: 600px) {
	.logo {
		width: 30%;
		margin-top: 15%;
	}

	.game-intro h1 {
		font-size: 1.3rem;
		margin: 0 4% 25% 4%;
	}

	.return-to-main {
		width: 30%;
		margin: 20% 1% 1% 0;
	}

	.restart-btn {
		width: 30%;
	}

	.game-board {
		margin: 15% auto 0;
		width: 70%;
	}

	.start-btn {
		margin-top: 10%;
	}

	.player-x {
		grid-column: 1/4;
		grid-row: 1/2;
		margin-top: 40%;
	}

	.ties {
		grid-column: 1/4;
		grid-row: 2/3;
	}

	.player-o {
		grid-column: 1/4;
		grid-row: 3/4;
		width: 100%;
	}
}