@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);

* { font-family: 'Roboto', sans-serif; line-height:1.2; vertical-align:middle; }

body { background:#222;  }

main {
  display:block;
  position:relative;
  width:31rem;
  margin:2vh auto;
  padding:1rem 0 0;
  background:#d5d5d5;
  outline
  border-radius:.25rem;
  overflow:hidden;
  transform:scale(.75);
  transform-origin:center 3rem;
  transition:transform .3s;
}

.buttons-left{

  animation:fly-in-from-left .8s 1s ease both;
  transform-origin:top right;
}

.buttons-right{

  animation:fly-in-from-right .8s 1s ease both;
  transform-origin:top left;
}

@keyframes fly-in-from-left {
  from {
    transform:translateY(15rem) rotate(15deg);
    opacity:0;
  }
}

@keyframes fly-in-from-right {
  from {
    transform:translateY(15rem) rotate(-15deg);
    opacity:0;
  }
}

.card {
  position:relative;
  z-index:2;
  padding:1.5rem;
  box-shadow:0 1px 2px #aaa;
  background:white;
  margin:0 1rem 1rem;
  border-radius:3px;
}


input {
  display:block;
  width:21.5rem;
  margin:2rem 1rem 2rem;
  border:0;
  font-size:1.2rem;
  padding:.75rem 1rem;
  border-radius:3px;
  box-shadow:0 1px 2px #aaa;
  transition:.5s, margin-bottom .15s;
}

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius: 50%;
    color:#000000;
    text-align:center;
    text-decoration:none;
    background: #FFA62F;
    font-size:28px;    
}


.round-button:hover {
    background: #262626;
}