* {
	padding: 0;
	margin: 0;
}

:root {
	--orange-color: #FF9900;
	--page-bg-color: #1d1d1d;
}

body {
	background-color: rgb(60, 60, 60);
	font-family: Assistant;
	font-weight: 200;
}

::-webkit-scrollbar {
	display: none;
}

.page {
	width: 100vw;
	height: 100vh;
	background: var(--page-bg-color);
}

/* TITLE */

.title_wrapper {
	padding-left: 2vw;
}

.rotated_title {
	height: calc(100vh - 45px);
	position: absolute;
	color: white;
	text-transform: uppercase;
	text-align: center;
	font-size: max(2.5vw, 20px);
	letter-spacing: min(10px, 1vw);
	writing-mode:vertical-rl;
	transform-origin: center;
	transform: rotate(180deg);
}

.main-wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.horizontal-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.title-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#hi_title_text {
	text-transform: uppercase;
	letter-spacing: 2px;
	color: white;
	font-size: max(6vw, 40px);
}

#hi_subtitle {
	color: white;
	font-weight: 200;
	font-size: max(1vw, 15px);
}

.spacer {
	padding-left: 3vw;
	padding-right: 3vw;
}

#about_picture {
	padding-right: min(5vw, 140px);
	padding-bottom: 0px;
}

#picture_contact.horizontal-wrapper {
	padding-top: 80px;
}


div.contact-container {
	/*width: 80vw;
	height: 95vh;*/
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	/*padding-left: 10vw;*/
}

div.details-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

div.contact-detail-container {
	display: flex;
	flex-direction: row;
	align-items: center; 	/*vertical center*/
	padding: 2vh; 
}

div.address-container {
	display: flex;
	flex-direction: column;
}


#location_svg, #mail_svg, #phone_svg, #linkedin_svg  {
	width: 50px;
	height: 50px;
	overflow: visible;
}

#location_circle, #mail_circle, #phone_circle, #linkedin_circle {
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	transition: 0.5s;
}

/* for initial animation to keep actual element unblocked from animation forwards */
#location_text_wrapper, #mail_text_wrapper, #phone_text_wrapper, #linkedin_text_wrapper {
	transition: 0.5s;
	opacity: 0.0;
	padding-left: 20px;
}

#location_text, #mail_text, #phone_text, #linkedin_text {
	transition: 0.5s;
	color: rgb(210, 210, 210);
}

#mail-container:hover #mail_circle, 
#location-container:hover #location_circle, 
#phone-container:hover #phone_circle,
#linkedin-container:hover #linkedin_circle {
	transform-origin: center;
	transform: scale(1.1, 1.1);
	stroke: var(--orange-color);
}

#location-container:hover #location_text,
#mail-container:hover #mail_text,
#phone-container:hover #phone_text,
#linkedin-container:hover #linkedin_text {
	transform: translateX(10px);
	color: white;
}

@keyframes about_circle_anim {
	from {}
	to {stroke-dashoffset: 0;}
}

@keyframes about_text_anim {
	from {transform: translateX(-20px);}
	to {opacity: 1.0;}
}


/* LOCATION */

#contact_details.revealed #location_circle {
	animation: about_circle_anim 1.5s ease-out forwards 0.0s;
}

#contact_details.revealed #location_text_wrapper {
	animation: about_text_anim 1.0s ease-out forwards 0.0s;
}

#pin {
	transform: translateY(-100px);
	opacity: 0.0;
}

#pin_ground {
	transform: translateY(30px);
	opacity: 0.0;
}

#contact_details.revealed #pin_ground, #contact_details.revealed #pin {
	animation: envelope_anim 2.0s ease forwards 0.0s;
}

@keyframes envelope_anim {
	to {transform: translateY(0px); opacity: 1.0;}
}


/* MAIL */

#contact_details.revealed #mail_circle {
	animation: about_circle_anim 1.5s ease-out forwards 0.25s;
}

#contact_details.revealed #mail_text_wrapper {
	animation: about_text_anim 1.0s ease-out forwards 0.25s;
}

#letter {
	transform-origin: center;
	transform: scale(0.6, 0.6);
	opacity: 0;
}

#contact_details.revealed #letter {
	animation: letter_anim 2.0s ease forwards 0.25s;
}

@keyframes letter_anim {
	to {transform: scale(1.0, 1.0); opacity: 1.0;}
}

/* PHONE */

#contact_details.revealed #phone_circle {
	animation: about_circle_anim 1.5s ease-out forwards 0.5s;
}

#contact_details.revealed #phone_text_wrapper {
	animation: about_text_anim 1.0s ease-out forwards 0.5s;
}

#phone {
	transform-origin: center;
	transform: rotate(180deg);
	opacity: 0;
}

#contact_details.revealed #phone {
	animation: phone_anim 2.0s ease forwards 0.5s;
}

@keyframes phone_anim {
	to {transform: rotate(0deg); opacity: 1.0;}
}


/* LINKEDIN */

#contact_details.revealed #linkedin_circle {
	animation: about_circle_anim 1.5s ease-out forwards 0.75s;
}

#contact_details.revealed #linkedin_text_wrapper {
	animation: about_text_anim 1.0s ease-out forwards 0.75s;
}

#i {
	transform: translateY(-100px);
	opacity: 0.0;
}

#n {
	transform: translateY(100px);
	opacity: 0.0;
}

#contact_details.revealed #i, #contact_details.revealed #n {
	animation: letters_anim 2.0s ease forwards 0.75s;
}

@keyframes letters_anim {
	to {transform: translateY(0px); opacity: 1.0;}
}


/* CONNECTION GRAPHIC */


#connection_graphic {
	width: 300px;
	height: 300px;
	overflow: visible;
}

#connection_graphic > #conn01 {
	transform-origin: center;
	animation: connt01-anim 7.0s ease infinite;
}

@keyframes connt01-anim {
	0%, 100% {transform: rotate(3deg);}
	25%, 75% {transform: rotate(0deg);}
	50% {transform: rotate(-3deg);}
}

#connection_graphic > #conn02 {
	transform-origin: center;
	animation: connt02-anim 15.0s ease infinite;
}

@keyframes connt02-anim {
	0%, 50%, 100% {transform: translate(0px, 0px);}
	30% {transform: translate(-20px, 5px);}
	70% {transform: translate(-10px, 0px);}
}

#connection_graphic > #conn03 {
	transform-origin: center;
	animation: connt03-anim 12.0s ease infinite;
}

@keyframes connt03-anim {
	0%, 50%, 100% {transform: translate(0px, 0px);}
	25% {transform: translate(20px, -10px);}
	75% {transform: translate(-10px, 5px);}
}

#connection_graphic > #hero_dot {
	transition: 0.5s;
	transform-origin: center;
	animation: hero_dot-anim 20.0s ease infinite;
}

#connection_graphic > #smiley {
	transform-origin: center;
	animation: hero_dot-anim 20.0s ease infinite;
}

@keyframes hero_dot-anim {
	0%, 50%, 100% {transform: scale(1.0, 1.0);}
	25% {transform: scale(1.1, 1.1); }
	75% {transform: scale(0.9, 0.9); }
}

#connection_graphic > #hero_dot:hover {
	fill: transparent;
}

@media screen and (max-width: 800px) {
	#connection_graphic {
		display: none !important;
	}
}



/* CONTACT SHORTCUTS */

.contact-shortcuts {
	display: none;
}

.links-logo {
	margin: 30px;
	/*width: clamp(80px, 10vw, 100px);*/
	height: 30px;
}



/* MOBILE MODS */

@media screen and (max-width: 500px) {
	.title_wrapper {
		display: none;
	}

	#about_picture {
		padding-right: 0px;
		padding-bottom: 0px;
	}

	#picture_contact.horizontal-wrapper {
		padding-top: 40px;
	}

	div.contact-container {
		display: none;
	}

	.contact-shortcuts {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 40px;
	}
}