@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
 margin: 0;
 padding: 0;
 background: linear-gradient(to top right, #5aabd1 0%, #e98615 50%,  #4CAF50 100%);
 height: 100vh;
 overflow: hidden;
 font-family: Palatino Linotype;
}
.form{font-family: Palatino Linotype;
}
.center{
 width: 430px;
 margin: 130px auto;
 position: relative;
}
.center .header{
 font-size: 28px;
 font-weight: bold;
 color: white;
 padding: 25px 0 30px 25px;
 background: #333;
 border-bottom: 1px solid #333;
 border-radius: 5px 5px 0 0;
}
.center form{
 position: absolute;
 background: white;
 width: 100%;
 padding: 50px 10px 0 30px;
 box-sizing: border-box;
 border: 1px solid #e98615;
 border-radius: 0 0 5px 5px;
}
form input{
 height: 50px;
 width: 90%;
 padding: 0 10px;
 border-radius: 3px;
 border: 1px solid silver;
 font-size: 18px;
 outline: none;
}
form input[type="password"]{
 margin-top: 20px;
}
form i{
 position: absolute;
 font-size: 25px;
 color: grey;
 margin: 15px 0 0 -45px;
}
i.fa-lock{
 margin-top: 35px;
}
form input[type="submit"]{
 margin-top: 40px;
 margin-bottom: 40px;
 width: 130px;
 height: 45px;
 color: white;
 cursor: pointer;
 line-height: 45px;
 border-radius: 45px;
 border-radius: 5px;
 background: #e98615;
}
form input[type="submit"]:hover{
 background: #e98615;
 transition: .5s;
}
form a{
 text-decoration: none;
 font-size: 18px;
 color: #e98615;
 padding: 0 0 0 20px;
}



.topnav a {
    position: absolute;
    background-color: #333;
    top: 0;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }