/* ------------------------------
		3. Menu Css
------------------------------ */

.header-main {
    position: fixed;
    width: 10%;
    /* height: 100%; */
    top: 25px;
    bottom: 25px;
    overflow: auto;
    overflow-x: hidden;
    /* background-color: #2c2c38; */
    border: 5px solid #2c2c38;
    -webkit-box-shadow: 0 0 25px 1px #2c2c38;
    -o-box-shadow: 0 0 25px 1px #2c2c38;
    -moz-box-shadow: 0 0 25px 1px #2c2c38;
    box-shadow: 0 0 25px 1px #2c2c38;
    z-index: 99;
}
.header-main ul li {
	display: flex;
	align-items: center;
    justify-content: center;
	
	margin: 38px 0;
	-webkit-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

.header-main ul li span.active {
	color: #fff;
}

#about:target .header-main ul li a,
#resume:target .header-main ul li a,
#portfolio:target .header-main ul li a,
#blog:target .header-main ul li a,
#contact:target .header-main ul li a {
	-webkit-transform: scale(.8);
			transform: scale(.8);
}

#about:target .icon-a,
#resume:target .icon-r,
#portfolio:target .icon-p,
#blog:target .icon-b,
#contact:target .icon-c {
	color: #fff;
	-webkit-transform: scale(1.3) !important;
			transform: scale(1.3) !important;
}




/* ---------------------------------
		13. Tooltip Css
--------------------------------- */

[data-tooltip] {
	position: relative;
}

[data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 99;
	-webkit-transition: transform .3s ease, opacity .3s;
			transition: transform .3s ease, opacity .3s;
}

[data-tooltip]:after {
	content: attr(data-tooltip);
	font: normal 10px 'Poppins',sans-serif;
	    background-color: #2c2c38;
	color: #fff;
	padding: 10px 15px;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	white-space: nowrap;
	letter-spacing: 1px;
	text-transform: uppercase;
}

[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0px);
			transform: translateY(0px);
}

[data-tooltip][data-position="top"]:after {
	bottom: 100%;
	margin-bottom: 5px;
	-webkit-transform: translateY(10px);
			transform: translateY(10px);
}

[data-tooltip][data-position="top"]:hover:after {
	-webkit-transform: translateY(0px);
			transform: translateY(0px);
}

[data-tooltip][data-position="left"]:after {
	right: 100%;
	margin-right: 10px;
	-webkit-transform: translateX(0px);
			transform: translateX(0px);
}

[data-tooltip][data-position="left"]:hover:after {
	-webkit-transform: translateX(-10px);
			transform: translateX(-10px);
}

[data-tooltip][data-position="right"]:after {
	left: 100%;
	margin-left: 10px;
	-webkit-transform: translateX(0);
			transform: translateX(0);
}

[data-tooltip][data-position="right"]:hover:after {
	-webkit-transform: translateX(10px);
			transform: translateX(10px);
}

[data-tooltip][data-position="bottom"]:after {
	top: 100%;
	margin-top: 25px;
	-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
}

[data-tooltip][data-position="bottom"]:hover:after {
	-webkit-transform: translateY(0px);
			transform: translateY(0px);
}

a {
    color: #561193;
    text-decoration: none;
}
a:focus, a:hover {
    color: #ffffff;
    text-decoration: underline;
}






::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-corner {
    background-color: #1e1e28;
}
::-webkit-scrollbar-thumb {
    background: #561193;
}
::-webkit-scrollbar-track {
    background-color: #1e1e28;
}