:root {
	--skill-color: black;
	--container-width: 600px;
	--skill-size: calc(var(--container-width) / 5);
}

.skills {
	width: var(--container-width);
}

.skill {
    padding-top: 2rem;
	display: flex;
	flex-wrap: wrap;
}

.skill div {
	margin-right: 20px;
	margin-bottom: 20px;
	min-height: var(--skill-size);
	width: var(--skill-size);
	background-color: #fff;
	display: grid;
	place-items: center;
	padding: 5px;
	border-radius: 20px;
}

.skill p {
	color: var(--skill-color);
	font-weight: 600;
	margin-bottom: -2px;
}

.skill div svg {
	min-height: calc(var(--skill-size) - 40px);
	width: calc(var(--skill-size) - 40px);
	color: var(--skill-color);
	transition: all 390ms ease-in-out;
	margin-bottom: -5px;
}

.csharp:hover {
	--skill-color: #6700ed;
}
.cplusplus:hover {
	--skill-color: #0101e8;
}
.dotnet:hover {
	--skill-color: #fb00ff;
}
.sql:hover {
    --skill-color: #a8a8a8;
}
.js:hover {
	--skill-color: #fddd00;
}
.html:hover {
	--skill-color: #f1662a;
}
.css:hover {
	--skill-color: #1572b6;
}
.react:hover {
	--skill-color: #00d8ff;
}
.node:hover {
	--skill-color: #539e43;
}

/* Rule if browser windoe is 600px wide or less */
@media only screen and (max-width: 600px) {
	:root {
		--container-width: 500px;
	}
}

/* Rule if browser windoe is 500px wide or less */
@media only screen and (max-width: 500px) {
	:root {
		--container-width: 380px;
	}
}

/* Rule if browser windoe is 350px wide or less */
@media only screen and (max-width: 350px) {
	:root {
		--container-width: 300px;
	}
}