.display-flex {
  display: flex; }

.direction-row {
  flex-direction: row; }

.direction-column {
  flex-direction: column; }

.no-wrap {
  flex-wrap: nowrap; }

.wrap {
  flex-wrap: wrap; }

.column-wrap {
  flex-flow: column wrap; }

.justify-content-center {
  justify-content: center; }

.justify-content-start {
  justify-content: flex-start; }

.justify-content-space-between {
  justify-content: space-between; }

.justify-content-space-around {
  justify-content: space-around; }

@media screen and (min-width: 52.31em) {
  .justify-content-md-space-between {
    justify-content: space-between; } }

@media screen and (min-width: 52.31em) {
  .justify-content-md-center {
    justify-content: center; } }

@media screen and (min-width: 52.31em) {
  .justify-content-md-space-around {
    justify-content: space-around; } }

@media screen and (min-width: 52.31em) {
  .justify-content-md-start {
    justify-content: flex-start; } }

.align-items-center {
  align-items: center; }

.align-items-flex-start {
  align-items: flex-start; }

.align-items-stretch {
  align-items: stretch; }

.align-content-center {
  align-content: center; }

.align-content-stretch {
  align-content: stretch; }

.align-content-between {
  align-content: space-between; }

.align-self-start {
  align-self: flex-start; }

.flex-1 {
  flex: 1; }

.flex-basis-25 {
  flex-basis: 25%; }

.flex-basis-40 {
  flex-basis: 40%; }

.flex-basis-50 {
  flex-basis: 50%; }

.flex-basis-100 {
  flex-basis: 100%; }

.flex-grow-2 {
  flex-grow: 2; }

.flex-shrink-2 {
  flex-shrink: 2; }

@media screen and (min-width: 52.31em) {
  .me-2-md {
    margin-right: 2em; } }

@media screen and (min-width: 52.31em) {
  .me-1-md {
    margin-right: 1em; } }

.me-2 {
  margin-right: 2em; }

.me-1 {
  margin-right: 1em; }

.me-half {
  margin-right: 0.5em; }

.colRow {
  flex-direction: column; }
  @media screen and (min-width: 52.31em) {
    .colRow {
      flex-direction: row; } }

.colRow-l {
  flex-direction: column; }
  @media screen and (min-width: 75em) {
    .colRow-l {
      flex-direction: row; } }

.rowCol {
  flex-direction: row; }
  @media screen and (min-width: 52.31em) {
    .rowCol {
      flex-direction: column; } }

.rowCol-1 {
  flex-direction: row; }
  @media screen and (max-width: 23.43em) {
    .rowCol-1 {
      flex-direction: column; } }

@media screen and (max-width: 52.3em) {
  .desktop-nav {
    display: none; }

  .nav .nav-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }

  ul:not(ul.hidden) {
    display: flex;
    flex-direction: column;
    align-items: center; } }
.close {
  filter: brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(3990%) hue-rotate(191deg) brightness(106%) contrast(105%); }

@media screen and (min-width: 52.31em) {
  .nav {
    display: none; }

  .desktop-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; }

  .desktop-ul {
    display: flex;
    flex-direction: row; } }
*,
::before,
::after {
  box-sizing: border-box; }

html,
body {
  background-color: Snow;
  background-color: white;
  font-size: 1.125em;
  font-weight: 400;
  font-family: "Rubik", sans-serif; }

.hidden {
  display: none; }

.show {
  display: flex; }

.top-z-index {
  position: relative;
  z-index: 1;
  opacity: 1; }

.red-font {
  color: Red;
  color: #f46262; }

.green-font {
  color: Cyan;
  color: #3cd7d7; }

.text-center {
  text-align: center; }

@media screen and (min-width: 52.31em) {
  .text-md-start {
    text-align: start; } }

.text-uppercase {
  text-transform: uppercase; }

.svg-100 {
  width: 100%;
  height: 100%; }

.custom-nav .nav-top {
  background-color: Snow;
  background-color: white; }
.custom-nav a, .custom-nav .login-mobile {
  color: Snow;
  color: white; }
.custom-nav .login-mobile {
  background-color: MidnightBlue;
  background-color: #56477b;
  border: none;
  width: 30em;
  margin-bottom: 2em; }
.custom-nav .signup-mobile {
  width: 25em; }

.order-1 .order-zero {
  order: 0; }
.order-1 .order-one {
  order: 1; }
@media screen and (min-width: 52.31em) {
  .order-1 .order-md-zero {
    order: 0; }
  .order-1 .order-md-one {
    order: 1; } }

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 0.0625em;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 0.0625em; }

.urls_container button, .btn {
  border-radius: 0.3125em;
  height: 2.5em;
  width: 10em; }

.urls_container .shown {
  display: block; }

.urls_container .not-shown {
  display: none; }

h1 {
  margin-block: 0.67em;
  font-size: 2em; }

.no-btn {
  background-color: Snow;
  background-color: white;
  border: none; }

.green-rounded-button {
  border-radius: 0.875em;
  border: none;
  color: Snow;
  color: white;
  background-color: Cyan;
  background-color: #2acfcf; }
  .green-rounded-button:hover {
    background-color: Cyan;
    background-color: #56dcdc; }

.dark-blue-rounded-button {
  border-radius: 0.875em;
  border: none;
  color: Snow;
  color: white;
  background-color: DarkSlateBlue;
  background-color: #35323e; }

.pos-relative {
  position: relative; }

.touch-target {
  font-size: 1.5em;
  margin-bottom: 0.5em; }
  @media screen and (min-width: 52.31em) {
    .touch-target {
      font-size: 1.1em;
      margin-bottom: 0.5em; } }

.container a {
  text-decoration: none; }
.container nav ul {
  list-style-type: none; }
.container header {
  position: relative; }
  .container header a {
    color: LightGray;
    color: #c4c4c4; }
    .container header a:hover {
      color: black; }
  .container header .outer-width {
    width: 100%; }
  .container header .navbarCollapse {
    z-index: 99;
    height: 65vh;
    opacity: 1;
    position: absolute;
    width: 100%;
    background-color: MidnightBlue;
    background-color: #56477b; }
  .container header .full-width-hr {
    margin: 1.25em;
    border: 0;
    border-top: 1px solid white; }
  .container header hr {
    color: white; }
  .container header li {
    padding-bottom: 2em; }
  .container header .nav-a {
    font-size: 2rem;
    font-weight: 500; }
    @media screen and (min-width: 52.31em) {
      .container header .nav-a {
        font-size: 1em; } }
.container section {
  padding-bottom: 1em; }
.container__firstChild {
  margin-top: 1em;
  margin-bottom: 2em; }
  .container__firstChild .text-center-start {
    text-align: center; }
    @media screen and (min-width: 52.31em) {
      .container__firstChild .text-center-start {
        text-align: start; } }
  @media screen and (min-width: 52.31em) {
    .container__firstChild {
      margin-bottom: 6em; } }
.container__secondChild {
  padding: 1em;
  background-color: Thistle;
  background-color: #efeff1; }
  .container__secondChild .url-form {
    background: #3b3054 url(./images/bg-shorten-mobile.svg) top center/100% 100%;
    min-height: 8em;
    position: relative;
    bottom: 2em; }
    .container__secondChild .url-form .left {
      height: 4em;
      width: 100%; }
    .container__secondChild .url-form .url {
      height: 2.5em;
      width: 100%;
      max-width: calc(100% - 1.875em);
      margin: 0 0.9375em; }
    .container__secondChild .url-form .error-message {
      font-weight: 600;
      margin-top: 1em;
      position: relative;
      left: 1em; }
    .container__secondChild .url-form .right {
      height: 4em; }
  .container__secondChild .added-url {
    background-color: Snow;
    background-color: white;
    margin: 1em 2em; }
  .container__secondChild .urls_container {
    margin-top: 2em; }
  @media screen and (min-width: 52.31em) {
    .container__secondChild .url-form {
      background: #3b3054 url(./images/bg-shorten-desktop.svg) top center/100% 100%;
      bottom: 4em; } }
  @media screen and (max-width: 75em) {
    .container__secondChild .url {
      position: relative;
      top: 1em;
      max-width: 40em; } }
.container__thirdChild {
  padding: 1em;
  background-color: Thistle;
  background-color: #efeff1; }
  .container__thirdChild article {
    background: linear-gradient(cyan, cyan) no-repeat center/5px 90%; }
  .container__thirdChild .white {
    background-color: Snow;
    background-color: white;
    margin: 3em; }
  .container__thirdChild .svg-icon {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background-color: DarkSlateBlue;
    background-color: #35323e;
    margin: 0 auto;
    position: relative;
    top: -2em; }
  @media screen and (min-width: 52.31em) {
    .container__thirdChild article {
      background: linear-gradient(cyan, cyan) no-repeat 20% center/90% 5px; }
    .container__thirdChild .down-1em {
      top: 1em; }
    .container__thirdChild .down-2em {
      top: 2em; }
    .container__thirdChild .white {
      margin: 1em; }
    .container__thirdChild .svg-icon {
      margin: 0; } }
.container__fourthChild {
  padding: 2em 0;
  background: #3b3054 url("./images/bg-boost-mobile.svg") top center/100% 100%;
  color: Snow;
  color: white; }
  @media screen and (min-width: 52.31em) {
    .container__fourthChild {
      background: #3b3054 url("./images/bg-boost-desktop.svg") top center/100% 100%; } }
.container__fifthChild {
  padding-top: 2em;
  background-color: Indigo;
  background-color: #232127; }
  .container__fifthChild .outer-svg {
    min-width: 22%;
    margin: 0 auto;
    position: relative;
    left: 1em; }
  .container__fifthChild h5 {
    padding-bottom: 1em;
    margin: 0;
    color: Snow;
    color: white; }
    .container__fifthChild h5:hover {
      color: Snow;
      color: white; }
  .container__fifthChild .touch-target {
    color: Snow;
    color: white; }
    .container__fifthChild .touch-target:hover {
      color: Cyan;
      color: #2acfcf; }
  .container__fifthChild .cyan-hover:hover {
    fill: cyan; }
  @media screen and (min-width: 52.31em) {
    .container__fifthChild ul {
      padding: 0;
      margin: 0; } }

.about-me-outer {
  height: 37.5em; }
  .about-me-outer .about-me {
    position: relative;
    top: 6.25em; }

/*# sourceMappingURL=url-shortening-api-master.css.map */