/* 3lau - variables.css */

:root {
  --manifold: 'ManifoldCF', sans-serif;
  --bebas: 'Bebas Neue', sans-serif;
  --bebas-book: 'Bebas Neue Book', sans-serif;
	--white: #ffffff;
	--black: #000000;
	--primary: #53bdf8;
  --primary-alt: #0c8ded;
  --primary-bright: #0dcef3;
  --secondary: #d7b747;
  --secondary-alt: #ffda47;
	--tertiary: #2d3ba1;
	--tertiary-alt: #16082e;
}

html {
  font-size: calc(12px + 9 * ((100vw - 420px) / 860));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a,
a:visited {
  transition: .3s background-color ease-in-out, .3s color ease-in-out;
}

a:hover,
a:focus {
  text-decoration: none;
}

.btn {
  background-color: var(--secondary);
  color: var(--black);
  font-size: 17px;
  font-family: var(--manifold);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .045rem;
  border: 2px solid var(--secondary);
  padding: 4px 20px;
  border-radius: 0;
}

.btn:hover,
.btn:focus {
  background-color: var(--secondary-alt);
  border-color: var(--secondary-alt);
  color: var(--black);
  box-shadow: none;
  outline: none;
}

.btn.btn-blue {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.btn.btn-blue:hover,
.btn.btn-blue:focus {
	background-color: var(--primary-alt);
	border-color: var(--primary-alt);
	color: var(--white);
}

.btn.btn-clear {
	background-color: transparent;
	color: var(--primary);
	border-color: var(--primary);
}

.btn.btn-clear:hover,
.btn.btn-clear:focus {
	background-color: var(--primary);
	color: var(--white);
}

.btn.btn-purple {
  background-color: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--white);
}

.btn.btn-purple:hover,
.btn.btn-purple:focus {
	background-color: var(--tertiary-alt);
	color: var(--white);
	border-color: var(--tertiary-alt);
}

.btn.btn-purple-alt {
	background-color: var(--tertiary-alt);
	color: var(--white);
	border-color: var(--tertiary-alt);
}

.btn.btn-purple-alt:hover,
.btn.btn-purple-alt:focus {
	background-color: var(--tertiary);
	border-color: var(--tertiary);
	color: var(--white);
}