styleタグが反映されない　monaco　ワンタップゲーム

monacoのワンタップゲーム作成ログイン画面の作成について

リンク先の動画（2分16秒辺り）のような正しい表示がされておらず、
下記の画像のようにstlyeタグの内容が無視されています。

なぜでしょうか


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    
    <script src="components/loader.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <script>
        $(function() {
              //mBaaSの初期化
              var application_key ="84c8bb1fc0be105b09745ddbb135eec91ba83100b5a108beffab72b16459023a";
              var client=key = "4d6a38300a0bf8521426b715a6bbfd043dbcba426325dfeeb0f16c8f1b30a4c7";
              var ncmb = new NCMB(application_key, client_key);
              
              //ログイン・新規登録処理
            
            });
        
        
        
    </script>
    
    <style>
    
     body {
         background-color:#BBDEFB;
         padding-top: 20px ;
         font-family:Verdana, sans-serif;
         }
         form{
             padding: 30px auto;
             text-align :center;
         }
         input{
             border-radius: 5px
             padding: 7px
             margin-bottom: 10 px
             width : 200px;
             font-size:20p;
             
         }
     
    
    </style>
    
    
    
</head>
<body>

 <form>
 <input type="text"   id="username" placeholder="User name" />
 <input type="password" id="password" placeholder="Password" />
 <input type="submit" value="Register/Login" />
 
 </form>

</body>
</html>