a.login {
  height: 2.5vw;
  padding: 0.5vw 0.75vw;
  gap: 0.45vw;
  border-radius: 0.5vw;
  font-size: 0.95vw;
  font-weight: bold;
  transform: scale(0.95);
  position: relative;
  z-index: 5;
  transition: all 0.25s ease-in-out;
}

a.login:hover {
  color: var(--green);
  background-color: var(--lightest-green);
}

a.login svg {
  width: 1.85vw;
  transition: all 0.25s ease-in-out;
}

a.login svg ellipse,
a.login svg circle {
  transition: all 0.25s ease-in-out;
}

a.login:hover svg ellipse,
a.login:hover svg circle {
  stroke: var(--green) !important;
}

@media screen and (max-width: 900px) {
  a.login {
    height: 35px;
    min-width: 10vw;
    padding: 10px 7px;
    border: 1px solid var(--gold);
    gap: 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    order: 1;
  }

  a.login i {
    font-size: 17px;
    transform: translateY(1px);
  }

  a.login span {
    display: none;
  }
}
@media (min-width: 140px) {
  .login {
    display: none;
  }
}
@media (min-width: 640px) {
  .login {
    display: none;
  }
}
@media (min-width: 900px) {
  .login {
    display: flex;
  }
}