cssでhoverが上手く適用されていないのですが、どうすれば適用されるようになりますか？

htmlの<a href="index.html">FITTED</a>に、CSSでhoverを使ってカーソルを当てると半透明化する処理を行っているのですが、上手く適用されておらず、カーソルを当てても色が変わりません。どのようにすれば、hoverが適用されるようになりますか？どなたかご教授いただけないでしょうか。初心者の質問で、上手く説明できていなかったら申し訳ありません。

htmlコード

<!DOCTYPE html> <html lang="ja"> <head> <mate charset="utf-8"> <title>フルーツデザートを求めて街歩き - FITTED </title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300;1,900&display=swap" rel="stylesheet"> </head> <body> <header> <a href="index.html">FITTED</a> </header> <div> <article> <h1>フルーツデザートを求めて街歩き</h1> <time datetime="2020-07-25"> 2020年07月25日</time> <figure> <img src="img/fruits.jpg" alt"さまざまな果物が盛り付けられたフルーツプレート"> </figure> <p>街歩きをしているとお腹がすきます。そんなときにおすすめなのがフルーツデザートです。</p> <p>果物は手軽に食べることができます。熱中症予防や疲労回復などの効果もあるので、街歩きのエネルギー補給にぴったりです。</p> <p>最近はふらっと立ち寄れるフルーツ専門店も増えてきました。珍しい南国フルーツのプレートや、その場で作ってくれるフレッシュジュースも美味しくて、病みつきになります。</p> </article> </div> <footer> ©　FITTED </footer> </body> </html>

ｃｓｓコード

@charset "UTF-8";

/* ページ全体の設定　*/
body {
margin: 0;
font-family: sans-serif;
font-family: sans-serif;
}

/*　ヘッダーブロック*/
header{
padding: 25px 15px;
color:#29abe2;
font-size: 36px;
font-weight: bold;
text-align: center;
font-family: 'Merriweather', serif;
}

/*　リンク　*/
a{
color:inherit;
text-decoration: none;
}

a:hover{
opacity: 0.7;
}

/*コンテンツブロック　*/
div{
background-color: #29abe2;
padding: 40px 15px;
}

/*　記事　*/
article{
background-color: #ffffff;
padding: 20px;
}
h1{
font-size: 30px;
}
p{
line-height: 2;
}

/* 画像 */
img{
width: 100%;
height: auto;
}
figure{
margin: 0;
}

/* 投稿日　/
time{
color: #666666;
margin-bottom: 15px;
display: block;
}
/ フッターブロック　*/
footer{
background-color: #6ac4eb;
padding: 25px 15px;
color: #ffffff;
text-align: center;
font-family: 'Merriweather', serif;
}