@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau.woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-italic.woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-medium.woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-mediumitalic.woff");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-bold.woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-bolditalic.woff");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-super.woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "bau";
  src: url("//storage.googleapis.com/urbit-extra/bau-superitalic.woff");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "scp";
  src: url("//storage.googleapis.com/urbit-extra/scp-extralight.woff");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "scp";
  src: url("//storage.googleapis.com/urbit-extra/scp-light.woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "scp";
  src: url("//storage.googleapis.com/urbit-extra/scp-regular.woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "scp";
  src: url("//storage.googleapis.com/urbit-extra/scp-medium.woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "scp";
  src: url("//storage.googleapis.com/urbit-extra/scp-bold.woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "scp";
  src: url("//storage.googleapis.com/urbit-extra/scp-black.woff");
  font-weight: 700;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
}

html,
input,
button,
body {
  font-family: "bau";
  font-size: 18px;
}

pre,
code,
.mono {
  font-family:"scp";
}

#c {
  width: 32rem;
  margin-left: -16rem;
  position: absolute;
  left: 50%;
}

h1,
h2 {
  font-weight: 500;
}

h1 {
  font-size: 1.6rem;
}

h1:after {
  content: "\2014";
  margin-left: 1rem;
}

h2 {
  font-size: 1rem;
}

h2.advice {
  margin-top: 2rem;
  color: #555;
}

#c pre {
  font-size: .6rem;
  margin-top: 2rem;
}

#pass {
  width: 32rem;
}

button {
  border: .3rem solid #000;
  background-color: #fff;
  font-size: 1rem;
  padding: .3rem;
  font-weight: 500;
}

.sig {
  font-weight: 400;
  font-size: 2rem;
  display: inline;
  vertical-align: middle;
}

span#ship {
  font-family: 'bau';
  font-weight: 400;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  display: inline-block;
  min-width: 1rem;
}

input {
  font-family: 'scp';
  display: inline;
}

span#ship,
input {
  border: none;
  padding: .3rem;
  outline: none;
  border-bottom: 3px solid #555;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #c {
    width: 16rem;
    margin-left: -8rem;
  }
  #pass {
    width: 16rem;
  }
  input {
    -webkit-appearance: none;
    border-radius: 0;
  }
}