Divs overlapping when screen is resized

I have a webpage that consists of a navbar, a gif (.gif) and a button (.Continue). The navbar resizes when the screen is resized: however, I'm having some trouble getting the gif and button to resize accordingly.

As you can see, the gif resizes but the continue button doesn't; instead, it moves up and sits atop the gif. I'm trying to work out how to go about fixing this and would appreciate any suggestions. I've played around with padding and margins but nothing has worked.

HTML

<div class="container">

    <div class="gif"></div>

    <div class="Continue">
    <a href="./Page/index.html">
    Continue
    </a>
    </div>

</div>    

CSS

.container {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.gif {
    background: url(./Images/1.gif);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 91%;
    width: 85%;
    max-width: 85%;
    left: 7%;
    top: 25%;
}

.Continue {
   position: absolute;
   top: 87%;
   left: 43%;
   overflow: hidden;
   }

a {
    z-index: 10000;
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #d4337e;
    font-family: arcade;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 60px;
    overflow: hidden;
    transition: 0.2s;
    top: -10px;
}

a:hover {
    color: #ffffff;
}

I think your problem is the position: absolute; in your Continue class. It glues the div to the position it is on when the page gets renderd. Also use margin-top and margin-left insted of the others to position the div.