@text-color: #444;
@text-color-ac1: contrast(#fff, darken(@accent-color-1, 10%), @accent-color-1, 50%);
@text-color-ac2: contrast(#fff, darken(@accent-color-2, 10%), @accent-color-2, 50%);

@accent-color-1: #777;
@accent-color-2: #444;

@tc-ac1-contrast: contrast(@accent-color-1, #444, #fff, 50%);
@tc-ac2-contrast: contrast(@accent-color-2, #444, #fff, 50%);


* {
	box-sizing: border-box;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;

	&:before,
	&:after {
		box-sizing: border-box;
	}
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	vertical-align: middle;
}

.material-symbols-outlined {
	width: 20px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	opacity: 0.7;
}

.bold {
	font-weight: 600;
}

.ac1 {
	color: @text-color-ac1;
}

body {
	margin: 0;

	.color-palettes {
		width: 21cm;
		border: 1px solid #ddd;
		display: flex;
		flex-wrap: wrap;
		//justify-content: center;
		margin: 10px auto;
		padding: 10px;
		position: relative;

		.color-group {
			min-width: 20%;
			flex: 0 1 auto;
			padding: 10px;

			&.color-picker {
				display: flex;
			}

			a {
				display: flex;

				span {
					width: 50%;
					height: 30px;

					&.color-1 {
						background-color: var(--ac1);
					}

					&.color-2 {
						background-color: var(--ac2);
					}
				}
			}

			.color-input {
				height: 30px;
				display: flex;


				&:first-child {
					margin-right: 4px;
				}

				input {
					width: 60px;
					border: 1px solid #ddd;
					font-size: 0.75rem;

					&:active,
					&:focus {
						border: 1px solid #ccc;
					}
				}

				.selected-color {
					width: 30px;
					background-color: var(--sel-color);
					border: 1px solid #ddd;
					border-left: 0;
				}
			}

			.btn {
				width: 30px;
				align-items: center;
				background-color: #ddd;
				color: #222;
				display: flex;
				font-family : arial, sans-serif;
				font-size: 0.75rem;
				justify-content: center;
				margin-left: 4px;
				text-decoration: none;
			}
		}

		.close-btn {
			width: 30px;
			height: 30px;
			align-items: center;
			border: 1px solid #ddd;
			color: #444;
			display: flex;
			font-size: 0.75rem;
			justify-content: center;
			left: 100%;
			position: absolute;
			text-decoration: none;
			top: -1px;

			span {
				width: auto;
			}
		}
	}
}

.main-wrapper {
	width: 100%;
	//background-color: #ddd;
	overflow: hidden;
}

.page {
	width: 21cm;
	height: 29.7cm;
	border: 1px #D3D3D3 solid;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	color: @text-color;
	display: flex;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	margin: 0 auto 40px;
	overflow: hidden;
	position: relative;

	@gaps: 4px;

	h1,
	h2,
	h3 {
		font-size: inherit;
		font-weight: 400;
		margin: 0;
	}

	.material-symbols-outlined {
		color: @text-color-ac2;
		font-size: 1.25rem;
	}

	.header {
		//align-items: center;
		display: flex;
		margin-bottom: @gaps;
		padding: 20px 20px 0;
		position: relative;
		z-index: 2;

		.corner-garnish {
			width: 20%;
			height: ~"calc(70% - @{gaps})";
			background-color: @accent-color-1;
			left: 0;
			position: absolute;
			top: 0;
		}

		.left-garnish {
			width: 25%;
			height: 30%;
			background-color: @accent-color-2;
			border-radius: 0 0 20px 0;
			bottom: 0;
			left: 0;
			position: absolute;
		}

		.photo-wrapper {
			width: 20%;
			align-items: center;
			display: flex;
			flex: none;
			justify-content: center;
			padding-bottom: 20px;
		}

		.photo-container {
			aspect-ratio: 1 / 1;
			background-color: #fff;
			border-radius: 50%;

			overflow: hidden;
			padding: @gaps;
			position: relative;

			.photo-frame {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				display: block;
				overflow: hidden;
			}

			img {
				width: 100%;
				height: 100%;
				filter: grayscale();
				object-fit: contain;
				transform: scale(1.1);
			}
		}

		.resume-title {
			display: flex;
			flex-direction: column;
			flex: 1;
			padding-left: 10px;
			position: relative;

			&:after {
				width: 30px;
				height: 30px;
				border: 1px solid @accent-color-2;
				border-left: 0;
				border-bottom: 0;
				content: '';
				position: absolute;
				right: 0;
				top: 0;
			}

			.name {
				font-size: 2rem;
				text-transform: uppercase;

				span {
					display: inline-block;
				}

				.first-name {
					font-weight: 600;
				}
			}

			.designation {
				color: @text-color-ac1;
				display: block;
				font-size: 1.25rem;
				margin-top: 10px;
			}

			.misc-info {
				width: 5%;
				aspect-ratio: 1 / 1;
				//display: flex;
				margin-top: auto;
				margin-left: 30px;
				position: relative;

				span {
					width: 60%;
					//align-items: center;
					aspect-ratio: 1 / 1;
					border-radius: 50%;
					//border: 1px solid @text-color-ac2;
					color: @text-color-ac1;
					//display: flex;
					//justify-content: center;
					//margin-right: 20px;
					mix-blend-mode: screen;
					position: absolute;

					&:first-child {
						background-color: #f00;
						left: 50%;
						top: 0;
						transform: translateX(-50%);
					}

					&:nth-child(2) {
						background-color: #0f0;
						bottom: 0;
						left: 0;
					}

					&:nth-child(3) {
						background-color: #00f;
						bottom: 0;
						right: 0;
					}
				}
			}

			.contact-info {
				align-items: flex-end;
				bottom: 0;
				display: flex;
				flex-direction: column;
				flex: 0 0 20%;
				justify-content: center;
				margin-top: auto;
				position: absolute;
				right: 0;
				text-align: right;

				.item {
					align-items: center;
					display: flex;
					margin: 2px 0;

					.text {
						background-color: fade(@accent-color-1, 75%);
						color: @tc-ac1-contrast;
						font-size: 0.825rem;
						padding: 2px 6px;
					}

					.material-symbols-outlined {
						margin-left: 6px;
					}
				}
			}
		}
	}

	.body {
		display: flex;
		flex: 1;
		line-height: 1.5em;
		position: relative;

		.sidebar {
			width: 100%;
			background-color: @accent-color-1;
			border-radius: 0 20px 0 0;
			color: @tc-ac1-contrast;
			flex: 0 0 25%;
			font-size: 0.8rem;
			font-weight: 300;
			padding-top: 24px;
			position: relative;

			.side-section {
				border-radius: 16px;
				margin-bottom: 20px;
				padding: 16px;

				&.expertise {
					.section-list {
						.section-item {
							display: flex;
							flex-wrap: wrap;
							margin-bottom: 0;
						}

						.item {
							background-color: @accent-color-2;
							border-radius: 8px;
							color: @tc-ac2-contrast;
							font-size: 0.675rem;
							font-weight: 600;
							margin: 0 4px 4px 0;
							padding: 0 8px;
							text-transform: lowercase;
						}
					}
				}

				.section-heading {
					font-size: 1.1rem;
					font-weight: 600;
					margin-bottom: 20px;

					&:after {
						width: 50px;
						height: 1px;
						background-color: currentColor;
						content: '';
						display: block;
						margin-top: 10px;
					}
				}

				.section-list {
					.sub-heading {
						font-weight: 600;
					}

					.section-item {
						margin-bottom: 16px;

						div {
							span {
								display: block;
							}
						}
					}
				}
			}
		}

		.main-content {
			flex: 1;
			font-weight: 400;
			padding: 40px 26px;

			.content-section {
				margin-bottom: 30px;
			}

			.section-heading {
				font-size: 1.1rem;
				font-weight: 600;
				margin-bottom: 20px;

				&:after {
					width: 50px;
					height: 1px;
					background-color: currentColor;
					content: '';
					display: block;
					margin-top: 10px;
				}
			}

			.section-content {
				font-size: 0.9rem;
				line-height: 1.5em;
				margin-bottom: 40px;

				.company-name {
					display: flex;
					justify-content: space-between;
					font-weight: 600;
					margin-bottom: 20px;

					.duration {
						align-items: center;
						color: @text-color-ac1;
						display: flex;
						font-size: 0.75rem;
						font-weight: 400;

						.material-symbols-outlined {
							width: 20px;
							font-size: 1.25rem;
							margin-bottom: 2px;
							margin-left: 6px;
						}
					}
				}

				.content-details {
					margin-top: 16px;
					padding-left: 30px;
					position: relative;

					&.timeline {
						&:before {
							width: 5px;
							height: 100%;
							background-color: #ddd;
							border-radius: 6px;
							content: '';
							left: 8px;
							position: absolute;
							top: 0;
						}

						.designation {
							&:before {
								width: 9px;
								height: 9px;
								background-color: @accent-color-2;
								border-radius: 50%;
								content: '';
								left: -24px;
								position: absolute;
								top: 6px;
							}

							&.current {
								font-weight: 600;

								&:before {
									width: 13px;
									height: 13px;
									border: 3px solid @accent-color-1;
									left: -26px;
									top: 5px;
								}
							}
						}
					}

					.designation {
						color: @text-color-ac1;
						display: flex;
						justify-content: space-between;
						position: relative;

						.duration {
							align-items: center;
							display: flex;
							font-size: 0.675rem;
							font-weight: 300;

							/*.material-symbols-outlined {
								width: 20px;
								font-size: 1rem;
								margin-bottom: 2px;
							}*/
						}
					}

					.description {
						margin-bottom: 16px;

						> span {
							display: block;
							font-style: italic;
							margin-top: 8px;
						}

						ul {
							list-style: square outside;
							margin: 10px 0;
							padding-left: 10px;
						}
					}
				}
			}
		}
	}
}

@media print {
	.page {
		width: initial;
		min-height: initial;
		background: initial;
		border: initial;
		border-radius: initial;
		box-shadow: initial;
		margin: 0;
		page-break-after: always;
	}
}