@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.lug.ustc.edu.cn/css?family=Roboto:400,300);

html,body { height: 100%; }

body {
  background: linear-gradient(#442755,#D9535E);
  font-family: 'Roboto', sans-serif;
  font-size: 2em;
  font-weight: 200;
  color: rgba(255,255,255, .9);
}

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

.visually-hidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

form {
  width: 50%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

[type="text"]{
  background: none;
  border: 1px solid rgba(255,255,255, .6);
  border-top: 0;
  border-right: 0;
  border-left: 0;
  width: 100%;
  transition: all .3s ease-in-out;
  &:focus { 
    border-width: 12px; 
    outline: none;
  }
}

[type="submit"]{
  background: none;
  color: #fff;
  border: 0;
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

::-webkit-input-placeholder {
  color: rgba(255,255,255, 1);
  opacity: 0;
  animation: fade 10s forwards;
}

@keyframes fade{
  0% { opacity: 0; }
  100% { opacity: 1; }
}