/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

/* ============================================
 = FONTS
 =============================================*/

/*=== Universal Selector CSS Reset ===*/

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.validation-summary-errors ul {
  list-style: none;
  margin: 10px 0;
  font-size: 24px;
  color: white;
}

/*=== Background Colors ===*/

.white-bg {
  background-color: #fff;
}

.dark-gray-bg {
  background-color: #303036;
}

.light-gray-bg {
  background-color: #a0a0a3;
}

.extra-light-gray-bg {
  background-color: #f7f7f7;
}

.blue-bg {
  background-color: #00c1f0;
}

/*=== Colors ===*/
.white {
  color: #fff;
}

.dark-gray {
  color: #303036;
}

.light-gray {
  color: #a0a0a3;
}

.extra-light-gray {
  color: #f1f1f1;
}

.blue {
  color: #00c1f0;
}

/* ============================================
 = FONTS
 =============================================*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
button {
  display: block;
  font-family: 'Poppins', sans-serif;
  color: #303036;
  line-height: 1.6em;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 60px;
  font-weight: 800;
}

h2 {
  font-size: 32px;
  font-weight: 600;
}

h3 {
  font-size: 24px;
  font-weight: 300;
  padding-bottom: 24px;
}

h4 {
  font-size: 24px;
}

p {
  font-size: 18px;
  font-weight: 400;
  padding-top: 10px;
}

input {
  font-size: 16px;
}

button {
  font-size: 20px;
  font-weight: 700;
}

/*=== Colors ===*/
.white {
  color: #fff;
}

.dark-gray {
  color: #303036;
}

.light-gray {
  color: #a0a0a3;
}

.extra-light-gray {
  color: #f1f1f1;
}

.blue {
  color: #00c1f0;
}

/* ============================================
 = DIVS
 =============================================*/

.page-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background-color: #303036;
  text-align: center;
  padding: 0 10%;
  box-sizing: border-box;
}

/* ============================================
 = FORMS
 =============================================*/

form {
  display: flex;
  flex-direction: column;
}

/* ============================================
 = INPUT
 =============================================*/

input {
  display: block;
  padding: 16px;
  background-color: #fff;
  color: #303036;
  border: 2px solid #d9d9da;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* ============================================
 = BUTTONS
 =============================================*/

button {
  display: block;
  padding: 16px;
  color: #fff;
  background-color: #00c1f0;
  border: 2px solid #00c1f0;
  border-radius: 8px;
}

button:hover {
  background-color: #45d1f4;
  border: 2px solid #45d1f4;
}

/* ============================================
 = IMAGES
 =============================================*/

.logo {
  width: 150px;
  height: 150px;
  padding-bottom: 50px;
}