:root {
	/* Colors */
	/* Dark-theme */
	--clr-priamry: #1185d3;
	--clr-secondary: #02060a;
	--clr-accent: #88b8ec;

	--clr-background: #070a0e;
	--clr-text: #ebedef;

	/* Light-theme */
	--clr-priamry-light: #1185d3;
	--clr-secondary-light: #02060a;
	--clr-accent-light: #88b8ec;

	--clr-background-light: #ebedef;
	--clr-text-light: #070a0e;

	/* Reset */
	--clr-yellow: #f2e596;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
	margin: 0;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
	font: inherit;
}
/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}
/*
    8. Create a root stacking context
  */
#root,
#__next {
	isolation: isolate;
}

body {
	font-family: "Nunito", sans-serif;
	background-color: var(--clr-background);
	color: var(--clr-text);
	margin: 0 auto;
	width: 100vh;
}

.title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.9rem;
	margin: 30px 0;
}

.container-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0;
}

.choice-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 50px 0;
	background-color: var(--clr-secondary);
	border-radius: 50px;
	padding: 15px 50px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.container-choice > p {
	font-size: 0.75rem;
	font-weight: 900;
	margin-top: 10px;
}

.choice-text {
	font-size: 2.5em;
	font-weight: 900;
}

.choice-symbol-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--clr-secondary);
	width: 520px;
	height: 200px;
	border-radius: 20px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.choice-symbol__container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
}

.choice-symbol__container--symbol {
	width: 125px;
	height: 125px;
	border-radius: 20px;
	background-color: var(--clr-accent);
	box-shadow: inset 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7rem;
	font-weight: 900;
	cursor: pointer;
}

.separetor {
	width: 50px;
	height: 160px;
	border-radius: 20px;
	background-color: var(--clr-background);
	box-shadow: inset 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.container-choice {
	display: none;
}

/* Second page */

.container-game {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0;
}

.turn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 50px;
	background-color: var(--clr-secondary);
	border-radius: 10px;
	padding: 15px 100px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.turn p {
	font-size: 2em;
	font-weight: 900;
}

.container-play_again {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 30px;
	background-color: var(--clr-secondary);
	border-radius: 10px;
	padding: 15px 100px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.play_again {
	font-size: 1.5rem;
	font-weight: 900;
	margin: 0;
	background: none;
	border: 0;
	color: var(--clr-yellow);
	cursor: pointer;
}

.game__container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.game_cell {
	width: 100px;
	height: 100px;
	border-radius: 20px;
	background-color: rgba(235, 237, 239, 1);
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-priamry);
	font-size: 5rem;
	font-weight: 900;
	cursor: pointer;
}

.results {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background-color: var(--clr-secondary);
	margin-top: 20px;
	border-radius: 20px;
	width: 400px;
	height: 100px;
}

.player {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-weight: 900;
	width: 100px;
	height: 80px;
	border-radius: 20px;
	background-color: rgba(18, 111, 211, 1);
	box-shadow: inset 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.reset {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 900;
}

.reset__button {
	cursor: pointer;
	color: var(--clr-yellow);
	border: none;
	background-color: transparent;
	margin-top: 20px;
}

.container-game {
	display: none;
}

.container-choice {
	display: flex;
}

.container-play_again {
	display: none;
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 50px;
}

footer a {
	color: var(--clr-priamry);
	text-decoration: none;
	font-weight: 900;
}