/* ==== 0. Indent and global overflow-x ban ==== */
html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* ==== 1. Variables (colors, themes) ==== */
:root {
	--primary: #1976d2;
	--primary-hover: #1565c0;
	--secondary: #9c27b0;
	--secondary-hover: #7b1fa2;
	--text-primary: #1a1a1a;
	--text-secondary: #424242;
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--border: #e0e0e0;
	--shadow: rgba(0, 0, 0, 0.1);
	--shadow-tt: #b1b1b1;
	--error: #d32f2f;
	--gradient: hsla(216, 4%, 73%, 0.2);
	--cnt-back: linear-gradient(121deg, hsla(210, 100%, 23%, 0.1), hsla(216, 4%, 73%, 0.2));
	/* Синтвейв-палитра */
	--bg-primary: #1e1e2e;
	--bg-secondary: #2a263e;
	--text-primary: #eff0eb;
	--text-secondary: #c4a7e7;
	--accent-pink: #ff71ce;
	--accent-purple: #b28cff;
	--accent-cyan: #08f7fe;
	--accent-yellow: #ffca3a;
	--border: #3e3355;
	--shadow: rgba(0, 0, 0, 0.5);
}
body.dark-theme {
	--primary: #90caf9;
	--primary-hover: #64b5f6;
	--secondary: #ce93d8;
	--secondary-hover: #ba68c8;
	--text-primary: #e0e0e0;
	--text-secondary: #b0b0b0;
	--bg-primary: #121212;
	--bg-secondary: #1e1e1e;
	--border: #333333;
	--shadow: rgba(0, 0, 0, 0.3);
	--error: #f44336;
	--gradient: hsla(210, 100%, 23%, 0.2);
	--cnt-back: linear-gradient(292deg, hsl(210, 68%, 26%), hsla(0, 0%, 0%, 0.951));
}

/* ==== 2. Body without flex container ==== */
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, sans-serif;
	background-color: var(--bg-secondary);
	background: var(--cnt-back);
	color: var(--text-primary);
	line-height: 1.5;
	transition: background-color 0.3s ease, color 0.3s ease;
	min-height: 100vh;
}

body.light-theme {
	background-color: #f8f9fa;
	color: #24292e;
}

body.dark-theme {
	background-color: #0d1117;
	color: #c9d1d9;
}

/* ==== 3. Wrapping (optional if vertical alignment is required) ==== */
.wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* ==== 4. Main container ==== */
.container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 1rem;
}
@media (max-width: 800px) {
	.container {
		width: calc((100vw - 100px) / (800 - 100) * (740 - 90) + 90px);
		padding: 0;
	}
}

/* ==== 5. Theme and language control unit ==== */
.controls {
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	gap: 0.5rem;
	z-index: 100;
}

.icon-button {
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-primary);
	background-color: var(--bg-primary);
	box-shadow: 0 2px 4px var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px var(--shadow);
}

.icon-button:active {
	transform: translateY(0);
}

@media (max-width: 600px) {
	.controls {
		position: static;
		margin-bottom: 1rem;
		margin: 10px;
	}
	.icon-button {
		padding: 4px;
	}
}

/* ====  para Markdown ==== */
#readme-container {
	margin-top: 2rem;
	width: 100%;
	overflow-x: auto;
	word-wrap: break-word;
}

#readme-container h1,
#readme-container h2,
#readme-container h3 {
	margin: 1.2rem 0 0.8rem;
	line-height: 1.3;
}

#readme-container p {
	margin: 0.4rem 0;
	line-height: 1.4;
}

#readme-container a {
	color: #0366d6;
	text-decoration: none;
	display: inline-block;
	margin-top: 3px;
}
body.dark-theme #readme-container a {
	color: #58a6ff;
}
#readme-container a:hover {
	text-decoration: underline;
}

#readme-container ul,
#readme-container ol {
	margin: 0.8rem 0 0.8rem 1.2rem;
}

#readme-container img {
	display: inline-block;
	margin: 0 0.2rem;
	margin-bottom: 3px;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

#readme-container pre {
	background-color: rgba(27, 31, 35, 0.05);
	padding: 1rem;
	border-radius: 6px;
	overflow-x: auto;
	margin: 1rem 0;
}
body.dark-theme #readme-container pre {
	background-color: rgba(27, 31, 35, 0.2);
}

#readme-container code {
	background-color: rgba(27, 31, 35, 0.05);
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
}
body.dark-theme #readme-container code {
	background-color: rgba(27, 31, 35, 0.2);
}

#readme-container table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}
#readme-container th,
#readme-container td {
	border: 1px solid #dfe2e5;
	padding: 0.6rem 1rem;
}
body.dark-theme #readme-container th,
body.dark-theme #readme-container td {
	border-color: #444c56;
}
#readme-container th {
	background-color: #f6f8fa;
}
body.dark-theme #readme-container th {
	background-color: #161b22;
}

#readme-container hr {
	margin: 1.5rem 0;
	border: 0;
	border-top: 1px solid #ddd;
}

/* informative parts */

#readme-container .links {
}
#readme-container .skills {
}
#readme-container .process {
}
#readme-container .free-time {
}
#readme-container .graphics {
}
#readme-container .statistic {
}

/* «Synthwave/Cyberpunk» */
#readme-container .welcome a,
.dark-theme #readme-container .welcome a {
	text-decoration: none;
	color: inherit;

	background-image: linear-gradient(60deg, #ff0080, #8000ff, #00bfff, #00ffe0, #ff00c0);
	background-size: 300% 300%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: cyberpunk-rainbow 6s linear infinite;
}

#readme-container .welcome a:hover {
	text-decoration: underline;
}

@keyframes cyberpunk-rainbow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}