@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

:root{
	--main-background: #e6e6e6;
	--main-fonts-color: #0b0c0f;
	--main-decor-color: #fff;
    --main-header-background:#a0a0a0;
	--main-font-family: 'Poppins', sans-serif;
}

*{
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

main{
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--main-background);
}

/*────────────────── 
       header
──────────────────*/

header{
	margin: 0 auto;
	width: 100%;
	height: 70px;
	display: flex;
    align-items: center; 
	justify-content: space-around; 
    background: transparent;
	position: fixed;
	top: 0;
	transition: 0.3s;
	z-index: 5;
}

.logo img{
	padding-top: 5px;
	height: 50px;
	cursor: pointer;
}

.nav-bar{
	list-style:none;
	position: relative;
	display: inline-flex;
}

a.nav-link{
	margin: 2px;
	padding: 5px 10px;
	text-decoration: none;
	color: var(--main-fonts-color);
	font-family: var(--main-font-family);
	cursor: pointer;
	text-transform: uppercase;
}

.nav-link:hover {
	color: #000000;
    background: var(--main-decor-color);
}

/*──────────────────
       home
──────────────────*/

#home{ 	
	margin: auto;
	height: 100vh;
	color: var(--main-fonts-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.intro {
	text-align:center;
    color: var(--main-fonts-color);
	z-index: 1;
	margin: auto;
	padding: 20px;
}

.intro  p{
    margin: 5px;
	font-size:1.2rem;
	font-family: var(--main-font-family);
	text-align:center;
}

 h3{
	padding-bottom: 15px;
    letter-spacing: normal;
    font-family: var(--main-font-family);
	font-style: normal;
	font-size: 40px;
	color: var(--main-fonts-color);
	text-shadow: 0px 0px 40px var(--main-decor-color);
}
.card{
	display: flex;
	flex-direction: column;
	margin: 20px;
	width: 200px;
	height:250px;
	border-radius:12px;
    background:var(--main-decor-color);
}

.card .work-content{
	text-align: center;
	padding: 10px 5px;
	font-size: 1rem;
	color: var(--main-fonts-color);
	font-family: var(--main-font-family);
	cursor: pointer;
}


/*──────────────────
    social media
──────────────────*/

.social-media{
	padding: 10px;
	display: flex;
	position: center;
    align-items: space-around;
	justify-content:center;
}

.social-media a {
    margin: 10px;
    font-size: 2rem;
    text-align:center;
    display: inline-block;
	color: var(--main-fonts-color);
}

.social-media a i{
	cursor: pointer;
}

.social-media  a:hover {
	color: var(--main-decor-color);
	text-shadow: 0 0 50px var(--main-decor-color);
}


/*────────────────── 
       footer
──────────────────*/

footer {
	width: 100%;
	height: 100%;
    background-color: var(--main-header-background);
}

/*──── hr ─────*/

hr {
    background: var(--main-fonts-color);
	margin: 2px;
	height: 3px;
	width: 150px;
    border-radius:5px;
	border: hidden;
	margin-inline-start: auto;
    margin-inline-end: auto;
}