*{
  margin:0px;
  padding:0px;
}
body{
  font-family: sans-serif;
  background-color: #f9f9fd;
  background-image: radial-gradient(#9448cc 2px, #f9f9fd 2px);
  background-size: 50px 50px;
}

.container{
  width:280px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background-color: #9448cc;
  padding: 16px;
  border-radius:8px;
}
p{
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: 450;
  margin:15px;
}

#inputarea{
  width:255px;
  height: 35px;
  display: flex;
  align-items: center;
  margin: 4px 14px;
  outline: none;
  padding: 0px 5px;
  color:#333;
  border: none;
  border-radius: 5px;
  outline:none;
}

#inputarea:focus{
  border: 2px solid #7575ff;
}

.avtar{
  width:250px;
  height: 180px;
  margin: 10px 10px;
  padding: 0px 7px;
  background-color: #ffe;
}
#img{
  width:251px;
  height: 180px;
}
input[type=button]{
  border:none;
  outline: none;
  width:261px;
  height:40px;
  margin:0px 11px;
  font-size:15px;
  color:#666;
}
span{
  margin-left:80px;
  color:#ddf;
}