:root {
  --color-primary: #B002AA;
  --border-color: #111111;
  --text-dark: #4b4450;
  --color-success: #36C64E;
  --color-warning: #EA8807;
  --color-danger: #E80A0A;
  --color-danger-dark: #ce0909;
  --bg-dark: rgba(0,0,0,0.8);
  --bg-primary: #02aab0;
  --bg-gradient: linear-gradient(to right, #02aab0, #00cdac);
  --spacing: 1rem;
  --spacing-sm: calc(var(--spacing) / 2);
  --border-radius: 10px;
  --box-padding: var(--spacing);
  --box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  --border: 1px solid var(--border-color);
  --transition: all .3s ease;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-image: var(--bg-gradient);
}

.text-lg {
  font-size: 1.6rem;
}

.text-huge {
  font-size: 40px;
  line-height: 1.3;
  font-weight: 900;
}
@media (min-width: 992px) {
  .text-huge {
    font-size: 60px;
    line-height: 1.5;
  }
}
.text-huge u {
  border-bottom-width: 10px;
}

a {
  color: #FFF;
}

u {
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
}

.box {
  padding: 2rem;
  border: var(--border);
  border-radius: var(--border-radius);
  background: var(--bg-dark);
  color: #FFF;
  box-shadow: var(--box-shadow);
}

.btn {
  border-radius: 1000px;
}
.btn.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn .activity-indicator {
  display: none;
  width: 30px;
  height: 30px;
}
.btn.activity .activity-indicator {
  display: block;
}
.btn.activity span {
  display: none;
}

.footer {
  padding: var(--spacing);
  text-align: center;
}
.footer a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.footer a img {
  margin-right: 0.5rem;
}

.form label {
  display: block;
  margin-bottom: var(--spacing-sm);
}
.form input {
  font-size: 1rem;
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--box-padding);
  background: var(--bg-primary);
  display: block;
  width: 100%;
}
.form .form-group {
  margin-bottom: var(--spacing);
}

.header {
  display: flex;
  align-items: center;
  padding: var(--box-padding);
}
.header h1 {
  font-size: 30px;
  margin: 0;
  margin-right: auto;
}
@media (min-width: 992px) {
  .header h1 {
    font-size: 40px;
  }
}
.header a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}
.header a svg {
  width: 32px;
  height: 40px;
  margin-right: 0.5rem;
  color: var(--color-primary);
}

#nft-details img {
  display: block;
  width: 100%;
  min-height: 300px;
  background: url(../img/tail-spin.svg) center center no-repeat;
}
#nft-details label {
  opacity: 0.6;
}
#nft-details .name {
  font-size: 1.2rem;
  font-weight: 600;
}

.notifications {
  height: 0;
  text-align: center;
}
.notifications .notification {
  display: inline-flex;
  padding: var(--box-padding) calc(var(--box-padding) * 2);
  align-items: center;
  background: #FFF;
  border-radius: 1000px;
  box-shadow: var(--box-shadow);
  transition: all 1s ease;
  transform: translateY(100%);
  max-width: 80vw;
}
.notifications .notification.active {
  transform: translateY(-120px);
}
.notifications .notification .controls {
  margin-left: 0.5rem;
}
.notifications .notification .message {
  text-align: left;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.page .container {
  flex: 1;
  display: flex;
  align-items: center;
}

/*# sourceMappingURL=styles.css.map */