body {
  font-size: 100%;
  background: #523f8c;
  font-family: 'Lato',san-serif;
  text-align: center;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  text-transform: lowercase;
  font-size: 7em;
  text-shadow: 1px 1px 0px #6C59A6;
  color: #392673;
  margin: 0px auto 40px;
}

p {
  color: white;
  width: 500px;
  margin: auto;
  padding: 20px;
  font-size: 1.4em;
}

input {
  background: #392673;
  border: 0;
  width: 500px;
  box-shadow: 1px 1px 0px #6C59A6;
  border-radius: 5px;
  color: #D1BEFF;
  padding: 10px 20px;
  margin: 20px auto 0px;
  font-size: 1.2em;
  outline: none;
}

input:focus { outline: none; }

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #D1BEFF;
}

select {
  display: block;
  background: #392673;
  border: 0;
  width: 100%;
  box-shadow: 1px 1px 0px #6C59A6;
  border-radius: 5px;
  color: #D1BEFF;
  padding: 10px 20px;
  margin: 20px auto;
  font-size: 1.2em;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

i.fa-headphones {
  text-shadow: 1px 1px 0px #6C59A6;
  color: #392673;
  margin-top: 20px;
  font-size: 15em;
}

div.select {
  position: relative;
  width: 540px;
  margin: auto;
}

i.fa-caret-down {
  color: #D1BEFF;
  position: absolute;
  top: 14px;
  right: 20px;
}

pre {
  width: 500px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 5px;
  background: #392673;
  color: #D1BEFF;
  font-size: 0.8em;
  font-family: "Courier New", Courier, monospace;
  text-align: left;
  word-wrap: break-word;
  box-shadow: 1px 1px 0px #6C59A6;
}

a.button {
  background: #392673;
  border: 0;
  width: 500px;
  box-shadow: 1px 1px 0px #6C59A6;
  border-radius: 5px;
  color: #D1BEFF;
  padding: 10px 20px;
  margin: 20px auto 20px;
  font-size: 1.2em;
  outline: none;
  text-decoration: none;
  display: block;
}

@media (max-width: 500px) {
  * { box-sizing: border-box; }
  pre { width: 100%;}
  input { width: 100%; font-size: 16px;}
  select { width: 100%; font-size: 16px; }
  div.select { width: 100%; }
  i.fa-caret-down { top: 12px; }
  p { width: 100%; font-size: 16px;}
  h1 { font-size: 4em;  margin-bottom: 20px;}
  i.fa-headphones { font-size: 10em; }
  a.button { width: 100%; }
}