/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
:root {
  --color-bg: #bdc9ff;
  --color-text-main: #000000;
  --color-primary: #afece0;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: 'Hanken Grotesk', sans-serif;
  --font-family-header: 'Hanken Grotesk', sans-serif;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: center;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: 'Hanken Grotesk', sans-serif;
  background-color: var(--color-bg);
  margin: 0;
}

.notification-bar {
  background-color: var(--color-primary);
  display: flex;
  justify-content: center;
  padding: 0.2em 0;
  font-weight: bold;
  flex-wrap: wrap;
  position: fixed;
  width: 100%;
  top: 0;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 3rem 1rem 0;
  word-break: break-word;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  max-width: 1000px;
}

ul {
  margin-bottom: 0;
  margin-top: 0;
}

li.hidden {
  display: none;
}

/* Title h1 style */
.title {
  color: #2800ff !important;
  font-family: 'Hanken Grotesk', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 60px;
  line-height: 105%;
  margin: 2rem 0 0;
  text-decoration: none;
}

.subtitle {
  font-size: 1.17em;
}

.intro {
  margin-bottom: 0.1em;
}

/* Very light scaling for our illustration */
.illo-container {
  display: flex;
  justify-content: flex-end;
}
.illustration {
  max-width: 100%;
  max-height: 150px;
  margin-top: 1rem;
}

/* Styles for our custom color form and its results */
.precinct-info {
  margin-left: 5px;
}
.directions {
  font-size: 1rem;
  margin-top: 0;
}
.address-form {
  margin-top: 3rem;
}
.form-wrapper {
  width: 90%;
  max-width: 500px;
  margin-left: 5px;
}
.form-wrapper a:not(.btn--remix) {
  font-weight: bold;
  color: var(--color-text-main);
  margin-top: 8px;
}
.form-wrapper button {
  margin-top: 8px;
}
.form-wrapper button:hover {
  cursor: pointer;
  box-shadow: -8px 4px 20px #9be7d8;
}
form {
  margin: 0.75rem 0;
}
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  color: black;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
}
label {
  color: #000000;
  font-weight: bold;
}

/* FAQ Wrapper */
.faq-wrapper {
  border-top: 4px solid #fff;
  margin: 3rem auto 0 5px;
  padding-top: 1rem;
}
.faq-wrapper p,
.faq-wrapper li {
  font-size: 1rem;
}
h2 {
  color: #2800ff;
}