Estoy tratando de mover un objeto con @media en css.
Estoy tratando de hacer una ventana emergente en css con una flecha y estoy tratando de que responda.
La ventana emergente se activa cuando se hace clic en el "CV".
Mi objetivo es hacer que la ventana emergente responda. Para que en la versión móvil se mueva la flecha.

Aquí está mi código:

 <!-- 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;