メディアクエリが適用されない

Question

わからないこと

自力でメディアクエリを適用させようとコードを書いていたのですが、どうしても適用されずに解決できなかったのでお伺いしたいです。今回はcssファイルではなくhtmlのhead内に直接書き込んでいます。
下記にコードの一部をコピペしました。もしお分かりの方がいらっしゃれば、ご教示いただければと思います。
解決したい点としましては、スマホ用(600px)のスタイルを適用したいです。

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>「Hibino JUNGLE GYM」OPENキャンペーン</title> <style> body{ font-family:Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; max-width:1000px; } img{ max-width:100%; } h1{ font-size:36px; } h2{ font-size:24px; } .yellow{ background:linear-gradient(transparent 65%,yellow 65%); } .red{ background-color:red; color:white; font-weight:bold; text-align:center; } .box1{ max-width:900px; padding: 0.5em 1em; margin: 2em 0; background: #FFF; border: dashed 1px gray;/*線*/ border-radius: 10px;/*角の丸み*/ text-align:left; } .box1 figure.left{ float: left; } .box1 figure.right{ float: right; } .clearfix:after{ content:""; display:block; clear:both; } figcaption{ font-size:12px; }

a{
  display: block;
  background-color:blue;
  color:white;
  font-size:20px;
  text-align: center;
  border-radius:5px
  text-decoration:none!important;
  max-width:300px;
  animation: prunprun 2.2s ease-in infinite;
  -webkit-animation:prunprun 2.2s ease-in infinite;
  -moz-animation:prunprun 2.2s ease-in infinite;
  -o-animation:prunprun 2.2s ease-in infinite;
  -ms-animation:prunprun 2.2s ease-in infinite;
}

@@keyframes prunprun{
  48%, 62%{transform: scale(1.0,1.0);}
  50%{transform: scale(1.1,0.9);}
  56%{transform: scale(0.9,1.1)translate(0,-5px);}
  59%{transform:scale(1.0,1.0)translate(0,-3px); }
}

@-webkit-keyframes prunprun{
  48%,62%{-webkit-transform:scale(1.0,1.0);}
  50%{transform: scale(1.1,0.9);}
  56%{transform: scale(0.9,1.1)translate(0,-5px);}
  59%{transform:scale(1.0,1.0)translate(0,-3px); }

}
a:hover{
  background-color:darkblue;
  color:white;
}
a:active{
  background-color:skyblue;
  color:white;
}

@media screen and (max-width:600px;) {
  body{font-size:1.6vw;}
  h1{font-size:3.6vw;}
  h2{font-size:2.4vw;}
  figcaption{font-size:1.2vw;}
  a{font-size:5.0vw;}
}

</style>

Answer 1

max-width:600pxの最後の『;』はいらないですね。

Comments

[ZONO_MOMO]

ご回答いただきありがとうございます！
無事適用されました！