@import '../tools/tools.scss';
@import '../settings/settings.scss';

.box {
  border-radius: 12px;
  border: 0.5px solid $white;
  @include rem-calc(padding, 16px);
  @include rem-calc(margin-bottom, 10px);
  background: radial-gradient(145.52% 96.63% at 21.6% 5.05%, $black-squeeze 0%, $white 17.81%, $white 48.51%, $twilight-blue 100%);
}

.form-control-lg {
  height: calc(2em + 1rem + 2px);
}

.alabaster-box {
	background-color: $alabaster;
	@include rem-calc(padding, 20px);
}

.round-icon {
  color: $zambezi;
  border-radius: 50%;
  @include rem-calc(width, 40px);
  @include rem-calc(height, 40px);
  @include rem-calc(font-size, 20px);
  @include rem-calc(margin-right, 20px);
  box-shadow: 2px 4px 15px 1px rgba(0, 0, 0, 0.2);
}

.row {
  &.indented {
    margin-left: -16px;
    margin-right: -16px;
  }
}

.show-value {
  float: right;
  cursor: pointer;
  transition: .4s;
  @include rem-calc(font-size, 18px);
  &:hover {
    color: $radical-red;
  }
}

.faded-box {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 240%;
  background-image: linear-gradient(to bottom, rgba($alabaster, 0), $alabaster);
}

.resume {
  @include rem-calc(padding, 24px);
  background: $alabaster;
  border-radius: 12px;
  color: $mine-shaft-black;
  @include rem-calc(font-size, 16px);
  @include rem-calc(line-height, 20px);
  p:not(:last-child):not(.resume__title) {
      margin-bottom: 10px;
  }
}