::selection {
  background: rgba(33,150,243,0.5);
  color: $white;
}

::placeholder {
	color: $light-gray;
}

* {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
	background-color: $body-background;
	color: $darkest-gray;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

main {
	margin-top: 60px;
	margin-bottom: 60px;
  @media (max-width: $breakpoint-small) {
    margin-top: 40px;
  }
}

section {
	display: flex;
	justify-content: space-between;
	max-width: 820px;
  margin: 80px auto 80px;
  &.center {
    justify-content: center;
  }
}

a {
	transition: $fast $transition all;
	text-decoration: none;
}

h1 {
	font-size: 36px;
	line-height: 46px;
	font-weight: 300;
	@media (max-width: $breakpoint-small) {
	  font-size: 32px;
		line-height: 42px;
	}
}

h2 {
	font-size: 32px;
	line-height: 40px;
	font-weight: 300;
	@media (max-width: $breakpoint-small) {
	  font-size: 28px;
		line-height: 36px;
	}
}

.container {
	margin: auto;
	width: 100%;
	max-width: 1040px;
	padding-left: 40px;
	padding-right: 40px;
	@media (max-width: $breakpoint-small) {
	  padding-left: 20px;
	  padding-right: 20px;
	}
}
