/*
Use: set the breakpoints -> get a div.flexy into your markup and then put columns into them. for a non-responsive column just use col-*, for a responsive column use i.e. col-m*
*/
.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: .5rem; }
  .row.no-wrap {
    flex-wrap: no-wrap; }
  .row.top {
    align-items: flex-start; }
  .row.bottom {
    align-items: flex-end; }
  .row.stretch {
    align-items: stretch; }
  .row.middle {
    align-items: center; }
  .row.near {
    justify-content: flex-start; }
  .row.far {
    justify-content: flex-end; }
  .row.center {
    justify-content: center; }
  .row.between {
    justify-content: space-between; }
  .row.around {
    justify-content: space-around; }
  .row.no-margin {
    margin: 0; }
  .row [class^='col-'] {
    box-sizing: border-box;
    min-height: 1px;
    padding: .5rem;
    flex-basis: 100%; }
    .row [class^='col-'].top {
      align-self: flex-start; }
    .row [class^='col-'].bottom {
      align-self: flex-end; }
    .row [class^='col-'].stretch {
      align-self: stretch; }
    .row [class^='col-'].middle {
      align-self: center; }
    .row [class^='col-'].no-gutter {
      padding: 0; }
  @media screen and (min-width: 0px) {
    .row .col-1 {
      flex-basis: 8.33333%;
      margin-bottom: 0; }
    .row .col-offset-1 {
      margin-left: 8.33333%; }
    .row .col-2 {
      flex-basis: 16.66667%;
      margin-bottom: 0; }
    .row .col-offset-2 {
      margin-left: 16.66667%; }
    .row .col-3 {
      flex-basis: 25%;
      margin-bottom: 0; }
    .row .col-offset-3 {
      margin-left: 25%; }
    .row .col-4 {
      flex-basis: 33.33333%;
      margin-bottom: 0; }
    .row .col-offset-4 {
      margin-left: 33.33333%; }
    .row .col-5 {
      flex-basis: 41.66667%;
      margin-bottom: 0; }
    .row .col-offset-5 {
      margin-left: 41.66667%; }
    .row .col-6 {
      flex-basis: 50%;
      margin-bottom: 0; }
    .row .col-offset-6 {
      margin-left: 50%; }
    .row .col-7 {
      flex-basis: 58.33333%;
      margin-bottom: 0; }
    .row .col-offset-7 {
      margin-left: 58.33333%; }
    .row .col-8 {
      flex-basis: 66.66667%;
      margin-bottom: 0; }
    .row .col-offset-8 {
      margin-left: 66.66667%; }
    .row .col-9 {
      flex-basis: 75%;
      margin-bottom: 0; }
    .row .col-offset-9 {
      margin-left: 75%; }
    .row .col-10 {
      flex-basis: 83.33333%;
      margin-bottom: 0; }
    .row .col-offset-10 {
      margin-left: 83.33333%; }
    .row .col-11 {
      flex-basis: 91.66667%;
      margin-bottom: 0; }
    .row .col-offset-11 {
      margin-left: 91.66667%; } }
  @media screen and (min-width: 480px) {
    .row .col-s1 {
      flex-basis: 8.33333%;
      margin-bottom: 0; }
    .row .col-offset-s1 {
      margin-left: 8.33333%; }
    .row .col-s2 {
      flex-basis: 16.66667%;
      margin-bottom: 0; }
    .row .col-offset-s2 {
      margin-left: 16.66667%; }
    .row .col-s3 {
      flex-basis: 25%;
      margin-bottom: 0; }
    .row .col-offset-s3 {
      margin-left: 25%; }
    .row .col-s4 {
      flex-basis: 33.33333%;
      margin-bottom: 0; }
    .row .col-offset-s4 {
      margin-left: 33.33333%; }
    .row .col-s5 {
      flex-basis: 41.66667%;
      margin-bottom: 0; }
    .row .col-offset-s5 {
      margin-left: 41.66667%; }
    .row .col-s6 {
      flex-basis: 50%;
      margin-bottom: 0; }
    .row .col-offset-s6 {
      margin-left: 50%; }
    .row .col-s7 {
      flex-basis: 58.33333%;
      margin-bottom: 0; }
    .row .col-offset-s7 {
      margin-left: 58.33333%; }
    .row .col-s8 {
      flex-basis: 66.66667%;
      margin-bottom: 0; }
    .row .col-offset-s8 {
      margin-left: 66.66667%; }
    .row .col-s9 {
      flex-basis: 75%;
      margin-bottom: 0; }
    .row .col-offset-s9 {
      margin-left: 75%; }
    .row .col-s10 {
      flex-basis: 83.33333%;
      margin-bottom: 0; }
    .row .col-offset-s10 {
      margin-left: 83.33333%; }
    .row .col-s11 {
      flex-basis: 91.66667%;
      margin-bottom: 0; }
    .row .col-offset-s11 {
      margin-left: 91.66667%; } }
  @media screen and (min-width: 768px) {
    .row .col-m1 {
      flex-basis: 8.33333%;
      margin-bottom: 0; }
    .row .col-offset-m1 {
      margin-left: 8.33333%; }
    .row .col-m2 {
      flex-basis: 16.66667%;
      margin-bottom: 0; }
    .row .col-offset-m2 {
      margin-left: 16.66667%; }
    .row .col-m3 {
      flex-basis: 25%;
      margin-bottom: 0; }
    .row .col-offset-m3 {
      margin-left: 25%; }
    .row .col-m4 {
      flex-basis: 33.33333%;
      margin-bottom: 0; }
    .row .col-offset-m4 {
      margin-left: 33.33333%; }
    .row .col-m5 {
      flex-basis: 41.66667%;
      margin-bottom: 0; }
    .row .col-offset-m5 {
      margin-left: 41.66667%; }
    .row .col-m6 {
      flex-basis: 50%;
      margin-bottom: 0; }
    .row .col-offset-m6 {
      margin-left: 50%; }
    .row .col-m7 {
      flex-basis: 58.33333%;
      margin-bottom: 0; }
    .row .col-offset-m7 {
      margin-left: 58.33333%; }
    .row .col-m8 {
      flex-basis: 66.66667%;
      margin-bottom: 0; }
    .row .col-offset-m8 {
      margin-left: 66.66667%; }
    .row .col-m9 {
      flex-basis: 75%;
      margin-bottom: 0; }
    .row .col-offset-m9 {
      margin-left: 75%; }
    .row .col-m10 {
      flex-basis: 83.33333%;
      margin-bottom: 0; }
    .row .col-offset-m10 {
      margin-left: 83.33333%; }
    .row .col-m11 {
      flex-basis: 91.66667%;
      margin-bottom: 0; }
    .row .col-offset-m11 {
      margin-left: 91.66667%; } }
  @media screen and (min-width: 980px) {
    .row .col-l1 {
      flex-basis: 8.33333%;
      margin-bottom: 0; }
    .row .col-offset-l1 {
      margin-left: 8.33333%; }
    .row .col-l2 {
      flex-basis: 16.66667%;
      margin-bottom: 0; }
    .row .col-offset-l2 {
      margin-left: 16.66667%; }
    .row .col-l3 {
      flex-basis: 25%;
      margin-bottom: 0; }
    .row .col-offset-l3 {
      margin-left: 25%; }
    .row .col-l4 {
      flex-basis: 33.33333%;
      margin-bottom: 0; }
    .row .col-offset-l4 {
      margin-left: 33.33333%; }
    .row .col-l5 {
      flex-basis: 41.66667%;
      margin-bottom: 0; }
    .row .col-offset-l5 {
      margin-left: 41.66667%; }
    .row .col-l6 {
      flex-basis: 50%;
      margin-bottom: 0; }
    .row .col-offset-l6 {
      margin-left: 50%; }
    .row .col-l7 {
      flex-basis: 58.33333%;
      margin-bottom: 0; }
    .row .col-offset-l7 {
      margin-left: 58.33333%; }
    .row .col-l8 {
      flex-basis: 66.66667%;
      margin-bottom: 0; }
    .row .col-offset-l8 {
      margin-left: 66.66667%; }
    .row .col-l9 {
      flex-basis: 75%;
      margin-bottom: 0; }
    .row .col-offset-l9 {
      margin-left: 75%; }
    .row .col-l10 {
      flex-basis: 83.33333%;
      margin-bottom: 0; }
    .row .col-offset-l10 {
      margin-left: 83.33333%; }
    .row .col-l11 {
      flex-basis: 91.66667%;
      margin-bottom: 0; }
    .row .col-offset-l11 {
      margin-left: 91.66667%; } }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  background-size: 200% 200%;
  -webkit-animation: gradient 10s linear infinite;
          animation: gradient 10s linear infinite; }

* {
  box-sizing: border-box;
  margin: 0;
  color: white;
  font-family: "Roboto"; }

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 51%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 51%; } }

@keyframes gradient {
  0% {
    background-position: 0% 51%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 51%; } }

section {
  margin-left: 20vw; }
  @media (max-width: 599px) {
    section {
      margin-left: 0; } }
  section h1 {
    font-size: 40px;
    font-family: "Encode Sans Expanded";
    letter-spacing: 3px; }
  section h2 {
    font-size: 18px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 50px;
    letter-spacing: 1px; }
  section a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    margin-right: 14px;
    letter-spacing: .5px; }
    section a:hover {
      text-decoration: underline; }