*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--primary-dark: rgb(44, 41, 56);
	--primary-light: rgb(145, 140, 170);
	--primary-medium: rgb(91, 87, 109);
	--primary-bg: rgb(51, 46, 54);
	--secondary-light: rgb(128, 127, 139);
	--accent-gold: rgb(220, 188, 72);
	--accent-gold-dark: rgb(104, 90, 46);
	--accent-gold-bright: rgb(207, 177, 59);
	--neutral-light: rgb(244, 244, 244);
	--neutral-white: rgb(255, 255, 255);
	--neutral-dark: rgb(135, 108, 101);
	--max-width: 600px;
}

.header-wrapper {
	position: sticky;
	z-index: 100;
	top: 0;
	width: 100%;
}

.footer-wrapper {
	position: absolute;
	bottom: 0;
	width: 100%;
}

body {
	background: var(--primary-bg);
	background: -webkit-linear-gradient(to right, var(--primary-light), var(--primary-dark));
	background: linear-gradient(to right, var(--primary-light), var(--primary-dark));
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.continent {
	max-width: 1300px;
	margin-right: .5em;
	margin-left: .5em;
}

.container-wrapper {
	margin: 0 .5em;
}

/*// Containers ABC */
.containers-ab {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.container-a {
	order: 2;
}

.container-b {
	order: 1;
}

/* .container-c {
	order: 3;
} */

@media (min-width: 768px) {
	.containers-ab {
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		margin: 0 1em;
	}

	.container-a {
		order: 1;
	}

	.container-b {
		order: 2;
	}
}

/* // Container B CENTER-Mobile*/
.container-b {
	max-width: var(--max-width);
	border-radius: 0.75em;
	order: 1;
	margin-top: .5rem;
	margin-bottom: .5rem;
	width: 100%;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px var(--primary-dark), 2px 2px 4px var(--primary-light);
}

@media (min-width: 768px) {
	.container-b {
		width: 60%;
	}
}

/* Main Content */
.super-container {
	display: flex;
	flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 0.5625em;
	margin: 1em;
}

/*// Points Section */
.points-container {
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #ffffffe8;
}

.points-container p {
	color: #c3c4cd;
	font-weight: 600;
}

.points-container .points-element {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: .3em;
}

.image-content {
	display: none;
}

@media (min-width: 360px) {
	.points-container p {
		display: none;
	}

	.points-container .points-element {
		margin: 0;
		padding: 0;
	}

	.text-content {
		display: none;
	}

	.image-content {
		display: inline;
		max-width: 4.5em;
		margin: 0 0.15625em;
	}
}

/*// Question & Answer Section */
.super-container-qna-section {
	padding: 20px 25px;
	background-color: var(--neutral-white);
	border: 1px solid var(--neutral-light);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: background-color 0.3s ease-in-out;
}

.super-container-qna-section:hover {
	background-color: var(--primary-light);
}

#question {
	font-size: clamp(1em, 3vw, 26px);
	font-weight: bold;
	color: var(--primary-dark);
	margin-bottom: 15px;
	text-align: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

#answer {
	font-size: 1.125em;
	font-weight: 600;
	letter-spacing: 0.3125em;
	color: var(--primary-medium);
	line-height: 1.6;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/*// Form Section */
.form-container {
	width: 100%;
	margin-top: 0.7em;
}

#answer-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-items: stretch;
	row-gap: .8rem;
}

.answer-input-ctn {
	position: relative;
	width: 100%;
}

.answer-input {
	background-color: var(--primary-dark);
	color: var(--neutral-white);
	width: 100%;
	padding: 0.3125em;
	padding-right: 40px;
	font-size: 1.2em;
	border: 1px solid var(--neutral-light);
	border-radius: 5px;
	box-sizing: border-box;
	outline: none;
	text-align: center;
}

.submit-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

/*// Answer Section */
.answer-section {
	background-color: var(--neutral-light);
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.marquee-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--primary-bg);
	padding: 10px;
	border-radius: 5px;
}

.marquee {
	display: inline-block;
	white-space: nowrap;
	margin: .1em;
}

.marquee p {
	display: inline-block;
	font-size: 1.2rem;
	color: rgb(217 217 217);
	animation: scroll-left 20s linear infinite;
	transition: transform 0.5s ease-in-out;
}

.marquee-container:hover .marquee p {
	animation-play-state: paused;
}

@keyframes scroll-left {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

.niekas-neatsake {
	font-weight: 300;
	font-size: .7em;
	color: rgb(255 239 181);
}

.atsakymas-buvo {
	font-weight: 300;
	font-size: .8em;
	color: rgb(150 150 191);
}

.extra-content {
	font-size: .5em;
}

#answerer-name {
	font-weight: bold;
	color: var(--accent-gold);
}

#answer-content {
	color: var(--primary-light);
}








/* Email Confirmation Message */
/* .email-confirmation-message {
	background-color: var(--accent-gold); 
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	color: var(--accent-gold-dark); 
	font-size: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
} */

/* .email-confirmation-span {
	font-weight: bold;
	color: var(--accent-gold-bright); 
} */

/* .email-confirmation-link {
	display: block;
	margin-top: 12px;
	color: var(--accent-gold-bright); 
	text-decoration: underline;
} */

/* .email-confirmation-link:hover {
	color: var(--accent-gold-dark); 
	text-decoration: none;
} */

/* Responsive adjustments for smaller screens */
/* @media (max-width: 768px) {
	.points-container,
	.super-container-qna-section,
	.form-container {
		padding: 15px;
	}

	#question {
		font-size: 22px;
	}

	#answer {
		font-size: 16px;
	}

	.submit-icon {
		width: 40px;
		height: 40px;
	}
} */





/* // Container A*/
.container-a {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: var(--max-width);
}

@media (min-width: 768px) {
	.container-a {
		width: 38%;
		margin: 0 1em;
		padding: 1em 1em 0 1em;
		display: flex;
	}
}


/* ??Mini user-info/welcome container A1 */
.user-info-wrapper {
	display: flex;
	width: 100%;
}

.user-info-container {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;


	border: 2px solid transparent;
	border-radius: 0.75em;
	background-color: var(--neutral-light);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px var(--primary-dark), 2px 2px 4px var(--primary-light);
	/* padding-top: .7em; */
}

.user-info-text {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	padding: .5em 0;
}

.welcome-message {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	color: #000000;
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 0.3125em;
}

#temp-greeting,
#temp-exclamation {
	color: #555;
	font-style: italic;
}

.points-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: #666;
	margin-bottom: 0.2em;
	font-size: clamp(0.8em, 3vw, 1em);
	font-weight: bold;
}

.avatar-highlight {
	width: clamp(100px, 15vw, 100px);
	height: auto;
	object-fit: cover;
	border-radius: 11%;
}

/* ? user login, if not loged in A1 */
/*///      BTN Styles                          */
.login-button-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.not-logged-in-message {
	padding: 0.625em;
	margin: 0.25em 0;
	font-weight: bold;
}

.not-logged-in-button {
	padding: 0.625em 0.9375em;
	margin-bottom: 0.5em;
	background-color: rgb(135, 108, 101);
	border-radius: 5px;
	font-weight: bold;
	transition: background-color 0.3s, transform 0.2s ease, box-shadow 0.3s ease;
}

.not-logged-in-button .login-button {
	color: var(--neutral-white);
	text-decoration: none;
}

.not-logged-in-button:hover {
	background-color: rgb(81, 69, 66);
	cursor: pointer;
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.not-logged-in-button:active {
	transform: scale(1);
}

.not-logged-in-button .login-button {
	transition: color 0.3s ease;
}

.not-logged-in-button:hover .login-button {
	color: #f5f5f5;
}

/*?? Money section  A2*/
/* @keyframes flag-wave {
	0% {
		transform: rotate(0deg) translateX(0);
		background-position: center;
		visibility: visible;
		opacity: 1;
	}

	5% {
		transform: rotate(0deg) translateX(-5px);
		background-position: center;
		visibility: visible;
		opacity: 0.8;
	}

	10% {
		transform: rotate(-5deg) translateX(0);
		background-position: calc(100% - 5px) 5px;
		visibility: visible;
		opacity: 0.6;
	}

	15% {
		transform: rotate(0deg) translateX(5px);
		background-position: center;
		visibility: visible;
		opacity: 0.8;
	}

	20% {
		transform: rotate(5deg) translateX(0);
		background-position: 5px calc(100% - 5px);
		visibility: visible;
		opacity: 1;
	}

	25% {
		transform: rotate(0deg) translateX(0);
		background-position: center;
		visibility: visible;
		opacity: 1;
	}

	75% {
		transform: rotate(0deg) translateX(0);
		background-position: center;
		visibility: visible;
		opacity: 1;
	}

	80% {
		transform: rotate(-5deg) translateX(0);
		background-position: calc(100% - 5px) 5px;
		visibility: visible;
		opacity: 0.8;
	}

	85% {
		transform: rotate(0deg) translateX(-5px);
		background-position: center;
		visibility: visible;
		opacity: 0.6;
	}

	90% {
		transform: rotate(5deg) translateX(0);
		background-position: 5px calc(100% - 5px);
		visibility: visible;
		opacity: 0.8;
	}

	95% {
		transform: rotate(0deg) translateX(5px);
		background-position: center;
		visibility: visible;
		opacity: 0.6;
	}

	100% {
		transform: rotate(0deg) translateX(0);
		background-position: center;
		visibility: visible;
		opacity: 1;
	}
} */

/*?? Chat section  A3*/
#chat-container-section {
	display: none;
}

@media (min-width: 768px) {
	#chat-container-section {
		display: flex;
		flex-direction: column;
		word-wrap: break-word;
		justify-content: center;
		border: 2px solid var(--primary-light);
		border-radius: 0.75em;
		background-color: var(--neutral-light);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		padding: 1em;
		margin: 1em auto;
		max-width: var(--max-width);
		width: 100%;
	}

	#chat-container-input {
		margin-top: .5em;
		padding: 0.5em;
		background-color: var(--neutral-white);
		border-radius: 0.5em;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	#chat-form {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: 0.5em;
	}

	#chat-input-msg {
		flex-grow: 1;
		padding: 0.5em 1em;
		border: 1px solid var(--primary-light);
		border-radius: 0.5em;
		font-size: 1rem;
		outline: none;
		width: 100%;
	}

	#chat-input-msg:focus {
		border-color: var(--primary-medium);
		box-shadow: 0 0 4px var(--primary-medium);
	}

	#chat-button {
		padding: 0.5em 1em;
		background-color: var(--primary-medium);
		color: var(--neutral-white);
		border: none;
		border-radius: 0.5em;
		font-size: 1rem;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	#chat-button:hover {
		background-color: var(--primary-dark);
	}

	#chat-messages {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: block;
		max-height: 14.0625em;
		overflow-y: auto;
		background-color: var(--neutral-white);
		border-radius: 0.5em;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 0.5em;
	}

	#chat-messages>li {
		padding: .3rem .7rem;
		border-radius: 0.5em;
		margin-bottom: 0.5em;
	}

	#chat-messages>li:nth-child(odd) {
		background: var(--secondary-light);
		color: var(--neutral-white);
	}

	#chat-messages>li:nth-child(even) {
		background: var(--primary-light);
		color: var(--neutral-white);
	}
}


/* // Container C*/
.container-c {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 5.5rem;
}

@media (min-width: 768px) {
	.container-c {
		margin: 1em;
	}
}


/*?? Today top  C1*/
.today-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--max-width);
	width: 100%;
	background-color: var(--neutral-light);
	border-radius: .75em;
	border: 2px solid transparent;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px var(--primary-dark), 2px 2px 4px var(--primary-light);
	text-align: center;
	border-radius: 0.625em;
	padding: 0.9375em;

	/* margin-bottom: .5em; */
}

.today-top-btn {
	background-color: var(--neutral-dark);
	color: var(--neutral-white);
	padding: 11px 10px;
	text-align: center;
	width: 150px;
	font-size: 14px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 0.6em;
	border: none;
	text-decoration: none;
}


.php-today-top-list-li {
	border: 0.5px solid rgb(11, 5, 37);
	list-style-type: none;
	margin: 3px;
	width: 100%;
	background-color: #f2f2f2;
	padding: 5px;
	border-radius: 5px;
}

.best-player-php {
	font-weight: bold;
	color: var(--accent-gold-bright);
	font-size: 1.6rem;
}

.player-name-hp {
	font-weight: bold;
	color: var(--accent-gold-dark);
}

.player-points-hp {
	color: var(--primary-medium);
}

/*?? OLD QnA section  C2*/
/* ! Galimai bus nuo kokiu 568 px Galimai */
.old-question-section {
	height: 100%;
	max-width: var(--max-width);
	background-color: var(--neutral-light);
	border-radius: .75em;
	border: 2px solid transparent;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px var(--primary-dark), 2px 2px 4px var(--primary-light);
	text-align: right;
	padding: 0.9375em;
	margin-top: .5em;

}

/* .old-question-section #old-question {
	height: 100%;
	overflow-y: auto;
}

.question-list {
	list-style-type: none;
	padding: 0;
	display: flex;
	flex-direction: column;
} */

.question-item {
	padding: 0.4375em;
	display: flex;
	flex-direction: column;

}

.question-id {
	font-weight: bold;
	color: var(--neutral-dark);
	min-width: 20px;
	text-align: right;
	/* font-size: 1.1em;
	margin-top: 0.3%; */
}

.question-text {
	border-bottom: 1px solid #777;
	color: rgb(102, 102, 102);
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	border-bottom: 1px solid #777;
	padding-left: 1em;
	text-align: left;
	padding-bottom: 8px;
}

.question-text>.question-label {
	color: var(--primary-bg);
	font-weight: 700;
}

.question-text>.question-content {
	font-style: italic;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.1;
	padding-bottom: 6px;
}

.timestamp {
	font-weight: 600;
	margin-left: 15px;
	margin-right: -10px;
}

.answer-text {
	color: #7d6e6e82;
	text-align: center;
	min-width: 100px;
	margin: auto;
	font-weight: 600;
	word-break: break-all;
}

@media (min-width: 500px) {
	.question-item {
		flex-direction: row;
	}
}



/*// A HREF link that confims email .Seen then user didint confirmed email*/
.email-confirmation-message {
	background-color: #1e1e1e;
	color: #ffffff;
	padding: 1.25rem;
	border-radius: 0.625rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
	border: 1px solid transparent;
	overflow: hidden;
	margin: 1.25rem;
	text-align: center;
}

.email-confirmation-message::before {
	content: '';
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	background: linear-gradient(45deg, #06f, #12c, #f80, #f0f);
	z-index: -1;
	border-radius: 0.3125rem;
	transition: all 0.75s;
}

.email-confirmation-message:hover::before {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.email-confirmation-span {
	font-weight: bold;
	color: #00ffcc;
	text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.7);
}

.email-confirmation-link {
	color: #00ffcc;
	text-decoration: underline;
}

.email-confirmation-link:hover {
	color: #ffcc00;
	text-decoration: none;
}

.email-confirmation-link:active {
	color: #074b3d;
}

/* @media (max-width: 800px) { */
/*// Containers ABC */
/* .containers-abc {
		flex-direction: column;
		padding: 0;
	} */

/* // MAin-middle container */
/* .container-b {
		order: 1;
		width: 100%;
	}

	.super-container-qna-section {
		margin-top: 5vw;
		width: 100%;
	} */

/*// Left container A */
/* .container-a {
		order: 2;
		width: 100%;
		padding: 0 2em;
		height: auto;
	}

	#chat-container-section {
		background: transparent;
	}

	#chat-container-messages {
		background-color: #c6e0e1;
		max-height: 42vh;
		border-radius: 1.5% 1.5% 0 0;
		overflow-y: auto;
	} */

/* ?? Left container, Bet tampa middle container absolute */
/* .response800 {
		position: absolute;
		width: 100%;
		top: 5vh;
		left: 0;
		z-index: 20;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-info-container {
		height: auto;
		width: 30%;
		padding: 0;
		margin: 0;
	}

	.user-info {
		align-items: flex-start;
		padding: 0.5em;
		font-size: clamp(0.5em, 5vw, 1em);
		border-radius: 5%;
		background-color: transparent;
	}

	.show-money-container {
		width: 40%;
		margin-right: 1vw;
		height: auto;
	} */

/* #litai-img,
	#litai-img-bonus {
		max-width: 6.25em;
	}

	.litas-container {
		display: flex;
		flex-direction: column;
		height: auto;
		gap: 0;
	} */

/* // Container C*/
/* .container-c {

		width: 96%;
		flex-direction: row;
		align-items: flex-start;
		column-gap: 1em;
	}

	.old-question-section {
		width: 50vw;
		margin: 0.5rem;
		order: 1;
	}
} */

/* @media (max-width: 500px) {
	.container-c { */
/* // Container C*/
/* flex-direction: column;
	} */

/* .old-question-section {
		order: 1;
		width: 100%;
		margin: 0;
		padding: 1em;
	}

	.today-top {
		order: 2;
	}
}  */

/*! Error if user not logged in */
.disconnected-warning-message {
	color: red;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	position: absolute;
	bottom: 11%;
	left: 40%;
}

/*// Quotes Section */
/* !!  Reikia sugalvoti isdestyma */


.quotes-ctn {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.quotes-ctn {
		margin-top: 1em;
		margin-bottom: 1em;
	}
}


/*// ! Quotes*/
#quote-container {
	width: 100%;
	max-width: var(--max-width);
	margin: .5em auto;
	padding: 1.25em;
	background-color: var(--neutral-light);
	border-radius: .75em;
	border: 2px solid transparent;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px var(--primary-dark), 2px 2px 4px var(--primary-light);
	text-align: center;
	font-family: 'Georgia', serif;
	color: #333;
}

#quote-text {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	font-style: italic;
	margin-bottom: 0.5em;
	line-height: 1.2;
	color: #555;
	position: relative;
}

#quote-text::before {
	content: open-quote;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 0;
	margin-right: .2em;
	position: relative;
	top: 0.2em;
}

#quote-text::after {
	content: close-quote;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 0;
	margin-left: .2em;
	position: relative;
	top: 0.2em;
}

#quote-author {
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: bold;
	color: #888;
}

@media (min-width: 768px) {
	#quote-container {
		width: 85%;
		margin: 0 1em 0 0;
	}
}




/* !! Tech quotes Hiiden for now. Will Not using at the moment */
/*// ! Quotes Tech */
/* #quote-tech-container {
	display: none;
}

@media (min-width: 768px) {
	#quote-tech-container {
		display: block;
		width: 100%;
		padding: 1.25em;
		background-color: var(--neutral-light);
		border-radius: .75em;
		border: 2px solid transparent;
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), inset 2px 2px 4px var(--primary-dark), 2px 2px 4px var(--primary-light);
		text-align: center;
		font-family: 'Georgia', serif;
		color: #333;
	}
}

#quote-tech-title,
#quote-tech-intro,
#quote-tech-text {
	margin: 0.5em 0;
	padding: 0.5em;
	font-size: 1.1em;
	line-height: 1.5;
	color: #333;
	text-align: center;
}

#quote-tech-title {
	font-weight: bold;
	font-size: 1.5em;
	color: var(--primary-light);
	margin-bottom: 1em;
}

#quote-tech-intro {
	font-weight: bold;
	font-size: 1.3em;
	color: var(--primary-dark);
}

#quote-tech-text {
	font-style: italic;
	font-size: 1.2em;
	color: #555;
} */







/* Global notification styling */
/*todo Reikis span elemento atsakymui ir geram ir blogam kad isskirti */
.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 15px;
	border-radius: 8px;
	color: white;
	z-index: 1000;
	animation: slideIn 0.3s ease-out;
}

.notification.success {
	background: #4CAF50;
}

.notification.error {
	background: #f44336;
}

@keyframes slideIn {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}