/************************************************************
 * RESET
 ************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  cursor: default;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

input, button, textarea, select {
  font: inherit;
}

ol, ul { list-style-type: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html { font-size: 62.5%; }
body { line-height: 1; }

/************************************************************
 * SELF
 ************************************************************/

:root {
  --background-color: #09151f;
  --accent-color: #ffc343;
  --action-color: #ff7e00;

  --gutter: 12rem;
}

html, body {
  background-color: var(--background-color);
  color: #fff;
  font-family: "futura-pt", sans-serif;
}

h1, h2, h3 {
  color: var(--accent-color);
  font-family: "sharik-sans";
  font-weight: bold;
  letter-spacing: -0.02em;
}

h1 {
  color: #fff;
  font-size: 3em;
  font-weight: bold;
  position: absolute;
  top: 17.5rem;
  right: calc(50% + var(--gutter));

  sub {
    font-size: 1em;
    padding-left: 24rem;
    position: absolute;
  }
}

#odi-logo {
  display: block;
  height: 18rem;
  margin: 10rem auto 2rem;
  width: 18rem;
}

p {
  color: white;
}

a {
  color: var(--action-color);
}


.columns { overflow: hidden; }
.column {
  width: calc(50% - var(--gutter));

  &.left { float: left; text-align: right; }
  &.right { float: right; position: relative; }

  .module img { height: 5rem; }
  .module span { color: var(--accent-color); font-size: 1.4em; position: absolute; font-style: italic; }
  &.right .module span { margin-right: 0.2em; right: 100%; }

  h2 { font-size: 2em; padding-bottom: 0.2em; padding-top: 1em; }
  p { font-size: 1.8em; line-height: 1.2em; padding-bottom: 0.8em; }
  .links a { font-size: 1.3em; letter-spacing: -0.02em; }
}

#mailing-list {
  padding-top: 4rem;
  text-align: center;

  h2 { color: #fff; font-size: 2.2em; padding-bottom: 0.3em; }
  form { position: relative; }
  input {
    appearance: none;
    background: #203343;
    border: none;
    border-radius: 0.8rem;
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-size: 2em;
    padding: 0.5em 1em;
    text-transform: lowercase;
    width: 20em;

    &::placeholder { color: var(--background-color); font-style: italic; }
  }
  button {
    appearance: none;
    background: var(--accent-color);
    border: none;
    border-radius: 0.6rem;
    color: #000;
    font-family: "sharik-sans", sans-serif;
    font-size: 1.6em;
    left: calc(50% + 8.2em);
    letter-spacing: -0.02em;
    padding: 0.5em 1em;
    position: absolute;
    text-transform: lowercase;
    top: 0.4em;
  }
  p.note {
    font-family: "sharik-sans", sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    padding-top: 0.5em;
  }
}

h2.thank-you {
  color: var(--action-color);
  font-size: 3em;
  text-align: center;
}

@media (max-width: 65rem) {
  h1 { left: 18rem; position: absolute; right: auto; text-align: left; top: 13rem; }
  h1 sub { display: block; padding-left: 0; position: absolute: }
  #odi-logo { height: 12rem; margin-left: 4em; width: 12rem; }

  .columns .column { float: none; padding: 4em; text-align: left; width: auto; }
}