$colors: (primary: rgba(253, 230, 23, 0.966),
  accent: #808080,
  color: #0000,
  hover: rgb(167, 48, 48));

@mixin button {
  border: solid;
  border-radius: 0.3cm;
  background-color: color(primary);
  border-radius:28px;
	border:1px solid color(accent);
	display:inline-block;
	cursor:pointer;
	color: color(color);
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
  text-shadow:0px 1px 0px #2e2e2e;
  &:hover {
    background: color(hover);
  }

  &:active {
    position: relative;
    top: 1px;
  }
}

;

@function color($color-name) {
  @return map-get($colors, $color-name)
}

;

// Responsive
$desktop: 800px;
$mobile: 640px;

@mixin desktop {
  @media (min-width: $desktop) {
    @content
  }
}

;

@mixin mobile {
  @media (min-width: $mobile) {
    @content
  }
};

.bc-button {
  @include button();
}