main.scss

@import './styles/theme';
@import './node_modules/skeleton-scss/scss/skeleton';
@import './styles/skeleton-getting-started';
@import './styles/sections';
@import './styles/components/button';
@import './styles/components/card';
@import './styles/components/hamburgers';
@import './styles/menu';
@import './styles/modal';

body,
html {
  height: 100%;
  overflow: hidden;
}

body {
  perspective: 200vw;
  background-color: black;
  background-image: linear-gradient(fade_out(darken($primary-color, 20%), .2), fade_out(darken($primary-color, 30%), .2) 45%, black), url('./assets/anchors.svg');
  background-size: auto;
}

.sleek-background {
  background-color: white;
  background-image: url('./assets/background.svg');
  background-size: cover;
}

.outer-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  perspective: 1000vw;
  will-change: transform;
}

.main-wrapper {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  overflow: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border: 1px solid white;
  will-change: transform;
  background-attachment: fixed;

  .main {
    position: relative;

    .overlay {
      position: absolute;
      z-index: 10;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      background-color: black;
      pointer-events: none;
      @at-root .menu-open & {
        pointer-events: all;
      }
    }
  }
}

[reveal] {
  visibility: hidden;
  will-change: visibility, transform;
}

a {
  white-space: nowrap;
}