.about .page:nth-child(2n+1) .page-column:first-child, 
.about .page:nth-child(2n) .page-column:last-child {
	background-color: var(--color-main);
}

.about ul {
	list-style-type: none;
	margin: 0;
}

.about h1 {
	font-size: 1.5rem;
}

.about .portrait-me > * {
	margin: auto;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}

.about .portrait-me img {
	width: 100%;
	max-width: 350px;
	height: auto;
}

.about .page .logo {
	width: 30%;
	max-width: 125px;
	margin: auto;
	translate: none;
	position: static;
}

.about .page .logo .logo-h {
	fill: var(--color-main);
}


/*skill*/
.page-inner.skills {
	gap: 25px;
}

.skill {
	height: 50px;
	display: flex;
}

.skill .icon {
	height: 100%;
	display: block;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: var(--color-main);
	margin-right: 50px;
	display: flex;
}

.skill .icon svg {
	height: 40%;
	margin: auto;
	fill: var(--color-background);
}

.skill .level {
	height: 50%;
	display: flex;
	gap: 10px;
	margin-top: auto;
	margin-bottom: auto;
}

.skill .level > span {
	height: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: white;
}

.skill .level > span.filled {
	background-color: var(--color-main);
}

.skill .level > span.half::before {
	background-color: var(--color-main);
	content: "";
	height: 100%;
	width: 50%;
	display: block;
	border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.page.skills .page-column:last-child .skill .icon,
.page.skills .page-column:last-child .skill .level > span,
.page.skills .page-column:last-child .skill .level > span.filled,
.page.skills .page-column:last-child .skill .level > span.half::before {
	background-color: rgba(255, 255, 255, 1);
}

.page.skills .page-column:last-child .skill .level > span {
	background-color: rgba(255, 255, 255, .25);
}

.page.skills .page-column:last-child .skill .icon svg {
	fill: var(--color-main);
}

.page.skills .page-column:last-child .skill .icon {
	order: 2;
	margin-right: 0;
	margin-left: 50px;
}

.page.skills .page-column:last-child .skill .level {
	flex-direction: row-reverse;
}

.page.skills .page-column:last-child .skill .level > span.half::before {
	border-radius: 0 100% 100% 0 / 0 50% 50% 0;
	translate: 100%;
}

.page.skills .page-column:last-child .skill {
	justify-content: end;
}

.page.skills .page-column:last-child .skill .icon svg {
	height: 50%;
}

.sm-icon {
	display: block;
	width: 50px;
	height: 50px;
	background-color: var(--color-main);
	border-radius: 50%;
	display: flex;
}

.sm-icon svg {
	height: 50%;
	margin: auto;
	justify-content: center;
	fill: white;
}

.social-media .page-inner > div {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
}

.sm-icon:hover {
	background-color: white;
}

.sm-icon:hover svg {
	fill: var(--color-main);
}

@media (max-width: 799px) {
	.about .portrait-me div div {
		height: inherit;
		text-align: center;
	}
	.about h1 {
		font-size: 1.25rem;
	}
	.about .portrait-me img {
		max-height: 75%;
		max-width: 100%;
		height: auto;
		width: auto;
	}

	.about .page .page-column:first-child,
	.about .page:nth-child(2n+1) .page-column:first-child {
		background-color: var(--color-background);
		color: #000;
	}
	.about .page .page-column:last-child {
		background-color: var(--color-main);
		color: white;
	  }

	.page-inner.skills {
		gap: 10px;
	}
	.skill {
		height: 35px;
	}
}