$black-pastel: #0d0c0c !default;
$pink-pastel: #eaafaf !default;
$green-pastel: #58d5d3 !default;
$blue-pastel: #41a4c3 !default;
$yellow-pastel: #fbffa8 !default;
$red-pastel: #f73859 !default;
$salmon: $pink-pastel !default;
$grassy: $green-pastel !default;
$sky: $blue-pastel !default;
$sandy: $yellow-pastel !default;
$bloody: $red-pastel !default;
$death: $black-pastel !default;
$colors-main: () !default;
$colors-main: map-merge(("pink-pastel": $pink-pastel, "green-pastel": $green-pastel, "blue-pastel": $blue-pastel, "yellow-pastel": $yellow-pastel, "red-pastel": $red-pastel), $colors-main);
// $colors: $salmon $grassy $sky $sandy $bloody $death;
$theme-colors-main: () !default;
$theme-colors-main: map-merge(("pink-pastel": $salmon, "green-pastel": $grassy, "blue-pastel": $sky, "yellow-pastel": $sandy, "red-pastel": $bloody), $theme-colors-main);
@each $color,
$value in $theme-colors-main {
  .text-#{$color} {
    color: $value;
  }
}

@each $color,
$value in $theme-colors-main {
  .shadow-#{$color} {
    box-shadow: 0px 2px 4px $value;
  }
}

.shadow {
  &-small {
    box-shadow: .5px .5px 2px $death;
    &:hover {
      box-shadow: 0px 0px 0px $death;
    }
  }
  &-medium {
    box-shadow: 0px 2px 4px $death;
    &:hover {
      box-shadow: 0px 1px 2px $death;
    }
  }
  &-large {
    box-shadow: 0px 0px 20px $death;
    &:hover {
      box-shadow: 0px 0px 10 $death;
    }
  }
}

.editing {
  border-bottom: 1px solid $bloody;
  border-top: 0.5px solid $bloody;
}

.font {
  &-ultralight {
    font-weight: 100 !important;
  }
  &-light {
    font-weight: 200 !important;
  }
  &-regular {
    font-weight: 300 !important;
  }
  &-medium {
    font-weight: 500 !important;
  }
  &-bold {
    font-weight: 700 !important;
  }
  &-ultrabold {
    font-weight: 900 !important;
  }
  &-smallcaps {
    font-variant: small-caps;
  }
}