.hero,
.section {
  &.is-transparent {
    background: transparent !important;
  }
}

/* ==========================================================================
2. Main content wrapper
========================================================================== */

.content-wrapper {
  padding: 20px 0;
  position: relative;
  z-index: 2;
  //Medium size modifier
  &.is-medium {
    padding: 40px 0;
  }
  //Large size modifier
  &.is-large {
    padding: 60px 0;
  }
}

/* ==========================================================================
3. Sections
========================================================================== */

.section {
  outline: none !important;
  position: relative;
  //Outline reset
  &:active,
  &:focus {
    outline: none !important;
  }
  //relative modifier
  &.is-relative {
    position: relative;
  }
  //Background colors
  &.is-dark {
    background: #3c019e;
  }
  &.is-darker {
    background: #320184;
  }
  &.is-darkest {
    background: #270068;
  }
  &.is-end {
    background: #1c004c;
  }
  //Background shapes
  .has-bg-shapes {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
  }
}

//CTA Spacing
.cta-wrapper {
  margin: 30px 0;
  &.is-small {
    margin: 20px 0;
  }
}

/* ==========================================================================
1. Titles
========================================================================== */

//Buy title
.buy-title {
  padding: 20px 0;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: $white;
  opacity: 0.7;
}

.accepted-currencies {
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    margin: 0 10px;
  }
  i {
    font-size: 1.2rem;
    padding: 10px;
    border-radius: 3px;
    color: $white;
    background: darken(#1c004c, 5%);
    opacity: 0.7;
  }
}

//Common styles
.title,
.subtitle {
  //lighttext modifier
  &.is-light {
    color: $white;
    + p {
      color: $white;
    }
  }
  //Semibold modifier
  &.is-semibold {
    font-weight: 600;
  }
  //Thin modifier
  &.is-thin {
    font-weight: 300 !important;
  }
  //Uppercase modifier
  &.is-uppercase {
    text-transform: uppercase;
  }
  //Small spacing modifier
  &.is-tight {
    margin-bottom: 10px !important;
  }
  //Ultra small spacing modifier
  &.is-compressed {
    margin-bottom: 5px !important;
  }
}

//Titles
.title {
  &.main-title {
    text-shadow: 4px 4px 2px rgba(150, 150, 150, 0.1);
  }
}

//Subtitles
.subtitle {
  opacity: 0.8;
  &.is-compact {
    max-width: 600px;
    margin: 0 auto;
  }
}

//Divider
.divider {
  height: 3px;
  width: 75px;
  @include primary-gradient-left();
  margin: 20px 0;
  //Centered modifier
  &.is-centered {
    margin: 20px auto;
  }
  //Long modifier
  &.is-long {
    width: 150px;
  }
  //Acts as a spacing element
  &.is-spacer {
    margin-top: 120px;
  }
}

// Custom

.nav-logo {
  width: 112px;
  height: 28px;
}

.is-vertical-center {
  display: flex;
  align-items: center;
}

.has-background-lightblue {
  fill: #e8f3ec !important;
  background-color: #e8f3ec !important;
}

.spanborder {
  border-bottom: 1px solid #e8f3ec;
  margin-bottom: 2rem;
}

.spanborder span {
  border-bottom: 1px solid rgba(0, 0, 0, 0.44);
  display: inline-block;
  padding-bottom: 20px;
  margin-bottom: -1px;
}

a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

.gatsby-resp-iframe-wrapper {
  margin-bottom: 0.5rem !important;
}

article {
  font-family: Lora, sans-serif;
}

.article-headline {
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.15;
  color: #222;
}

article:first-letter {
  float: left;
  font-size: 5em;
  line-height: 1;
  margin: 0 0.2em 0 0;
  vertical-align: top;
}

article .h1,
article .h2,
article .h3,
article .h4,
article .h5,
article .h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-bottom: 2rem;
  margin-top: 2rem;
  font-weight: 600;
}

.text-muted {
  color: #6c757d !important;
}
.sticky {
  top: 1em;
  position: sticky;
}
.token.tag,
.token.content,
.token.number {
  display: inline;
  padding: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  vertical-align: inherit;
  border-radius: inherit;
  font-weight: inherit;
  white-space: inherit;
  background: inherit;
  margin: inherit;
}

.has-numbers {
  span {
    &.tag {
      justify-content: center;
      align-items: center;
      color: $secondary;
      background: transparent;
      border: 1px solid $secondary;
    }
  }
}

.tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .tag {
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $primary !important;
    background: transparent;
    border: 1px solid $primary;
  }
}

// Topics Side Menu
.ar-topic-menu {
  .menu {
    font-size: 1rem;
  }

  .menu.is-small {
    font-size: 0.75rem;
  }

  .menu.is-medium {
    font-size: 1.25rem;
  }

  .menu.is-large {
    font-size: 1.5rem;
  }

  .menu-list {
    line-height: 1.25;
  }

  .menu-list a {
    border-radius: 10px;
    color: #998da0;
    display: block;
    padding: 0.5em 0.75em;
  }

  .menu-list a:hover {
    background-color: #fbfbfd;
    color: #463853;
  }

  .menu-list a.is-active {
    background-color: $primary;
    color: #fff;
  }

  .menu-list li ul {
    border-left: 1px solid #dbdbdb;
    margin: 0.75em;
    padding-left: 0.75em;
  }

  .menu-label {
    color: #463853;
    font-size: 0.75em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .menu-label:not(:first-child) {
    margin-top: 1em;
  }

  .menu-label:not(:last-child) {
    margin-bottom: 1em;
  }

  .menu-label {
    font-size: 1.375rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }

  .menu-label:not(:last-child) {
    margin-bottom: 0.5rem;
  }

  .menu-list {
    margin-left: -0.75rem;
    font-size: 1.125rem;
  }
}
// Topics

#topics-block .inner-block {
  padding: 2rem;
  border-radius: 12px;
  min-height: 300px;
}

#topics-block .inner-block .guide {
  bottom: 0;
  padding: 1rem 2rem;
  width: 100%;
  left: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#topics-block {
  margin-top: -9rem;
}

.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}

.page-hero {
  padding-bottom: 10rem;
}

/* React Player */

.player-wrapper {
  position: relative;
  padding-top: 56.25%;
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

.react-player iframe,
.react-player object,
.react-player embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// featured
.list-featured {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
}

.list-featured li {
  counter-increment: step-counter;
  display: flex;
  font-size: 0.8rem;
}

.list-featured li::before {
  content: "0" counter(step-counter);
  font-weight: bold;
  font-size: 2rem;
  margin-right: 0.5rem;
  font-family: Arial, sans-serif;
  line-height: 1;
  opacity: 0.1;
}

.gatsby-resp-image-figcaption {
  font-family: "Courier", sans-serif;
  font-size: 12px;
  padding: 1rem 0;
}

// Navbar
.ar-navbar-item:hover span.icon {
  display: none;
}
.ar-navbar-item:hover span.cd-cursor {
  display: block;
}
.ar-navbar-item:hover:before {
  content: "$ cd /";
}

.ar-navbar-item:hover {
  text-transform: lowercase;
}

.cd-cursor {
  width: 7px;
  height: 1rem;
  background: #008f11;
  margin-left: 5px;
  border-radius: 1px;
  animation: cursor 1s infinite;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cd-cursor {
    animation: none;
  }
}

@keyframes cursor {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.ar-fat-button {
  font-size: 1.25em;
  font-weight: 600;
  height: auto;
  padding: 0.75em 1.25em;
}

.ar-pagination {
  border-top: 2px solid #f5f5f5;
  margin-top: 3rem;
  padding-top: 3rem;
}

.ar-pagination-links {
  display: flex;
  flex-wrap: wrap;
}

.ar-pagination .button em {
  display: block;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 400;
  opacity: 0.5;
  text-transform: capitalize;
}

.ar-pagination .ar-pagination-prev span {
  margin-left: 1em;
  text-align: left;
}

.ar-pagination .ar-pagination-next span {
  margin-right: 1em;
}
