@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../assets/fonts/RobotoSlab-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(../assets/fonts/RobotoSlab-Bold.woff) format('woff');
}

@media (prefers-color-scheme: light) {
  ::selection {
    background-color: rgba(78, 13, 78, 1);
    color: var(--color-light);
  }

  .logoMark {
    background-image: url('../assets/logo/onionshare-logo-lm.png');
  }

  .intro::before {
    background-image: url('../assets/features/hero-lm.png');
  }

  .primaryBtn {
    background-color: rgba(78, 13, 78, 1);
  }

  .primaryBtn:hover {
    background-color: rgba(57, 9, 57);
  }

  .icon.onionshare {
    background-image: url('../assets/logo/onionshare-logo-lm.png');
  }

  .btn {
    color: rgba(78, 13, 78, 1);
  }

  .outgoing p:first-of-type {
    background-color: rgba(78, 13, 78, 1);
  }

  .pinnedList tr.selected {
    border-left: 3px solid rgba(78, 13, 78, 1);
  }

  .tabs a.selected {
    border-bottom: 3px solid rgba(78, 13, 78, 1) !important;
  }

  .tabs a:hover {
    border-bottom: 3px solid rgba(78, 13, 78, 1);
  }

  .icon.qubes {
    background-image: url('../assets/features/qubes-logo-lm.png');
  }

  .icon.tails {
    background-image: url('../assets/features/tails-logo-lm.png');
  }

  .icon.whonix {
    background-image: url('../assets/features/whonix-logo-lm.png');
  }

  .icon.parrot {
    background-image: url('../assets/features/parrot-logo-lm.png');
  }

  .icon.tor {
    background-image: url('../assets/features/tor-logo-lm.png');
  }

  .featureImage.home {
    background-image: url('../assets/features/home-lm.png');
  }

  .featureImage.homemobile {
    background-image: url('../assets/features/mobile_app_home.jpg');
  }

  .featureImage.share {
    background-image: url('../assets/features/share-lm.png');
  }

  .featureImage.sharemobile {
    background-image: url('../assets/features/mobile_app_share.jpg');
  }

  .featureImage.receive {
    background-image: url('../assets/features/receive-lm.png');
  }

  .featureImage.chat {
    background-image: url('../assets/features/chat-lm.png');
  }

  .featureImage.website {
    background-image: url('../assets/features/website-lm.png');
  }

  .featureImage.websitemobile {
    background-image: url('../assets/features/mobile_app_web.jpg');
  }
}

@media (prefers-color-scheme: dark) {
  .intro::before {
    background-image: url('../assets/features/hero-dm.png');
  }

  .logoMark {
    background-image: url('../assets/logo/onionshare-logo-dm.png');
  }

  .icon.onionshare {
    background-image: url('../assets/logo/dm-logo-onionshare.png');
  }

  .icon.qubes {
    background-image: url('../assets/features/qubes-logo-dm.png');
  }

  .icon.tor {
    background-image: url('../assets/features/tor-logo-dm.png');
  }

  .icon.tails {
    background-image: url('../assets/features/tails-logo-dm.png');
  }

  .icon.whonix {
    background-image: url('../assets/features/whonix-logo-dm.png');
  }

  .icon.parrot {
    background-image: url('../assets/features/parrot-logo-dm.png');
  }

  .featureImage.home {
    background-image: url('../assets/features/home-dm.png');
  }

  .featureImage.share {
    background-image: url('../assets/features/share-dm.png');
  }

  .featureImage.receive {
    background-image: url('../assets/features/receive-dm.png');
  }

  .featureImage.chat {
    background-image: url('../assets/features/chat-dm.png');
  }

  .featureImage.website {
    background-image: url('../assets/features/website-dm.png');
  }
}

body {
  transition: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab';
  font-weight: 400;
}

header h1 {
  position: relative;
  top: -2px;
}

#download h2 {
  margin-bottom: var(--spacing-medium) !important;
}

#download .btn {
  display: inline-block;
}

.warning {
  color:red;
  font-family: 'Roboto Slab';
  font-weight: 400;
}

.icon.matteo {
  background-image: url('../assets/twitter/geminiimatt.jpg');
  border-radius: 50vh;
}

.icon.windows {
  background-image: url('../assets/download/windows-logo.png');
}

.icon.mac {
  background-image: url('../assets/download/apple-logo.png');
}

.icon.linux {
  background-image: url('../assets/download/linux-logo.png');
}

.icon.android {
  background-image: url('../assets/download/android-logo.png');
}

.featureImage {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 37%;
  position: relative;
}

.featureImage.mobileImage {
  padding-top: 0;
}

.intro::before {
  background-repeat: no-repeat;
  background-position-y: center;
  /* background-position-x: calc(125% - var(--spacing-xxlarge)); */
  background-size: 38rem;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 790px;
}

.mobileIntro::before {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: calc(100% + calc(var(--spacing-large)));
  background-size: 28rem;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0);
  top: var(--spacing-xlarge);
  z-index: -1;
  background-image: url('../assets/features/mobile-hero.png');
}

.intro > div {
  width: 70%;
}

.intro > div > p:not(:first-of-type):not(:last-of-type) {
  margin: var(--spacing-base) 0;
}

.pinnedList .card {
  pointer-events: none;
}

header nav ul {
  display: initial;
}

header.singleNav nav ul {
  display: initial !important;
}

@media only screen and (max-width: 1280px) {
    .intro::before {
      left: 640px;
    }

    .mobileIntro::before {
      background-position-x: calc(100% + var(--spacing-xxlarge) * 2);
    }
}

@media only screen and (max-width: 1150px) {
    .mobileIntro::before {
      background-position-x: calc(100% + var(--spacing-xxlarge) * 2.5);
    }
}

@media only screen and (max-width: 1024px) {
    .intro::before {
      left: 640px;

      /* background-position-x: calc(115% + var(--spacing-xxlarge)); */
    }

    .mobileIntro::before {
      background-position-x: calc(100% + var(--spacing-xxlarge) * 2.75);
    }
}

@media only screen and (max-width: 960px) {
  .intro::before {
    /* background-position-x: calc(180% + var(--spacing-xxlarge)); */
    left: 480px;

    }

    .mobileIntro::before {
      background-position-x: calc(100% + var(--spacing-xxlarge) * 3);
    }
}

@media only screen and (max-width: 768px) {
  .intro::before {
    /* background-position-x: calc(175% + var(--spacing-xxlarge)); */
      background-size: 32rem;
      left: 420px;

    }

    .mobileIntro::before {
      background-position-x: calc(100% + calc(var(--spacing-xxlarge) * 3.5));
    }

    .description {
      text-align: center;
    }

    .description p {
      margin-left: auto;
      margin-right: auto;
    }

    .featureImage {
      padding-top: 73%;
    }

    h2 {
      text-align: center;
    }
}

@media only screen and (max-width: 640px) {
  .intro::before {
      background: none;
    }

    .intro > div {
      width: 100%;
    }
}

@media only screen and (max-width: 480px) {
  .intro::before {
      background-position-x: calc(125% + calc(var(--spacing-xxlarge) * 4));
      background-size: 20rem;
    }

  .intro {
    margin-top: calc(2.5rem + var(--spacing-medium) * 2);
    height: auto;
    min-height: calc(100vh - (2.5rem + var(--spacing-medium) * 2));
  }

  .intro p a {
    margin: 0
  }
}

@media only screen and (max-width: 375px) {
  body {
    min-width: unset;
  }
}