<div id="app"></div>

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 5em;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  background-color: #F0EFEA;
  padding-top: 10em;
}

h1 {
  font-size: 5em;
  text-align: center;
  font-weight: 600;
  color: #353239;
}

h1 span span {
	color: tomato;
	position: relative;
	bottom: -1em;
	opacity: 0;
	animation: move-text 0.75s forwards;
}
h1 span span:nth-child(2n) { color: lightseagreen; }
h1 span span:nth-child(3n) { color: orange; }
h1 span span:nth-child(4n) { color: dodgerblue; }
h1 span span:nth-child(5n) { color: blueviolet; }

@keyframes move-text {
	0% {
		bottom: -0.2em;
		opacity: 1;
	}
	
	50% {
		bottom: 0.2em;
	}

	100% {
		bottom: 0;
		opacity: 1;
	}
}


@media screen and (max-width: 500px) {
  body {
    transform: scale(0.75);
  }
}

const { Component, Children, PropTypes } = React

class SplitText extends Component {
  render(){
    return(
      <span aria-label={this.props.copy} role={this.props.role}>
          {this.props.copy.split("").map(function(char, index){
            let style = {"animation-delay": (0.5 + index / 10) + "s"}
            return <span
              aria-hidden="true"
              key={index}
              style={style}>
              {char}
            </span>;
          })}
        </span>
    );
  }
}

class Layout extends Component {
  render() {
    return(
      <h1><SplitText copy="Sarah Fossheim" role="heading" /></h1>
    );
  }
}

ReactDOM.render(<Layout />, document.getElementById('app'));