* {
	margin:0;
	padding:0;
}

@font-face{
	font-family: "hero"; sans-serif;
	src: url(fonts/texgyreheroscn-regular.otf);
}

body {
	font-family: 'Roboto', sans-serif;
	font-weight: light;
	font-size: 2vw;
	line-height: 2.2vw;
	margin: 50px 3% 0 3%;
	background-color: #e3a9a9;
}

section {
	width: 50%;
	float: left;
}

#name {
	color: white;
}

#email {
	text-align: right;
	color: red;
	-webkit-animation-name: color; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */
    animation-name: color;
    animation-duration: 15s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

/*@-webkit-keyframes color {
    0%   {color: black;}
    50%  {color: white;}
    100% {color: black;}
}

@keyframes color {
    0%   {color: black;}
    50%  {color: white;}
    100% {color: black;}
}
*/

@-webkit-keyframes color {
    0%   {color: red;}
    15%  {color: #ff00ce;}
	30%  {color: #bd00ff;}
	45%  {color: blue;}
	60%  {color: #2ecc71;}
	75%  {color: #e3ff00;}
	85%  {color: #ff8100;}
    100% {color: red;}
}

@keyframes color {
    0%   {color: red;}
    15%  {color: #ff00ce;}
	30%  {color: #bd00ff;}
	45%  {color: blue;}
	60%  {color: #2ecc71;}
	75%  {color: #e3ff00;}
	85%  {color: #ff8100;}
    100% {color: red;}
}

@media only screen and (max-width: 600px) {
	section {
	width: 100%;
	float: left;
	}

	body {
	font-size: 5vw;
	line-height: 5.5vw;
	}

	#email {
	text-align: left;
	margin-top: 20px;
	}

}