グラデーション色反映なし

前提・実現したいこと

contact-bgをグラデーション3色を反映させたいです。
base.scssで変数を用いて反映させたい

発生している問題・エラーメッセージ

変数を使うと反映ができません！

Googleツール エラーメッセージ:http://ip-api.com/json net::ERR_NETWORK_CHANGED

該当のソースコード

HTML
1  <section class="contact">
2            <div class="inner">
3                <p class="jp-ttl">お問い合わせ</p><!-- /.jp-ttl -->
4                <p class="en-ttl">contact</p><!-- /.en-ttl -->
5            
6                <p class="message">コーディングの人出が足りないとき、<br> あなたの力になります</p>
7                <div class="form-bg">
8                    <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfyhr5CGpd1GWI1uP0lrjBuJWEFlpVsisPENuAR06FGfxUGwQ/formResponse">
9                        <div class="form-item">
10                            <div class="form-fx">
11                                <p class="item">お名前</p><!-- /.item -->
12                                <p class="necessary">必須</p><!-- /.necessary -->
13                            </div><!-- /.form-fx -->
14                            <input type="text" name="name">
15                        </div><!-- /.form-item -->
16                        <div class="form-item">
17                            <div class="form-fx">
18                                <p class="item">メールアドレス</p><!-- /.item -->
19                                <p class="necessary">必須</p><!-- /.necessary -->
20                            </div><!-- /.form-fx -->
21                            <input type="text" name="e-mail">
22                        </div><!-- /.form-item -->
23                        <div class="form-item">
24                            <div class="form-fx">
25                                <p class="item">お問い合わせ内容</p><!-- /.item -->
26                                <p class="necessary">必須</p><!-- /.necessary -->
27                            </div><!-- /.form-fx -->
28                            <textarea name="entry" type="text"　rows="8" cols="80"></textarea>
29                        </div><!-- /.form-item -->
30                        <div class="agree">
31                            <input class="checkbox" type="checkbox" name="entry" value="required"></div><!-- /.agree -->
32                            <label for="agree">プライバシーポリシーに同意する</label>
33                        </div><!-- /.agree -->
34                        <div class="sent-btn">
35                            <p>送信する</p>
36                        </div><!-- /.sent-btn -->
37                    </form>
38                </div><!-- /.tb-bg -->
39            </div><!-- /.inner -->
40        </section><!-- /.contact -->

CSS
1.contact {
2  width: 1366px;
3  height: 1027px;
4  background-color: linear-gradient(to right, #05A5FA, #63FBD7, #67FFD6);
5}
6
7.message {
8  text-align: center;
9}
10
11.form-bg {
12  background-color: #fff;
13  border: 1px solid #00000029;
14  -webkit-box-shadow: 0px 3px 6px #00000029;
15          box-shadow: 0px 3px 6px #00000029;
16}
17
18.form-bg .form-item .form-fx {
19  display: -webkit-box;
20  display: -webkit-flex;
21  display: -ms-flexbox;
22  display: flex;
23}
24
25.form-bg .form-item .form-fx .item {
26  margin-right: 20px;
27}
28
29.form-bg .form-item .form-fx .necessary {
30  display: block;
31  background-color: #0C449B;
32  width: 60px;
33  height: 30px;
34  border-radius: 10px;
35  color: #fff;
36  text-align: center;
37}