The Summit - Code Review - CSS

Hello All - Just throwing this in here - if anyone would like to chime in on the buttons and links CSS - Trying different things. Thanks in advance


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Experience the Summit at Breckenridge!</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./resources/initial.css">
  <link rel="stylesheet" href="./resources/style.css">
</head>
<body>
  <div class="navigation">
    <ul>
      <a class="nav-link">The Lodge</a>
      <a class="nav-link">Our Ski Runs</a>
      <a class="nav-link logo">The Summit</a>
      <a class="nav-link">How to Get Here</a>
      <a class="nav-link">Contact</a>
    </ul>
  </div>

  <div class="banner">
    <div class="banner-text">
      <h1>Experience</h1>
      <h2>The Summit</h2>
      <a href="#" class="btn">Get on the mountain</a>
    </div>
  </div>

  <div class="content">
    <h2>The Experience</h2>
    <div class="description">
      <p>The Summit is the grographical center of the <a href="https://www.gobreck.com">Brekenridge</a> Ski
        Area. It also has the widest variety of terrain, from beginner trails to steep bowl terrain. Lower 
        Peak 8 consists of beginner trails, as well as many intermediate trails mixed with some advance runs. 
        There are four lifts out of the base area: Lift 7, which services as beginner learning area; Lift 5, 
        which services more advance beginner terrain, the Freeway and Park Lake Terrain Parks, and the Alpine 
        Slide. At the north end of the base area, the Colorado SuperChair provides access to the Vista Haus, 
        central Peak 8, as well as access to the Peak 8 back bowls and Peak 9, while the Rocky Mountain 
        SuperChair provides acess to northern Peak 8, the T-Bar, and Peak 6.</p>
      <p>In 2007, The Summit hosted the first Winter RadAir. It was one of the first action sports tours for 
        winter sports. The Summit continues to host the event annually in the 2nd or 3rd weekend in December
        each year. Many of the top athletes in action sports from around the world continue to participate in 
        the RadAir Tour. The Summit Pro Team usually constitues many of the athletes each year and are 
        jointed by other participants such as Shaun Black, Hannah Stabile, Tanner Foyer, Andreas Baald, 
        Gretchen LeBlay, Simon Duvallee, Sarah Blue, Tom Florisch, and Travis <a href="https://www.google.com/search?q=rigatoni&rlz=1C5CHFA_enUS751US751&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj5qu2572vYAhVp3IMKHfkHDyUQ_AUICigB&biw=948&bih=1103">Rigatoni.</a>              
      </p>
    </div>
  </div>

  <div class="activities-panel">
    <h2>The Activites</h2>
    <a class="activity">Skiing</a>
    <a class="activity">Snowboarding</a>
    <a class="activity">Shoeing</a>
    <a class="activity">Dogsledding</a>
    <a class="activity">Tubin</a>
    <a class="activity">Sledding</a>
  </div>

  <div class="footer">
    <h2>1098 Breckenridge Way, Breckenridge, CO 78901</h2>
  </div>
</body>
</html>

------------------------Initial CSS -----------------------
  body {
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
}

.navigation {
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: 1px solid #dddddd;
  left: 0px;
  overflow-y: auto;
  padding: 30px;
  position: fixed;
  text-align: center;
  top: 0px;
  width: 100%;
  z-index: 999;
}

ul {
  margin: 0px;
  padding: 0px;
}

.navigation a {
  color: #736B92;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
  padding: 10px 40px;
  text-transform: uppercase;
}

a.logo {
  color: #2176FF;
  font-family: 'Amatic SC', sans-serif;
  font-size: 34px;
  padding: 0px 60px;
  text-align: center;
  text-transform: uppercase;
}

.banner {
  background-image: url("https://images.unsplash.com/photo-1418290232843-5d7a0bd93f7d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb");
  background-position: center top;
  background-size: cover;
  border-bottom: 1px solid #dddddd;
  height: 700px;
  position: relative;
  text-align: center;
  top: 100px;
  width: 100%;
}

.banner-text  {
  position: relative;
  top: 200px;
}

h1 {
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 60px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  color: #2176ff;
  font-family: 'Amatic SC', sans-serif;
  font-size: 30px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}

.banner h2 {
  font-size: 120px;
  margin: -40px 0px 80px 0px;
}

.content {
  background-image: url('https://content.codecademy.com/courses/learn-links-and-buttons/project/mountain1.jpg');
  background-position: center top;
  background-size: cover;
  border-bottom: 1px solid #eeeeee;
  margin: 0 auto;
  overflow-y: auto;
  padding: 80px 0px;
  position: relative;
  text-align: center;
}

p {
  color: #000000;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  line-height: 42px;
  text-align: left;
}

.description {
  display: inline-block;
  width: 70%;
}

.activities-panel {
  margin-bottom: 40px;
  padding: 80px 0px;
  text-align: center;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

.activities-panel h2 {
  width: 100%;
}

.activity {
  background-color: #2176FF;
  box-sizing: border-box;
  width: 240px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Amatic SC', sans-serif;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin: 5px;
}

.footer {
  background-color: #2176FF;
  padding: 30px;
  text-align: center;
}

.footer h2 {
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 2px;
}

a {
  cursor: default;
  text-decoration-line: none;
}


----------------------------Style.CSS -------------------------
/* font-family: 'Amatic SC', sans-serif;
  font-family: 'Raleway', sans-serif;*/

a {
  cursor: pointer;
  text-decoration: underline;
  color: #bebcc7;
}

a:hover {
  text-decoration: none;
  font-weight: bolder;
}

.nav-link {
  margin: 5px;
  border-radius: 10px;
  background-color: #e2e4eb;
}

.nav-link:hover {
  background-color: #bdcaf0;
}

.btn {
  background-color: #e2e4eb;
  color: #212022;
  padding: 5px 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0px 5px 5px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

.btn:hover {
  text-transform: uppercase;
  background-color: #929499;
  color: #fff;
  border: 1px solid #fff;
} 

.btn:active {
  box-shadow: none;
  border: none;
}

.activity {
  background: linear-gradient(#2176FF, #294e8a);
}

.activity:hover {
  background: linear-gradient(#294e8a, #2176FF);
  transition: font-size 1s;
  font-size: 50px;
}

.activity:active {
  color: #84adf0;
  padding-top: 4px;
}

Was not sure if I should post the whole thing or just the CSS code, so I put everything - the last file is the one that has the new CSS created