/*https://coolors.co/720026-a288e3-bbd5ed-ff9b54*/

:root {
	--primary-color: #BBD5ED;
	--accent-color-1: #720026;
	--accent-color-2: #A288E3;
	--accent-color-2-transparent: #A288E388;

	--accent-color-3: #FF9B54;
	--accent-color-3-transparent: #FF9B5488;

	--primary-color-darker: #90b8dd;
}

* {
	font-family: "National Park", sans-serif;
}

h1,
h2,
h3,
.nav-links a,
.hamburger,
.ham-nav a {
	color: var(--accent-color-1);
	font-family: "Winky Sans", sans-serif;
}

.primary-color {
	--border-color: var(--primary-color);
	--bg-color: #BBD5EDaa
}

.accent-color-1 {
	--border-color: var(--accent-color-1);
	--bg-color: #720026aa;
}

.accent-color-2 {
	--border-color: var(--accent-color-2);
	--bg-color: #A288E3aa;
}

.accent-color-3 {
	--border-color: var(--accent-color-3);
	--bg-color: #FF9B54aa;
}

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

main {
	margin: 0 1rem;
}

/**********  HEADER  *********/

header {
	background-color: var(--primary-color);
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	color: var(--accent-color-1);
	padding: 0.5rem 1rem;
	align-items: end;
}

#site-logo {
	width: 80px;
}

header h1 {
	text-align: center;
	margin: 0;
}

.nav-links {
	justify-self: end;
}

.nav-links ul {
	display: flex;
	list-style: none;
	margin: 0 1rem 0 0;
	padding: 0;
	gap: 2rem;
}

.nav-links ul li {
	font-size: 1.25rem;
}

.nav-links a,
.ham-nav a {
	text-decoration: none;
	color: var(--accent-color-1);
}

.nav-links .active,
.ham-nav .active {
	text-shadow: 0 3px 5px var(--accent-color-3);
}

.nav-links li:hover {
	animation: bounce 1s;
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-10%);
	}

	60% {
		transform: translateY(-8%);
	}

}

/********** Hamburger ********/

.nav-links {
	display: none;
}

.hamburger {
	background-color: transparent;
	border: 0;
	justify-self: end;
	font-size: 2rem;
	cursor: pointer;
}

.hamburger::after {
	content: "\2630";
}

.hamburger.show::after {
	content: "\00d7";
}

.ham-nav.show {
	background-color: var(--primary-color);
	display: flex;
	flex-direction: column;
	color: var(--accent-color-1);
	padding: 0.5rem 1rem;
	align-items: end;
	gap: 2rem;
}

.ham-nav {
	display: none;
}

.ham-nav a {
	font-size: 1.5rem;
}

/********** Main - Learn *****/
.learning-card {
	margin: 0.5rem 0;
	padding: 1rem;
	border: 2px solid var(--accent-color-2);
	background-color: var(--accent-color-2-transparent);
	display: grid;
	align-items: center;
}

.learning-card:nth-child(odd) {
	border-color: var(--accent-color-3);
	background-color: var(--accent-color-3-transparent);
}

.learning-card h2 {
	margin: 0 0 0.5rem;
}

.learning-card p {
	font-size: 1.1rem;
	margin: 0.5rem 0;
	color: var(--accent-color-1);
	font-weight: 500;
}

.learning-card img {
	border: 1px solid #aaa;
	box-shadow: 2px 2px 4px #aaa;
}

.learning-card .subtitle {
	font-weight: bold;
}

.learning-card:hover .subtitle {
	animation: bounce-higher 1s;
}

@keyframes bounce-higher {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-20%);
	}

	60% {
		transform: translateY(-12%);
	}
}

dialog {
	margin: auto 1rem ;
	border: 3px solid var(--primary-color-darker);
	background-color: #BBD5ED;
}

dialog button {
	float: right;
	color: var(--accent-color-1);
	font-weight: bolder;
	border: 1px solid var(--accent-color-1);
	border-radius: 3px;
	background-color: transparent;
	cursor: pointer;
}

dialog button::after {
	content: "X";
}

/********** Main - Play ******/

.play-page>div,
.challenge-page>div {
	border: 2px solid var(--accent-color-2);
	margin: 0.5rem 0;
	padding: 0 1rem 1rem 1rem;
}

.play-page>div:nth-child(odd),
.challenge-page>div:nth-child(odd) {
	border-color: var(--accent-color-3);
}

#three-obj-rps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

#three-obj-rps h2 {
	width: 100%;
}

#three-obj-rps p {
	width: 100%;
}

.sign-card {
	font-size: 3rem;
	border: 3px solid #aaaaaa;
	border-radius: 10px;
	box-shadow: 0 0.25rem 0.1rem #aaa;
}

.sign-card.player {
	border-color: red;
	box-shadow: 0 0.25rem 0.1rem red;
}

.sign-card.computer {
	border-color: blue;
	box-shadow: 0 0.25rem 0.1rem blue;
}

.sign-card.player.computer {
	border-color: purple;
	box-shadow: 0 0.25rem 0.1rem purple;
}


#elevenObjParts,
#hundredObjParts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.sign-card {
	position: relative;
}

#elevenObjParts .sign-card img {
	width: 150px;
	height: auto;
}

#hundredObjParts .sign-card img {
	width: 75px;
	height: auto;
}

.tooltip {
	visibility: hidden;
	font-size: 1rem;
	width: 150px;
	background-color: var(--accent-color-1);
	color: var(--primary-color);
	text-align: center;
	padding: 5px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 50%;
	margin-left: -75px;
}

.tooltip::after {
	content:"";
	position: absolute;
	bottom:100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent var(--accent-color-1)   transparent;
}

.sign-card:hover .tooltip {
	visibility: visible;
}

#win-box {
	margin: auto;
	z-index: 1;
}
/********** Main - Challenge */

#muk-jji-ppa {
	overflow: hidden;
	height: 10rem;
}

#muk-jji-ppa p:nth-child(odd) {
	background: linear-gradient(to bottom, black, transparent);
	color: transparent;
	background-clip: text;
}

#muk-jji-ppa.show {
	height: auto;
}

#muk-jji-ppa.show p{
	background: unset;
	color: black;
	background-clip: unset;
}

#hundred-obj-rps {
	background-color: white;
}

/********** Footer ***********/

footer {
	background-color: var(--primary-color);
	padding: 1rem 2rem;
	font-size: 1.2rem;
}

footer a {
	color: var(--accent-color-1);
	text-underline-offset: 2px;
}

footer a:visited {
	color: var(--accent-color-1);
}

#social-links {
	display: flex;
	gap: 1rem;
}