* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #f9f9f9;
}

:root {
	--section-bg: rgba(0,0,0, .7);
	--border-radius: 4px;
	--title-size: 3.5rem;
	--transition-time: 400ms;
	--transition-delay: calc(var(--transition-time) / 1.4);
	--line-delay: calc(var(--transition-time) * 1.4);
	--line-volumen: 4px;
	--projects-color: #FF6464;
	--about-color: #FFAC64;
	--contact-color: #af64ff;
	--form-color: #7272C7;
}

html, body {
	font-size: 16px;
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	box-sizing: border-box;
	font-family: "Calibri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

img {
	width: 100%;
}

button {
	outline: none;
}

/* This icon color work for tools */
.icon:hover .icon-color {
	fill: var(--projects-color);
}

/* This work for github icon hover */
.github-icon:hover .icon {
	fill: #fff;
}

	body::-webkit-scrollbar {
	width: .81rem;
}

body::-webkit-scrollbar-thumb {
	background: var(--projects-color);
	border-radius: 50px;
	border: solid 4px #000;
}

body::-webkit-scrollbar-track {
	background: #000;
}

@media (max-width: 1024px) {
	html {
		font-size: 14px;
	}
}