/* imageAvatar */
html {
  scroll-behavior: smooth;
  /*Comenta la línea (o dale el valor 'auto' a scroll behavior )
 para probar la diferencia con y sin scroll suavizado*/
}

.padre {
  height: 150px;
  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}

div.avatar {
  background-image: url("images/icon.png");
  /* cambia estos dos valores para definir el tamaño de tu círculo */
  height: 100px;
  width: 100px;

  /* los siguientes valores son independientes del tamaño del círculo */
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 50%;
  background-size: 100% auto;
}

/* On screens that are 768px or less, set the background color to blue */
@media (max-width: 980px) {
  .notInSmallDevice {
    display: none;
    visibility: hidden;
  }
}

/* On screens that are 769 or more, set the background color to blue */
@media (min-width: 981px) {
  .yesInSmallDevice {
    display: none;
    visibility: hidden;
  }
}