/* -------------------------------------------------- */
/* OVERRIDE
/* -------------------------------------------------- */

/* Desktop */
@media screen and (min-width: 530px) {
	section {
		padding: 15px calc(50% - 265px) !important;
	}
}

section.color article,
section.background article {
	text-align: center;
}

.section-intro > * {
	width: 100% !important;
	text-align: center !important;
}

.terminal .window {
	left: 50%;

	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}

#personal .skills article:nth-child(3):first-child {
	width: 100%;
}

#personal .skills article:nth-child(3) {
	text-align: left;
	width: 100%;
}

#personal .skills article:nth-child(3) ul {
	width: calc(100% - 37px);
	margin-left: 37px;
}

#personal .skills article:nth-child(3) ul li {
	display: inline-block;
	float: left;
	margin-left: 5px;
}

#personal .skills article:nth-child(3) ul li:not(:last-child):after {
	content: ", ";
}

/* -------------------------------------------------- */
/* GENERAL
/* -------------------------------------------------- */

#webpage b {
	width: 100%;
	color: var(--text);
}

h4.with-icon {
	margin-bottom: 5px;
}

h4.with-icon > * {
	display: inline-block;
}

h4.with-icon img {
	position: absolute;
	top: 50%;

	transform: translateY(-60%);

	width: auto;
	height: 32px;
}

h4.with-icon > p {
	line-height: 32px;
}

h4.with-icon > p,
h4.with-icon + ul li {
	margin-left: 42px;
}

.skills article {
	width: calc(50% - 5px);
	text-align: left;
}

/* -------------------------------------------------- */
/* SKILLS
/* -------------------------------------------------- */

.skills {
	width: 100%;
}

.skills article * {
	text-align: left;
}

.skills h4.with-icon {
	color: var(--color-red);
}

.skills h4.with-icon img {
	filter:
		invert(50%)
		sepia(82%)
		saturate(3401%)
		hue-rotate(326deg)
		brightness(106%)
		contrast(103%);
}

section.color:not(.transparent) .skills * {
	color: #FFFFFF;
}

section.color:not(.transparent) .skills h4.with-icon img {
	filter: invert(100%)
		sepia(56%)
		saturate(1%)
		hue-rotate(273deg)
		brightness(102%)
		contrast(101%);
}

/* Mobile */
@media screen and (max-width: 530px) {
	.skills article {
		width: 100%;
	}
}

/* Desktop */
@media screen and (min-width: 530px) {
	.skills article:nth-child(even) * {
		text-align: right;
	}

	.skills article:nth-child(even) h4.with-icon img {
		right: 0;
	}

	.skills article:nth-child(even) h4.with-icon > p,
	.skills article:nth-child(even) ul li {
		margin-left: 0;
		margin-right: 42px;
	}
}