I'm trying to move a object with a @media in css.
I'm trying to make a pop up in css with an arrow and I'm trying to make it responsive.
The popup activates when clicked on the "CV".
My goal is to make the popup responsive. So that on the mobile version the arrow is moved.

Here is my code:

<!-- entire code https://codepen.io/Yung_n-d/pen/mdwQGqX  -->

<div class="popup" onclick="myFunction()"><p>CV</p>
<span class="popuptext" id="myPopup"><a target="_blank" id="cv" href="img/CV.pdf">View </a><a id="cv" download="img/CV.pdf" href="">Download </a><i class="fa fa-remove"></i></span>
</div>

  /* The actual popup */
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -310px;
  }
  @media only screen and (max-width:600px){
      .popup .popuptext{
        margin-left: -170px;
      }
      .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 10%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
  }

  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

  #cv{
      text-decoration: none;
      color:white;
      font-weight: bold;