/* importing fonts from google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800;900&family=Poppins:wght@500&&family=Ubuntu:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700;800&display=swap');

/* global usage selectors */
html {
	font-size: var(--default-font-size);
}

html, body {
	min-width: 1280px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	color: var(--font-color);
	font-family: 'Montserrat', 'Poppins', sans-serif;
}

a {
	font: medium var(--default-font-size) 19px 'Montserrat';
	text-decoration: none;
}

a[class~="primary"], a[class~="primary"]:visited {
  color: var(--anchor-color);
}

a[class~="accent"], a[class~="accent"]:visited {
  color: var(--accent-color);
}

a:hover, a[class~="underline"], a[class~="underline"]:visited {
  text-decoration: underline;
}

button {
	font: medium var(--default-font-size) 19px 'Montserrat';
	color: var(--button-font-color);
	background-color: var(--button-background-color);
	outline: none;
	text-transform: uppercase;
	border-radius: 2em;
	border: solid 1px #ffffff;
	letter-spacing: 0.01em;
	padding: 1em 3em;
	cursor: pointer;
}

button[class~="stretched"] {
	padding: 1em 4em;
}

button[class~="bold"] {
	font-weight: bold;
}

button[class~="primary"] {
	color: var(--button-font-color-accent);
	background-color: var(--button-background-color-accent-1);
}

button[class~="inverted"] {
	color: var(--button-font-color-accent);
  background-color: var(--button-background-color-accent-1);
  border: solid 2px var(--button-background-color);

}

button[class~="transparent"] {
	background-color: var(--button-background-color-accent-2);
}

button[class~="attention"] {
	background-color: var(--button-background-color-accent-3);
  border: solid 1px var(--button-background-color-accent-3);
  font-weight: bold;
}

button[class~="shadowed"] {
	border: none;
  box-shadow: 0px 4px 29px #66666680;
}

button[disabled] {
  background-color: var(--button-background-disabled-color);
  cursor: not-allowed;
}

h2 {
	font: normal normal 900 40px/50px 'Montserrat';
	letter-spacing: 0.01em;
	color: var(--h2-font-color);
}

h3 {
	font: normal normal bold 50px/88px 'Montserrat';
	letter-spacing: 0.01em;
	color: var(--h3-font-color);

	/* a litle hack to make the shorter underline effect,
	 	 as seen here: https://stackoverflow.com/a/51521577/3021811 */
	background-image:linear-gradient(var(--accent-color), var(--accent-color));
  background-position:bottom center;
  background-size: 3.5em 0.07em;
  background-repeat:no-repeat;
  padding-bottom: 0.1em;
  text-align: center;
  height: 1.76em;
  white-space: nowrap;
}

h3[class~="no-dash"] {
  background: none;
}

[class~="no-extra-margin"] {
  margin-block-start: 0;
  margin-block-end: 0;
}

h4 {
	color: var(--h3-font-color);
}

h5 {
  font: medium var(--font-color-alternate);
  line-height: 19px;
}

p {
	font: regular var(--default-font-size) 'Montserrat';
	line-height: 28px;
	letter-spacing: 0.01em;
}

main section h3:first-of-type {
  margin-top: 0;
}

.required::after {
  content: "*";
  font-size: 1.2em;
  font-weight: bold;
}

a[class~="cancel"], a[class~="cancel"]:visited {
  color: #ff0000;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
  box-shadow: 0 0 0 30px white inset !important;
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #666666;
}

.checkbox {
  position: relative;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
}

.checkbox label {
  margin-left: 0.7em;
}

.checkbox label::before {
  content: "";
  display: inline-block;

  height: 1.45em;
  width: 1.45em;

  border: 0.5px solid #E5E5E5;
  border-radius: 6px;
  position: absolute;
  left: 0.1em;
  top: -0.1em;
}

.checkbox label::after {
  content: "";
  display: inline-block;
  height: 0.5em;
  width: 0.8em;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;

  transform: rotate(-45deg);
  position: absolute;
  left: 0.45em;
  top: 0.25em;
}

.checkbox input[type="checkbox"]:checked + label::before {
  content: "";
  background-color: var(--accent-color);
  box-shadow: 0px 2px 10px #99999966;
}

.checkbox input[type="checkbox"] + label::after {
  content: none;
}

.checkbox input[type="checkbox"]:checked + label::after {
  content: "";
}