body {
  background-color: #9B2ADD;
  background-image: url(../img/bg-lines.svg);
  background-repeat: no-repeat;
  background-position: center bottom, center top;
  background-size: contain;
  background-attachment: fixed;
  color: #FFF;
  transition: all 1s ease;
  font-weight: 300; }

.title {
  font-weight: 200; }

a {
  color: #FFF; }
  a:hover {
    color: inherit; }

.bg-lighten {
  background: rgba(255, 255, 255, 0.1);
  transition: background 1s ease; }

.dark-mode .bg-lighten {
  background: rgba(255, 255, 255, 0.1); }

video {
  border-radius: 4px;
  max-height: 500px; }

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35) !important; }

.box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: .5rem;
  padding: 1rem;
  height: 100%; }

.card {
  box-shadow: 0px 36.6255px 28.3015px rgba(27, 22, 83, 0.07), 0px 21.6423px 16.6479px rgba(27, 22, 83, 0.07), 0px 11.6536px 8.32397px rgba(27, 22, 83, 0.07), 0px 4.99438px 3.32959px rgba(27, 22, 83, 0.09), 0px 0px 0px 1.66479px rgba(27, 22, 83, 0.08); }

.color-mode-switcher {
  position: relative; }
  .color-mode-switcher #color-mode-img-dark {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease; }
  .color-mode-switcher.dark-mode #color-mode-img-dark {
    opacity: 1; }
  .color-mode-switcher .controls button {
    border: none;
    background: none;
    color: #FFF;
    opacity: .6;
    transition: all .3s ease; }
    .color-mode-switcher .controls button:hover {
      opacity: .8; }
    .color-mode-switcher .controls button.active {
      opacity: 1; }
    .color-mode-switcher .controls button span {
      font-size: 2rem; }

.footer img {
  height: 50px; }

.issues .status {
  white-space: nowrap; }

.issues .description {
  display: block;
  opacity: .7; }

.list-downloads .list-item {
  display: flex;
  align-items: center;
  padding: .5rem;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: all .2s ease;
  margin-bottom: .5rem; }
  .list-downloads .list-item:hover {
    background: rgba(0, 0, 0, 0.1); }
  .list-downloads .list-item .title {
    margin-right: auto;
    font-weight: normal; }
  .list-downloads .list-item .icon {
    margin-right: .5rem; }
  .list-downloads .list-item .version {
    font-size: .8rem;
    opacity: .8; }
  .list-downloads .list-item.disabled {
    opacity: .6;
    cursor: not-allowed; }

.masthead {
  font-weight: 200;
  position: relative;
  /*.pre-intro {
        //opacity: 0;
        transition: all 1.5s 0s ease
    }

    .post-intro {
        //opacity: 0;
        transition: all 1.5s 3s ease
    }

    .logo {
        //opacity: 0;
        transition: all 1.5s 1.5s ease
    }

    &.animated {
        .pre-intro {
            opacity: 1;
        }

        .post-intro {
            opacity: 1;
        }

        .logo {
            opacity: 1;
        }
    }*/ }
  .masthead .logo {
    width: 80vw;
    max-width: 500px;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 2rem; }
  .masthead p {
    margin: 0; }
  .masthead .banner {
    padding: 0.5rem 6rem;
    background: #f1f41a;
    position: absolute;
    transform: rotate(-30deg);
    font-size: 1.2rem;
    top: 30px;
    left: -68px;
    color: #9B2ADD;
    font-weight: 400; }
    @media (min-width: 560px) {
      .masthead .banner {
        left: -53px;
        font-size: 1.4rem; } }

.os-icons {
  display: flex;
  align-items: center;
  justify-content: center; }
  .os-icons svg {
    width: 50px;
    height: 50px; }
    .os-icons svg + svg {
      margin-left: 2rem; }

.roadmap .list-item {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: .5rem 0; }
  .roadmap .list-item:last-child {
    border: none; }
  .roadmap .list-item p {
    margin: 0; }
  .roadmap .list-item > div:nth-child(2) {
    margin-right: .75rem; }

.roadmap .description {
  opacity: .7; }

.roadmap .status {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  margin-right: .75rem;
  margin-top: 0.05rem; }

.roadmap .version {
  margin-left: auto;
  font-size: .8rem;
  opacity: .8;
  white-space: nowrap; }

.section {
  padding: 5rem 0; }
  .section.bordered {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

:root {
  --base-dimension: 40;
  --base-scale: 2;
  --break-factor: calc(var(--base-dimension) * .38);
  --cube-width: calc((var(--base-dimension) * var(--base-scale)) * 1px);
  --cube-height: calc(((var(--base-dimension) * var(--base-scale)) * 1.15) * 1px);
  --cube-break-width: calc((((var(--base-dimension) * var(--base-scale)) * 2) + (var(--break-factor) * 2)) * 1px);
  --color-cube-logo-brand: #8224c6;
  --color-cube-logo-brand-2: #00adee;
  --color-cube-logo-brand-3: #bfbfbf; }

.text-logo {
  --base-dimension: 16;
  --break-factor: calc(var(--base-dimension) * .38);
  --cube-width: calc((var(--base-dimension) * var(--base-scale)) * 1px);
  --cube-height: calc(((var(--base-dimension) * var(--base-scale)) * 1.15) * 1px);
  --cube-break-width: calc((((var(--base-dimension) * var(--base-scale)) * 2) + (var(--break-factor) * 2)) * 1px);
  display: inline-grid;
  grid-template-columns: calc((((var(--base-dimension) * var(--base-scale)) * 2)) * 1px) 0;
  transition: all 0.6s 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
  .text-logo.small {
    --base-dimension: 9;
    --break-factor: calc(var(--base-dimension) * .38);
    --cube-width: calc((var(--base-dimension) * var(--base-scale)) * 1px);
    --cube-height: calc(((var(--base-dimension) * var(--base-scale)) * 1.15) * 1px);
    --cube-break-width: calc((((var(--base-dimension) * var(--base-scale)) * 2) + (var(--break-factor) * 2)) * 1px); }
    @media (min-width: 768px) {
      .text-logo.small {
        --base-dimension: 11;
        --break-factor: calc(var(--base-dimension) * .38);
        --cube-width: calc((var(--base-dimension) * var(--base-scale)) * 1px);
        --cube-height: calc(((var(--base-dimension) * var(--base-scale)) * 1.15) * 1px);
        --cube-break-width: calc((((var(--base-dimension) * var(--base-scale)) * 2) + (var(--break-factor) * 2)) * 1px); } }
  .holding-page .text-logo {
    --base-dimension: 11;
    --break-factor: calc(var(--base-dimension) * .38);
    --cube-width: calc((var(--base-dimension) * var(--base-scale)) * 1px);
    --cube-height: calc(((var(--base-dimension) * var(--base-scale)) * 1.15) * 1px);
    --cube-break-width: calc((((var(--base-dimension) * var(--base-scale)) * 2) + (var(--break-factor) * 2)) * 1px); }
    @media (min-width: 768px) {
      .holding-page .text-logo {
        --base-dimension: 14;
        --break-factor: calc(var(--base-dimension) * .38);
        --cube-width: calc((var(--base-dimension) * var(--base-scale)) * 1px);
        --cube-height: calc(((var(--base-dimension) * var(--base-scale)) * 1.15) * 1px);
        --cube-break-width: calc((((var(--base-dimension) * var(--base-scale)) * 2) + (var(--break-factor) * 2)) * 1px); } }
  .text-logo:not(.break) {
    grid-template-columns: calc((((var(--base-dimension) * var(--base-scale)) * 2)) * 1px) calc((var(--base-dimension) * 20.5) * 1px); }
  .text-logo .cubes {
    transform: translateY(calc((var(--break-factor) / 2) * 1px)); }
  .text-logo .text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    font-size: calc((var(--base-dimension) * 3.5) * 1px); }
    .text-logo .text span {
      font-weight: 300;
      color: var(--color-cube-logo-brand-2); }
      .text-logo .text span:nth-child(1) {
        font-weight: 800;
        color: #FFF; }

.cube-logo {
  font-family: 'Poppins', sans-serif;
  display: inline-block; }
  .cube-logo .cube-outline {
    display: none; }
  .cube-logo .cubes {
    width: calc(var(--cube-width) * 2);
    height: calc(var(--cube-height) * 2);
    position: relative; }
  .cube-logo .cube {
    width: var(--cube-width);
    height: var(--cube-height);
    position: absolute;
    opacity: 1;
    transform-origin: top center;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
    .cube-logo .cube::before {
      content: "";
      display: block;
      width: var(--cube-width);
      height: var(--cube-width);
      background: rgba(0, 0, 0, 0.1);
      position: absolute;
      border-radius: 10000px;
      transform: scale(0.8, 0.4);
      filter: blur(13px);
      bottom: calc((var(--base-dimension) * .4) * -1px);
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
    .cube-logo .cube svg {
      width: 100%;
      height: 100%;
      position: relative; }
    .cube-logo .cube.cube-1 {
      left: calc(var(--cube-width) / 2);
      top: calc(var(--cube-height) / 2); }
    .cube-logo .cube.cube-2 {
      top: calc((var(--cube-height) / 4) * 3); }
    .cube-logo .cube.cube-3 {
      left: var(--cube-width);
      top: calc((var(--cube-height) / 4) * 3); }
    .cube-logo .cube.cube-4 {
      left: calc(var(--cube-width) / 2);
      top: var(--cube-height); }
    .cube-logo .cube.cube-5 {
      left: calc(var(--cube-width) / 2); }
    .cube-logo .cube.cube-6 {
      top: calc(var(--cube-height) / 4); }
    .cube-logo .cube.cube-7 {
      left: var(--cube-width);
      top: calc(var(--cube-height) / 4); }
    .cube-logo .cube.cube-8 {
      left: calc(var(--cube-width) / 2);
      top: calc((var(--cube-height) / 2)); }
  .cube-logo .break .cube, .cube-logo:hover .cube {
    transition: transform 0.6s cubic-bezier(0.4, 1.71, 0.64, 1); }
    .cube-logo .break .cube::before, .cube-logo:hover .cube::before {
      opacity: 1;
      bottom: calc((var(--base-dimension) * .75) * -1px);
      transition: all 0.6s cubic-bezier(0.4, 1.71, 0.64, 1); }
    .cube-logo .break .cube.cube-1, .cube-logo:hover .cube.cube-1 {
      transform: translate(0, 0); }
    .cube-logo .break .cube.cube-2, .cube-logo:hover .cube.cube-2 {
      transform: translate(calc((var(--base-dimension) / 2.6667) * -1px), calc((var(--base-dimension) / 4) * 1px)); }
    .cube-logo .break .cube.cube-3, .cube-logo:hover .cube.cube-3 {
      transform: translate(calc((var(--base-dimension) / 2.6667) * 1px), calc((var(--base-dimension) / 4) * 1px)); }
    .cube-logo .break .cube.cube-4, .cube-logo:hover .cube.cube-4 {
      transform: translate(0, calc((var(--base-dimension) / 2) * 1px)); }
    .cube-logo .break .cube.cube-5, .cube-logo:hover .cube.cube-5 {
      transform: translate(0, calc((var(--base-dimension) / 2) * -1px)); }
    .cube-logo .break .cube.cube-6, .cube-logo:hover .cube.cube-6 {
      transform: translate(calc((var(--base-dimension) / 2.6667) * -1px), calc((var(--base-dimension) / 4) * -1px)); }
    .cube-logo .break .cube.cube-7, .cube-logo:hover .cube.cube-7 {
      transform: translate(calc((var(--base-dimension) / 2.6667) * 1px), calc((var(--base-dimension) / 4) * -1px)); }
    .cube-logo .break .cube.cube-8, .cube-logo:hover .cube.cube-8 {
      transform: translate(0, 0); }