@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,700,900");
@import url(normalize.css);
@keyframes animStar {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-200vh); } }
html {
  margin: 0;
  padding: 0; }
  @media only screen and (min-width: 768px) {
    html {
      margin: 0;
      padding: 0;
      cursor: url("SVG/ufo.png"), auto; }
      html::after {
        background: url("SVG/bigstars-01.svg") repeat top center;
        content: " ";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1000vh;
        width: 100%;
        z-index: 1;
        animation: animStar 150s linear infinite;
        -webkit-transform: translateZ(-999px) scale(2); }
      html::before {
        background: url("SVG/smallstars-02.svg") repeat top center;
        content: " ";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1000vh;
        width: 100%;
        z-index: 1;
        animation: animStar 300s linear infinite;
        -webkit-transform: translateZ(-999px) scale(2); } }

body {
  display: flex;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 14px;
  line-height: 1.5em;
  color: #ffffff;
  background: #000;
  margin: 0;
  padding: 5px 10px 5px 10px; }
  @media only screen and (min-width: 768px) {
    body {
      max-height: 3200px;
      padding: 0;
      font-family: "Poppins", sans-serif;
      font-size: 16px;
      line-height: 1.5em;
      display: grid;
      grid-gap: 0 25px;
      grid-template-columns: 1fr calc(60%) calc(20%) 1fr;
      grid-template-rows: 350px auto auto auto auto auto;
      background-image: url("stars.jpg");
      background-attachment: fixed;
      background-position: top;
      background-repeat: repeat-x;
      background-size: auto; }
      body::before {
        visibility: visible;
        grid-area: 1 / 3 / 1 / 3;
        content: url("SVG/Asset_27.svg");
        width: 100px;
        padding: 0;
        margin-left: -145px;
        animation: rot 6s infinite linear; }
      body::after {
        visibility: visible;
        grid-area: 1 / 3 / 1 / 3;
        content: url("SVG/Asset_24.svg");
        width: 100px;
        margin-left: -150px;
        margin-top: 120px; } }

h1,
h2,
h3,
h4 {
  font-family: "Poppins", sans-serif;
  color: #ffffff; }

p {
  margin-top: 0;
  text-align: left;
  line-height: 2em; }

h1 {
  font-weight: 900;
  font-size: 3.78em; }

h2 {
  font-size: 2.14em;
  margin-top: 10px;
  line-height: 1.2em; }

h3 {
  font-weight: 900;
  font-size: 1.21em;
  text-transform: uppercase;
  background: linear-gradient(to right, #30CFD0 0%, #276dcc 45%, #330867 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  margin-top: 20px;
  margin-bottom: 5px;
  color: #330867;
  /* Safari/WebKit uses a non-standard name */
  /* Firefox/Gecko */
  width: -moz-max-content;
  /* Chrome */
  width: -webkit-max-content;
  align-self: flex-start; }
  @media only screen and (min-width: 768px) {
    h3 {
      text-align: right;
      align-self: flex-end; } }

a {
  position: relative;
  z-index: 99; }
  a:link {
    font-weight: bold;
    text-decoration: none;
    color: #30CFD0; }
  a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #30CFD0; }
  a:hover, a:focus, a:active {
    text-decoration: underline;
    color: #30CFD0; }
  a:hover {
    position: relative;
    z-index: 99;
    cursor: pointer; }

abbr[title] {
  border-bottom: none;
  text-decoration: dotted underline; }

/* specific divs */
.page-wrapper {
  margin: 0; }
  @media only screen and (min-width: 768px) {
    .page-wrapper {
      display: grid;
      grid-gap: 25px;
      grid-area: 2 / 1 / 6 / 5;
      grid-template-columns: 1fr calc(60%) calc(20%) 1fr;
      grid-template-rows: auto auto auto auto auto auto;
      background: #000; }
      .page-wrapper::after {
        grid-area: 3 / 1 / 3 / 4;
        display: flex;
        background-image: url("crab_nebula-crop.jpg");
        background-attachment: fixed;
        background-size: cover;
        -webkit-background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        width: 99vw;
        min-height: 350px;
        content: " "; }
      .page-wrapper::before {
        background: url("SVG/smallstars-01.svg") repeat top center;
        content: " ";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1000vh;
        width: 100%;
        z-index: 1;
        animation: animStar 450s linear infinite;
        -webkit-transform: translateZ(-999px) scale(2); } }

.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements {
  display: flex;
  align-items: flex-start;
  flex-direction: column; }
  .summary p,
  .preamble p,
  .explanation p,
  .participation p,
  .benefits p,
  .requirements p {
    display: inline-block;
    z-index: 2; }
  .summary h3,
  .preamble h3,
  .explanation h3,
  .participation h3,
  .benefits h3,
  .requirements h3 {
    align-items: flex-end; }

.summary a {
  font-weight: bold;
  text-decoration: none; }
  .summary a:hover {
    position: relative;
    z-index: 99;
    cursor: pointer;
    border-bottom: #be50a9 solid;
    visibility: visible;
    -webkit-transition: border;
    -moz-transition: border;
    -o-transition: border;
    -ms-transition: border;
    transition: border; }
@media only screen and (min-width: 768px) {
  .summary {
    grid-area: 3 / 2 / 3 / 2; }
    .summary p {
      font: italic 1.2em/2.2 "Poppins", sans-serif;
      text-align: left; } }

@media only screen and (min-width: 768px) {
  .intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-area: 2 / 2 / 3 / 2;
    display: grid;
    padding-bottom: 60px; }
    .intro::after {
      grid-area: 5 / 3 / 5 / 3;
      visibility: visible;
      content: url(SVG/Asset_26.svg);
      display: block;
      width: 150px;
      margin-right: -250px;
      padding: 50px 50px 0 50px; }
    .intro .preamble {
      grid-area: 4 / 2 / 4 / 2; } }

header {
  display: flex;
  flex-direction: column; }
  header h1 {
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1em;
    background: linear-gradient(to right, #30CFD0 0%, #276dcc 45%, #330867 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-size: 3.78em; }
  header h2 {
    font-size: 2.14em;
    margin-top: 10px;
    line-height: 1.2em;
    font-weight: 300; }
  @media only screen and (min-width: 768px) {
    header {
      grid-area: 2 / 2 / 2 / 2;
      margin-top: -100px; }
      header h3 {
        font-weight: 900;
        font-size: 1.5em;
        text-align: right;
        text-transform: uppercase;
        background: linear-gradient(to right, #30CFD0 0%, #276dcc 45%, #330867 85%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 1px;
        margin-top: 20px;
        margin-bottom: 5px; } }

.supporting footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap; }
  .supporting footer:nth-child(n+1) {
    visibility: hidden; }
  .supporting footer .zen-validate-html::after {
    visibility: visible;
    content: url("SVG/HTML.svg");
    display: block;
    width: 60px; }
  .supporting footer .zen-validate-css::after {
    visibility: visible;
    content: url("SVG/CSS.svg");
    display: block;
    width: 60px; }
  .supporting footer .zen-license::after {
    visibility: visible;
    content: url("SVG/CC.svg");
    display: block;
    width: 60px; }
  .supporting footer .zen-accessibility::after {
    visibility: visible;
    content: url("SVG/ALLY.svg");
    display: block;
    width: 60px; }
  .supporting footer .zen-github::after {
    visibility: visible;
    content: url("SVG/GH.svg");
    display: block;
    width: 60px; }
@media only screen and (min-width: 768px) {
  .supporting {
    grid-area: 4 / 2 / 6 / 2; }
    .supporting::after {
      grid-area: 7 / 3 / 7 / 3;
      visibility: visible;
      content: url("SVG/Asset_01.svg");
      display: block;
      width: 150px;
      margin-left: 110%; }
    .supporting .explanation {
      grid-area: 3 / 2 / 4 / 2;
      display: flex;
      flex-direction: column; }
    .supporting > :nth-child(2) {
      grid-area: 4 / 2 / 4 / 2;
      display: flex;
      flex-direction: column; }
    .supporting .benefits {
      grid-area: 5 / 2 / 5 / 2; }
    .supporting .requirements {
      grid-area: 6 / 2 / 6 / 2; } }

.sidebar {
  display: flex;
  font: 12pt "Poppins", sans-serif;
  margin-top: 50px; }
  .sidebar h3 {
    text-align: left; }
  .sidebar ul {
    margin: 0;
    padding: 0; }
  .sidebar li {
    line-height: 1.3em;
    display: block;
    padding-top: 5px;
    margin-bottom: 5px;
    list-style-type: none; }
    .sidebar li a:link {
      color: #cecece; }
    .sidebar li a:visited {
      color: #cecece; }
  .sidebar li a:first-of-type {
    font-weight: 900;
    color: #ffffff;
    font-size: 1.21em;
    text-transform: uppercase;
    letter-spacing: 1px;
    list-style-type: none; }
    .sidebar li a:first-of-type::after {
      content: "\a";
      white-space: pre; }
  .sidebar .designer-name {
    font-weight: 700;
    color: #cecece;
    font-size: 1.1em;
    letter-spacing: 1px; }
    .sidebar .designer-name::after {
      content: "\a";
      white-space: pre; }
  .sidebar .zen-resources li {
    display: flex; }
    .sidebar .zen-resources li a:first-of-type {
      font-weight: 600;
      color: #ffffff;
      font-size: 1.1em;
      text-transform: none;
      list-style-type: none;
      text-indent: 1em; }
  .sidebar .zen-resources .view-css::before {
    visibility: visible;
    content: url("SVG/Asset_16.svg");
    width: 20px;
    display: block; }
  .sidebar .zen-resources .css-resources::before {
    visibility: visible;
    content: url("SVG/Asset_13.svg");
    width: 20px;
    display: block; }
  .sidebar .zen-resources .zen-faq::before {
    visibility: visible;
    content: url("SVG/Asset_09.svg");
    width: 20px;
    display: block; }
  .sidebar .zen-resources .zen-submit::before {
    visibility: visible;
    content: url("SVG/Asset_18.svg");
    width: 20px;
    display: block; }
  .sidebar .zen-resources .zen-translations::before {
    visibility: visible;
    content: url("SVG/Asset_19.svg");
    width: 20px;
    display: block; }
  @media only screen and (min-width: 768px) {
    .sidebar {
      display: grid;
      grid-area: 1 / 3 / 6 / 3;
      grid-template-rows: auto auto auto auto auto;
      grid-template-columns: 1fr;
      font: 12pt "Poppins", sans-serif;
      padding-bottom: 30px;
      margin-top: 10px; }
      .sidebar::before {
        visibility: visible;
        grid-area: 1 / 3 / 1 / 3;
        content: url("SVG/Asset_22.svg");
        width: 150px;
        margin-left: calc(-100vw/6);
        margin-top: -200px; }
      .sidebar > .wrapper {
        grid-area: 1 / 1 / 5 / 1;
        display: grid;
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: 1fr; }
      .sidebar > .wrapper > .design-selection {
        grid-area: 1 / 1 / 1 / 1; }
      .sidebar > .wrapper > .design-archives {
        grid-area: 3 / 1 / 3 / 1; }
      .sidebar > .wrapper > .zen-resources {
        grid-area: 4 / 1 / 4 / 1; } }

nav ul {
  margin-left: 0;
  padding-left: 0; }
nav li {
  list-style-type: none;
  margin-top: 10px; }
nav a {
  text-decoration: none;
  color: #cecece;
  position: relative;
  z-index: 2; }

@keyframes rot {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

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