.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;

  font-size: 20px;
  width: 1em;
  height: 1em;
  user-select: none;
  cursor: pointer;

  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;

  transition:
    font-variation-settings 0.2s ease-out,
    color 0.2s ease-in-out,
    transform 0.1s ease;
}

p:hover .material-symbols-outlined,
a:hover .material-symbols-outlined,
.material-symbols-outlined:hover {
  color: #007bff;

  font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 20;
}

.material-symbols-outlined:active {
  opacity: 0.8;
}