/* ===== Resets ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p {
  margin: 0px;
}

/* ===== Variables ========================================================= */
:root {
  /* Breakpoints */
  --breakpoint-small: 576px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 992px;
  --breakpoint-extra-large: 1200px;
}

/* ===== Global Styles ===================================================== */
body {
  font-family: "Lato", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
  background-image: url("/static/web_portal/img/background_tile.39f62ad22a68.jpg");
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  padding: 0.3rem;
  background-color: white;
  box-shadow: 0 5px 21px 0 rgba(50, 50, 50, 0.14);
  display: flex;
  justify-content: center;
  align-items: center;
}

header > img {
  max-width: 100%;
  max-height: 100%;
}

footer {
  height: 54px;
  padding: 0.3rem;
  color: #ffffff;
  background-color: #1f3261;
  border-bottom: 7px solid #f3a932;
  display: flex;
  justify-content: center;
  align-items: center;
}

a:link,
a:visited {
  color: #ffffff;
}

/* ===== Common Elements =================================================== */
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 1rem 3rem 1rem;
}

.button-primary {
  border-radius: 25px;
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  color: #ffffff;
  background-color: #f3a932;
  font-weight: bold;
  border: none;
}

.button-primary:hover {
  cursor: pointer;
  background-color: #fca10f;
}