/* CONFIG */

:root {
	--primary: #111827;
	--secondary: #bc413a;
	--secondary-tint-90: #f8eceb;
	--secondary-tint-80: #f2d9d8;
	--secondary-tint-70: #ebc6c4;
	--secondary-tint-60: #e4b3b0;
	--secondary-tint-50: #dea09d;
	--borders: #ddd;
	--red-alt: #df0f3c;
	--body: #343f52;
	--body-light: #60697b;
	/* font-size: 16px; */
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

/* DEFAULT ELEMENTS */

body {
	background-color: var(--primary);
	color: var(--body);
	font-family: system-ui, sans-serif;
}

section {
	padding: max(50px, 3%) max(50px, 5%);
	background-color: var(--secondary-tint-90);
}

h1 {
	font-weight: 600;
	font-size: 2.25rem;
	text-wrap: balance;
	max-width: 50ch;
}

h2 {
	font-weight: 500;
	font-size: 1.75rem;
	text-wrap: balance;
}

p {
	max-width: 70ch;
	text-wrap: pretty;
}

button {
	padding: 0.5em 1em;
	border-radius: 5px;
	color: white;
	background-color: var(--secondary);
	cursor: pointer;
	transition: all 150ms ease-out;

	&:hover {
		transform: translatey(-5px);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}

	&:active {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
	}
}

input {
	outline: none;
	border: 1px solid var(--borders);
	border-radius: 5px;
	padding: 10px;
}

/* MAIN SECTION */

main {
	margin: 10px;
	margin-top: 15px;
	border-radius: 5px;
	background-color: white;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* HEADER */

header {
	display: flex;
	justify-content: center;
}

header h1 {
	color: darksalmon;
}

/* TASKING */

#tasking {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.tasking-question {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

#tasking-timer {
	font-size: 5rem;
}

#tasking-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#tasking-heading h1 {
	text-align: center;
}

#tasking-status-message {
	visibility: hidden;
}

/* CHAT */

.chat {
	width: 100%;
	max-width: 400px;
	height: 500px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--borders);
	border-radius: 5px;
	background: #fff;
}

.chat-messages {
	flex: 1;
	padding: 10px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--secondary) white;
}

.chat-messages>* {
	max-width: 70%;
	padding: 8px 12px;
	border-radius: 5px;
	font-size: 0.85rem;
}

.chat-messages> :nth-child(2n + 1) {
	align-self: flex-end;
	background: var(--secondary);
	color: #fff;
}

.chat-messages> :nth-child(2n) {
	align-self: flex-start;
	background: var(--secondary-tint-90);
}

.chat-input {
	display: flex;
	border-top: 1px solid var(--borders);
}

.chat-input input {
	flex: 1;
	padding: 10px;
	font-size: 14px;
	border: none;
}

.chat-input button {
	padding: 0 16px;
	background-color: white;
	color: black;

	&:hover {
		transform: translatey(0px);
	}
}