:root {
	--primary-raw: 255, 255, 255;
	--primary: rgb(var(--primary-raw));
	--primary-light: rgba(var(--primary-raw), 0.9);
	--primary-dark: rgba(var(--primary-raw), 0.3);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1,
h2,
h3,
h4 {
	color: var(--primary-light);
}

h1 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	letter-spacing: 0.025em;
}

h2 {
	font-size: 1.125rem;
	line-height: 1.75rem;
	letter-spacing: 0.025em;
	font-weight: 500;
}

h3 {
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: .02rem;
}

h4 {
	font-size: 0.75rem;
	font-weight: 100;
	opacity: .7;
}

body {
	background-color: #000;
	background-attachment: fixed;
	background-size: cover;
	display: grid;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 100vh;
}

img {
	border-radius: 4px;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

[data-tooltip]:before {
	/* needed - do not touch */
	content: attr(data-tooltip);
	position: absolute;
	display: none;

	/* customizable */
	transition: all 0.15s ease;
	padding: 0.2rem 0.5rem;
	color: rgba(51, 51, 51, 0.5);
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(32, 32, 32, 0.3);
}

[data-tooltip]:hover:before {
	/* needed - do not touch */
	display: inline-block;
	animation: fadeIn 0.3s;

	/* customizable */
	background: rgba(52, 58, 64, 0.9);
	backdrop-filter: blur(5px);
	color: white;
	font-weight: initial;
	font-size: initial;
	margin-top: 50px;
	width: 5rem;
	text-align: center;
	/* margin-left: 20px; */
	margin-left: -1.5rem;

	/* align center */
	/* left: 25%;
	transform: translateX(-50%);
	right: 50%; */

	z-index: 5;
}

[data-tooltip]:not([data-tooltip-persistent]):before {
	pointer-events: none;
}

#background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#card {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2rem;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	background-image: linear-gradient(to right, rgba(55, 65, 81, 0.4), rgba(31, 41, 55, 0.7));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 3px solid rgba(255, 255, 255, 0.1);
	z-index: 2147483647;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 1.75rem;
	line-height: 1.25rem;
}

#vertical-divider {
	border: 0;
	border-left: 3px dashed rgba(255, 255, 255, 0.1);
	height: 25rem;
	margin: 0 1.75rem 0 1.75rem;
}

#row {
	width: 450px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

#row>* {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-basis: 100%;
	flex: 1;
}

.icon {
	width: 1rem;
	height: 1rem;
	z-index: 10;
}

/* #info-card > *:not(:hover) {
	transition: opacity cubic-bezier(0.5, 0, 0.5, 1) 500ms;

	opacity: .6;
} */

#row:hover {
	transition: all cubic-bezier(0.5, 0, 0.5, 1) 300ms;
	transform: scale(1.05);
	padding: 0.1rem 0;
}

/* div:hover > div > div > *.icon {
	transition: all cubic-bezier(0.5, 0, 0.5, 1) 300ms;
	transform: scale(1.1);
}

div:hover > #col1 > #img-title > h3, div:hover > #col1 > h4 {
	transition: all cubic-bezier(0.5, 0, 0.5, 1) 300ms;
	margin-left: 2rem;
} */

#col1 {
	align-items: flex-start;
}

#col2 {
	align-items: flex-end;
	max-width: 10rem;
}

#img-title {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem;
}

#sub-img-title {
	margin-left: calc(16px + .3rem);
}

#profile-pic {
	border-radius: 50%;
	width: min(192px, 20vh);
	height: min(192px, 20vh);
	margin-bottom: .5rem;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 5px solid rgba(255, 255, 255, 0.1);
}

#bio-card {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

#button-container {
	max-width: 192px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 1rem 0 0 0;
}

i {
	font-size: 2rem;
	padding: .5rem;
	color: var(--primary-light);
	transition: all cubic-bezier(0.5, 0, 0.5, 1) 250ms;
}

#button-container:hover a:not(:hover) > i {
    -webkit-transition: opacity 500ms ease-in-out forwards;
    -moz-transition: opacity 500ms ease-in-out forwards;
    -o-transition: opacity 500ms ease-in-out forwards;
    transition: opacity 500ms ease-in-out forwards;

    opacity: 0.4;
}

a:hover > i {
    -webkit-transition: padding 100ms ease-in-out forwards;
    -moz-transition: padding 100ms ease-in-out forwards;
    -o-transition: padding 100ms ease-in-out forwards;
    transition: padding 100ms ease-in-out forwards;

    padding: 0 0.6rem 0 0.6rem;
	margin: 0 0 0.2rem 0;
}

#linkedin:hover {
	color: #00a0dc;
	text-shadow: 0 0 32px #0077b5;
}

#github:hover {
	color: #111;
	text-shadow: 0 0 32px #333;
}

#resume:hover {
	color: #FFD700;
	text-shadow: 0 0 32px #FFD800;
}

@media only screen and (max-width: 640px) {
	#card {
		flex-direction: column !important;
	}

	#row {
		width: 300px;
	}

	#card {
		padding: 1rem;
	}

	#vertical-divider {
		display: none;
	}

	#background {
		display: none;
	}

	#col2 {
        display: none;
    }

	body {
		background: #111;
		overflow: auto;
	}
}