div.web3modal-modal-lightbox,
div.walletconnect-qrcode__base {
  background: var(--background-body-transparent);
  backdrop-filter: blur(3px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: fadeIn 0.2s ease-out backwards;
}

div.web3modal-modal-card {
  border-radius: var(--border-radius);
  padding: var(--spacer);
  margin: var(--spacer) auto;
  max-width: 100%;
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 15px 0 var(--box-shadow-color);
  animation: moveUp 0.2s ease-out backwards;
  grid-template-columns: 1fr;
}

div.web3modal-provider-wrapper {
  border: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

div.web3modal-provider-wrapper:last-child {
  border-bottom: 0;
}

div.web3modal-provider-container {
  border-radius: 0;
  padding: var(--spacer);
}

@media (min-width: 40rem) {
  div.web3modal-modal-card {
    grid-template-columns: 1fr 1fr;
    max-width: var(--break-point--small);
  }

  div.web3modal-provider-wrapper {
    border-bottom: 0;
  }

  div.web3modal-provider-wrapper:nth-child(1),
  div.web3modal-provider-wrapper:nth-child(2) {
    border-bottom: 1px solid var(--border-color);
  }

  div.web3modal-provider-wrapper:nth-child(2n + 1) {
    border-right: 1px solid var(--border-color);
  }
}

div.web3modal-provider-icon {
  filter: grayscale(1) contrast(150%);
  transition: filter 0.2s ease-out;
}

div.web3modal-provider-wrapper:hover div.web3modal-provider-icon {
  filter: none;
}

div.web3modal-provider-name {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
}

div.web3modal-provider-description {
  font-size: var(--font-size-base);
  margin-top: 0;
}

div.walletconnect-modal__base {
  background: var(--background-body);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
}

div.walletconnect-modal__header p {
  color: var(--font-color-heading);
}

p.walletconnect-qrcode__text {
  color: var(--color-secondary);
}

svg.walletconnect-qrcode__image path:first-child {
  fill: var(--background-body);
}

svg.walletconnect-qrcode__image path:last-child {
  stroke: var(--font-color-heading);
}

#torusIframe {
  z-index: 3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes moveUp {
  from {
    transform: translate3d(0, 1rem, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}