.include-font(Roboto, Roboto-Regular, normal, normal);
.include-font(Roboto, Roboto-Italic, normal, italic);
.include-font(Roboto, Roboto-Thin, 100, normal);
.include-font(Roboto, Roboto-ThinItalic, 100, italic);
.include-font(Roboto, Roboto-Light, 300, normal);
.include-font(Roboto, Roboto-LightItalic, 300, italic);
.include-font(Roboto, Roboto-Medium, 500, normal);
.include-font(Roboto, Roboto-MediumItalic, 500, italic);
.include-font(Roboto, Roboto-Bold, 700, normal);
.include-font(Roboto, Roboto-BoldItalic, 700, italic);
.include-font(Roboto, Roboto-Black, 900, normal);
.include-font(Roboto, Roboto-BlackItalic, 900, italic);

body {
  font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;
}

@keyframes spin {
  from { transform: rotateZ(0deg);  }
  to { transform: rotateZ(360deg); }
}

// ff3ce7
body > .body-background {
  position: fixed;
  width: 300vmax; height: 300vmax;
  left: -100vmax; top: -100vmax;
  z-index: -1;

  background: linear-gradient(-35deg, #004eff, transparent),
              linear-gradient(118deg, #78ff78, transparent),
              radial-gradient(300px 100px ellipse at top, #a3fa9f50, transparent 30%),
              radial-gradient(300px 100px ellipse at bottom, #a3fa9f50, transparent 30%);
  background-blend-mode: screen;
  animation: spin 300s linear infinite;
}

body > .body-wrapper {
  display: flex;
  min-height: 100vh;

  & > .hspacer {
    min-width: 5vw;
    width: 6.5vw;
    max-width: 8vw;
    .if-max-width(600px, {
      min-width: 2vw;
      width: 4vw;
      max-width: 6vw;
    });
  }

  & > .content {
    position: relative;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;

    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
    .if-max-width(@phone-width, { padding: 1.25rem 0; });

    & > .box {
      display: flex;
      flex-direction: column;

      margin: 1.5rem 2rem;
      padding-top: 3rem;
      padding-bottom: 3rem;
      padding-left: 3rem;
      padding-right: 1.5rem;

      background-color: #fafafa;
      border-radius: 1rem;
      width: 100%;
      flex-grow: 1;
      max-height: 2000px;
      text-align: left;

      & > h1.header {
        text-align: center;
        margin-bottom: 0;
        font-size: 1.75rem;
      }

      & > i.header {
        text-align: center;
        margin-bottom: 2.5rem;
        font-size: .9rem;
      }

      & ul {
        margin-top: 0.25rem;
        margin-bottom: 1.25rem;

      }

      & > span.footer {
        margin-bottom: 1rem;
      }

      & > h1 {

      }

      & > p {

      }


    }
  }
}