@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

// variables
$cancel: #C33764;
$secondary: #F2994A;
$standard: #155799;
$submit: #159957;
$white: #F1F2F2;
$transition: all 0.25s ease-in-out;

// mixin
@mixin mybutton($color_1, $color_2) {
  width: 250px;
  margin: 10px;
  border: 2px solid $color_1;
  padding: 6px 24px;
  font-size: 1.15em;
  letter-spacing: 1px;
  text-transform: uppercase;
	color: $color_1;
  background-color: $color_2;
	transition: $transition;
	&:hover {
		background-color: $color_1;
		border-color: $color_1;
		color: $color_2;
	}
	&:active {
		background-color: $color_1;
		border-color: $color_1;
		color: $color_2;
		box-shadow: none;
	}
	&:focus, &:active:focus {
		background-color: $color_1;
		border-color: $color_1;
		color: $color_2;
		outline: 5px auto $color_1;
	}
	&:visited {
		background-color: $color_1;
		border-color: $color_1;
	}
}

// styles
* {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body {
  background-color: #dedede;
}

div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  @include mybutton($standard, $white);
}

.btn-secondary {
  @include mybutton($secondary, $white);
}

.btn-submit {
  @include mybutton($submit, $white);
} 

.btn-cancel {
  @include mybutton($cancel, $white);
}