body { background: #E8E8D5; text-align: right; margin:0; padding: 0; display: flex; min-height: 100vh; width: 100%; align-items: center; }

a { outline: none; }

#content { text-align: right; margin-right: 100px; position: absolute; right: 0; }

#name { padding: 0; margin: 0 0 40px 0; }

#name img { width: 580px; height: auto; max-width: 100%; }

#tagline, #intro { font-family: 'IBM Plex Serif', serif; }

#intro { width: 340px; padding: 0; margin: 0 0 20px auto; font-size: 11px; font-weight: 300; 
	line-height: 1.6em; letter-spacing: 15%; 
}

#tagline { font-size: 12px; padding: 0; margin: 0 0 10px 0; }

#contact { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 13px; }

	#contact a, #contact a:active, #contact a:visited { color: #000; text-decoration: none; }

	#contact a:hover { text-decoration: underline; }


/* animations */

/* default state */
#name, #tagline, #intro, #contact { 
	display: none;  position: relative; 
	opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; -o-opacity: 0;
}

#name { top: -100px; }

#tagline, #intro, #contact { top:-50px; }


/*****  MEDIA QUERY  *****/

@media only screen and (max-width: 780px) {
	#content { margin: 0 30px; }
	#name img { max-width: 100%; height: auto; }
}

@media only screen and (max-width: 400px) {
	#intro { max-width: 100%; width: auto; }
}