/* CSS Document */

/* Globals*/
:root {
	
	/* Colors */
	--accent1: #63042A;
	--accent2: #820749;
	--accent3: #55012F;
	--bg1: #30001bcf;
	
	/* Font Sizes */
	--xs:12px;
	--sm:14px;
	--md:20px;
	--lg:30px;
	--xl:40px;
	
	/* Spacing */
	--p1:5em;
	--ls:.1em;
	
	
	/* Transitions */
	--transition-time: .15s;
    --transition-type: ease-in-out;
}


body {
	background-image: url("../img/bg.jpg");
	font-family: Barlow, sans-serif;
	color:#ffffff;
	font-size: var(--md);
	font-weight:600;
	margin:0;
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	height: 100%;
}





.small {font-size:var(--sm);}

/* Content */



.container {
	min-width: 100%;
}


.inner {
	display: flex;
	justify-content: center;
	height: 100%;
	position: relative;
}


.blob {
	margin-top: 6em;
	    width: 100%;
    max-width: 705px;
}


.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color:var(--bg1);
}


.content {
	text-align: center;
	display: flex;
    flex-direction: column;
    align-items: center;
	margin:0;
	position: absolute;
	margin-top: 3em;
}




div.profile {
	background-image:url("../img/self.jpg");
	background-size:100%;
	width:150px;
	height:150px;
	border-radius:150px;
	border: 10px var(--accent1) solid;

}

.logo {
	margin-top:1.4em; 
	width:300px; 
	max-width:100vw;
	max-width: calc(100vw - 2em);
}

header {
	display:flex; 
	align-items: center;
	flex-direction: column;
	flex-wrap:nowrap; 
	margin-bottom:1.5em;
}

section {
	margin-bottom:2em;
}

#intro {
	text-transform:uppercase;
	letter-spacing: var(--ls);
	line-height:1.2em;
	font-weight:800;
}


#socials {
	display:flex; 
	justify-content:center;
	column-gap:1em;
	row-gap: 1em;
    flex-wrap: wrap;
}

a.icon {
	width: 2em;
    height: 2em;
    border-radius: 4em;
    border: 3px solid #ffffff;
    padding: 1em;
}

.icon {
	display: flex;
    align-items: center;
    justify-content: center;
}


a.icon svg {fill:#ffffff;}

a.icon:hover{
	border-color: var(--accent2);
}

a.icon:hover svg {
	fill: var(--accent2);
}








#links {
	display:flex; 
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap:1em;
	justify-content: center;
	max-width:600px;
	margin:0 auto;
}

#links a {
	background-color: var(--accent3);
	padding:10px 20px; 
	margin:0;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--sm);
	letter-spacing: var(--ls); 
	border-radius:.6em;
}

#links a:hover {
/*	background-color: var(--accent2);*/
	filter: drop-shadow(#000000cf 0em .2rem .2em);
	margin-top:-.2em;
	background-color: var(--accent2);
}





/* Transitions */

a.icon,
a.icon:hover,
a.icon svg,
a.icon:hover svg,
#links a,
#links a:hover

{
	transition: all var(--transition-type) var(--transition-time);
}