@font-face {
    font-family: 'Braille';
    src: url('/img/fonts/braille/braille-webfont.woff2') format('woff2'),
         url('/img/fonts/braille/braille-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

html {
	height: 100%;
	background: linear-gradient(135deg, #131820e6 0%, #060708f2 100%);
	/* background: linear-gradient(135deg, #fff 0%, #ccc 100%); */
	/* background: linear-gradient(135deg, #e2dfd7 0%, #bdb9af 100%); */
}

body {
	margin: 0;
	padding: 0;
	/* font-family: 'Braille', Arial; */
	font-family: "Figtree", sans-serif;
	font-size: 16px;
	/* letter-spacing: 4px; */
	color: #888;
	/* color: #000; */
	-webkit-font-smoothing: antialiased !important;
	text-rendering: optimizeLegibility !important;
}

::selection {
	background: #000;
	color: #e2dfd7;
}

header {
	position: absolute;
	top: 40px;
	left: 40px;
}

/*
.name {
	animation: name-fade 4s;
}

@keyframes name-fade {
	0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}
*/

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 16px;
}

h1 {
	margin-top: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .5) -25%, rgba(255, 255, 255, .25) 75%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

img {
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: 40px;
	border-radius: 50%;
}

p {
	margin-top: 20px;
	font-size: 16px;
}

p:last-child {
	margin-bottom: 0;
}

a {
	display: inline-block;
	padding-bottom: 4px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .5) -25%, rgba(255, 255, 255, .35) 75%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
	color: #888;
	/* color: #000; */
	text-decoration: none;
	transition: .1s ease;
	border-bottom: 1px solid transparent;
	&:hover {
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}
}

/*
a:hover {
	filter: blur(1px);
	transform: scale(.95);
}
*/

footer {
	position: absolute;
	bottom: 40px;
	left: 40px;
	text-align: left;
	animation: footerFade 4s;
}

/*
.email {
	animation: email-fade 4s;
}

@keyframes email-fade {
	0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}

.portfolio {
	animation: portfolio-fade 4s;
}

@keyframes portfolio-fade {
	0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}

.linkedin {
	animation: linkedin-fade 4s;
}

@keyframes linkedin-fade {
	0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}

.resume {
	animation: resume-fade 4s;
}

@keyframes resume-fade {
	0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 1; }
}
*/