How do I make my website buttons shrink with the screen resolution? - html

Question

My current website is having "issues" (not really a issue just bothers me) with my buttons hiding when the resolution changes to something smaller. Here is a gif so you understand it better. https://i.imgur.com/nlkJs5G.gifv. How can I fix it so it shrinks with the page so people can still click it on different screen resolutions?
Underneath is the html for the buttons. The .css for fab or fa-steam-symbol or fa-discord etc. is from https://fontawesome.com/ (if anyone is not familiar with it)
.awrapper{
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
}
.media{
font-size:30px;
text-align:center;
padding-top:30px;
}
.media>a{
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
}
.media>a#vk{
font-size:35px;
}
.media>a:last-child{
margin-right:0;
}
.animated{
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
}
#-webkit-keyframes fadeInUpBig{
from{
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
to{
opacity:1;
-webkit-transform:none;
transform:none
}
}
#keyframes fadeInUpBig{
from{
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
to{
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUpBig{
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
}
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(2);
transform: scale(2);
}
<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>
If I am missing anything or if you have questions please let me know and I will try to answer them.

Answer 1

Thanks for your help guys. You can check out the site and how it looks.
I added a new class called unmoveable
From
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
To
<div class="media animated fadeInUpBig unmoveable">
The css
.unmoveable {
animation-delay: 5s;
position:fixed;
bottom: 100px;
}