Footer stuck at the top of page. Please help

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link type="text/css" rel="stylesheet" href="style.css">
  <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=Red+Hat+Display:wght@400;500;700;900&display=swap" rel="stylesheet">
  <title>Frontend Mentor | Order summary card</title>
</head>
<body>
<div class="container">
  <div class="background-image">
  </div>
  <div class="wrapper">
    <img src="/images/illustration-hero.svg">
    <div class="white">
      <div class="main-heading">
        <h1>Order Summary</h1>
        </div>
      <div class="details">
        <p>
          You can now listen to millions of songs, audiobooks, and podcasts on any 
        device anywhere you like!
        </p>
      </div>
    
      <div class="payment">
          <div class="music-icon">
            <img src = "images/icon-music.svg">
          </div>
          <div class="annual">
            <p class="annual-plan">Annual Plan</p>
            <p class="money">$59.99/year</p>
          </div>
          <div class="change">
            <a href="#">Change</a>
          </div>
      </div>
     
      <div class="order">
        <button class="button-1"><p>Proceed to Payment</p></button>
        <button class="button-2"><p>Cancel Order</p></button>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <footer>
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    <a href="#"> Coded by </a>
  </footer>
</div>
</body>
</html>

CSS:

​

:root{
--pale-blue: hsl(225, 100%, 94%);
--bright-blue: hsl(245, 75%, 52%);
--very-pale-blue: hsl(225, 100%, 98%);
--desaturated-blue: hsl(224, 23%, 55%);
--dark-blue: hsl(223, 47%, 23%);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
background-color: var(--pale-blue);
height: 100vh;
position: relative;
}


.container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.background-image{
    background: url(/images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    height: 1000px;
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: o;
    background-position: center;
    z-index: -1;
}

.wrapper{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    height: 90%;
    width: 30%;
    border-radius: 20px;
    overflow: hidden;
}

.wrapper img{
    width: 100%;
}

.white{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    width: 100%;
    align-items: center;
    background-color: white;
}

.main-heading{
    position: absolute;
    top : 20px;
}

.main-heading h1 {
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 20px;
    color: var(--dark-blue);
}


.details{
    position: absolute;
    display: flex;
    text-align: center;
    top: 60px;
    justify-content: center;
    align-items: center;
}

.details p {
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
    color: var(--desaturated-blue);
}


.payment{
    display: flex;
    position: absolute;
    top: 130px;
    width: 90%;
    justify-content: space-between;
    background-color: var(--very-pale-blue);
    border-radius: 12px;
    padding: 10px 10px 10px 10px;
    align-items: center;
}

.payment .music-icon{
    background-color: var(--very-pale-blue);
    z-index: 1;
}

.annual{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 100%;
}

.payment .annual-plan{
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-blue);
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
}

.payment .money{
    font-size: 16px;
    color: var(--desaturated-blue);
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
}

.payment .change{
    font-size: 16px;
    color: var(--bright-blue);
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
    font-weight: 500;
}


.order{
    display: flex;
    position: absolute;
    bottom: 0px;

}

.order{
    position: absolute;
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    width: 90%;
    text-align: center;
}

.order button p{
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: white;
    font-weight: 700;
}

.order .button-2 p{
    font-family: "Red Hat Display" , Arial, Helvetica, sans-serif;
    font-size: 16px;
    color:var(--desaturated-blue);
    font-weight: 700;
}

.order .button-1{
    display: inline-block;
    padding: 13px 13px 13px 13px;
    border-radius: 12px;
    border: none;
    outline: none;
    background-color: var(--bright-blue);
}


.order .button-2{
    display: inline-block;
    padding: 13px 13px 13px 13px;
    border-radius: 12px;
    border: none;
    outline: none;
    background-color: transparent;}


.footer{
display: flex;
flex-direction: column-reverse;
padding-bottom: 0px;
position: fixed;
}