.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.container button {
  position: relative;
  height: var(--size-big);
  background: var(--color-black-translucent);
  border: 0;
  padding: 0 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size);
  border-radius: var(--radius-full);
  gap: 0.5rem;
  color: var(--color-black);
}
.container button svg {
  color: var(--color-bg-black);
  width: 20px;
  height: 20px;
}
.container button:hover,
.container button:focus {
  opacity: 1;
}
.container button.openedButton {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
}

.containerDropdown {
  position: absolute;
  top: 3rem;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-white);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  width: 280px;
  z-index: 2;
}

.container h3 {
  margin: 1rem 0;
}
.credits {
  text-align: right;
  font-size: var(--font-size-small);
  margin-top: 1rem;
  color: var(--color-black-translucent-50);
}
.credits a {
  transition: var(--transition);
}
.credits a:hover,
.credits a:focus {
  color: var(--color-text-black);
}

@media (max-width: 940px) {
  .container button {
    font-size: var(--font-size-small);
  }
}

@media (max-width: 600px) {
  .container button {
    font-size: 0;
    width: var(--size-small);
    height: var(--size-small);
    gap: 0;
    padding: 0;
  }
}
