@import url(./fonts.css);
@import url(./reset.css);
@import url(./header.css);
@import url(./main.css);
@import url(./footer.css);
@import url(./media-queries.css);

:root {
	--stranger-things-font: 'itc_benguiat';
	--st-bold: 800;
	--st-normal: 600;
	--st-lighter: 400;
	--twitter: url(../svgs/twitter.svg);
	--linkedin: url(../svgs/linkedin.svg);
	--git-hub: url(../svgs/github.svg);
	--expand: url(../svgs/expand.svg);
	--small-size-svg: 18px;
	--big-size-svg: 25px;
}

body {
	font-family: var(--stranger-things-font);
	color: white;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgb(34, 32, 32);
}

.about-me-container,
.projects-container,
.footer-container {
	margin: 2rem;
}

h1 {
	font-weight: var(--st-bold);
	font-size: 1.6rem;
	margin: 0.2rem;
}

h2 {
	font-weight: var(--st-normal);
	font-size: 1.1rem;
}

h2 {
	margin: 0.3rem 1rem;
}

.about-me-card,
.project {
	background: #730000;
	background: linear-gradient(
		0deg,
		rgba(115, 0, 0, 1) 0%,
		rgba(54, 24, 24, 1) 59%
	);
}

/* SVGS */

.git-hub,
.twitter,
.linkedin,
.expand,
a {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
		hue-rotate(167deg) brightness(101%) contrast(101%);
}

.git-hub {
	background-image: var(--git-hub);
}

.twitter {
	background-image: var(--twitter);
}

.linkedin {
	background-image: var(--linkedin);
}

.git-hub,
.linkedin,
.twitter {
	background-size: contain;
}

.about-links li,
.socials li {
	width: var(--big-size-svg);
	height: var(--big-size-svg);
}