Ikona w prawym dolnym rogu strony, która nie zmienia pozycji przy zmienianiu rozdzielczości

pytanie zadane 7 czerwca 2018 w HTML i CSS przez Kiszony Użytkownik (630 p.)

Witam, zależy mi na tym żeby pojemnik z klasą points umieścić w prawym dolnym rogu strony tak aby nie zmieniała się jego pozycja przy zmianie rozdzielczości. Kolejnym elementem jest pole z tekstem w pojemniku points, które będzie wyświetlać kolejno liczby 1,2,3...10 .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Jaka to melodia?</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="js/main.js">
</head>
<body>
  <div class="pimg1">
    <div class="ptext" >
      <span class="border">
        <nav class="nav">
        <a href="#link">Let's play</a>
       </nav>
      </span>
    </div>
  </div>

  <section class="section section-light" id="link">
    <h2>First song</h2>
    <audio controls>
      <source src="audio/song1.mp3">
    </audio>
  </section>

  <div class="pimg2">
    <div class="ptext">
      <span class="border trans">
        Type your answear here: 
        <br>
          <input type="text" class="pole1">
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Second song</h2>
    <audio controls>
      <source src="audio/song1.mp3">
    </audio>
  </section>

  <div class="pimg3">
    <div class="ptext">
      <span class="border trans">
        Image Three Text
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Section Three</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
    </p>
  </section>

  <div class="pimg1">
    <div class="ptext">
      <span class="border">
      </span>
    </div>
  </div>

 <div class="points">
 <img src="img/points.png" alt="" class="counter">
 </div> 

  <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/2.0.0/jquery.localScroll.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

body, html{
  height:100%;
  margin:0;
  font-size:16px;
  font-family:"Lato",;
  font-weight:400;
  line-height:1.8em;
  color:#666;
  -webkit-animation: fadein 2s;
}

.pimg1, .pimg2, .pimg3{
  position:relative;
  opacity:0.70;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1{
  background-image:url('../img/img1st.jpg');
  min-height:100%;
}

.pimg2{
  background-image:url('../img/img1.jpg');
  min-height:800px;
}

.pimg3{
  background-image:url('../img/image3.jpg');
  min-height:400px;
}

.section{
  text-align:center;
  padding:50px 80px;
}

.section-light{
  background-color:#f4f4f4;
  color:#666;
}

.section-dark{
  background-color:#282e34;
  color:#ddd;
}

.ptext{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border .nav{
  background-color:#111;
  color:#fff;
  padding:30px;
  margin-left: 30vw;
  margin-right: 40vw;
  transform: translate(50%,50%)
}

.ptext .border.trans{
  background-color:transparent;
}

@media(max-width:568px){
  .pimg1, .pimg2, .pimg3{
    background-attachment:scroll;
  }
}

input[type=text] {
  color:#f4f4f4;
  font-size: 20px;
  text-align: center;
  width: 75%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid black;
  background: transparent;

}

@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}

a {
  text-decoration: none;
  color: white;
}

/*.points {
  position: fixed;
  top: 15em;
  left: 20em;
  transform: scale(0.25) translate(325% , 40%);
}
*/


@media(min-width:1000px){
  .points{
    transform: scale(0.25) translate(850% , 250%);
  }
}