html,body {
    font-family: 'Raleway', sans-serif;
    padding: 3em 2em;
    font-size: 18px;
    background: #222;
    color: #aaa;
    animation: an 1s ease-out 1 both;
  }
  
  h1,h2 {
    font-weight: 200;
    margin: 0.4em 0;
  }
  h1 { font-size: 3.5em; }
  h2 {
    color: #888;
    font-size: 2em;
    text-decoration:underline;
  }
  /*text*/
  .center{
    width: 100%;
    height: 30%;
    display:flex;
    padding-bottom: 10%;
    }
.center p{
    width: 80%;
    font-size: 30px;
    display: block;
    
}
.center h3{
  width: 80%;
    font-size: 40px;
    display: block;
}
.char{
    font-size: 30px;
    height: 40px;
    
    display: inline-block;
}
li{
  font-size:25px;
}

@keyframes an{
    from{
        opacity: 0;
        transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }
    to{
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}

@media (orientation:portrait) {
  .center{
    height: 15%;
    }

  }