@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500');

body {
  background:white;
  font-family: courier, monospace;
  margin: 0px;
  font-family: 'Work Sans', sans-serif;
}

* {
  /*outline: 1px solid silver;*/
}

a {
  cursor: pointer;
}

header, footer, section {
  width:100%;
}

article, section > a {
  margin: 0em auto;
  max-width: 800px;
  width:800px;
  padding: 0em;
}

section, footer {
  padding: 4em 0em 3em 0em;
}

footer, #hello{
  background: #2e8eb6;
  color: white;
}

footer {
  background: #FFC914;
  color: black;
}

#funnel {
  color: #2e8eb6;
}

#top{
  height: 3.6em;
}

footer{
  height: 5em;
}


/* PARTS */


article, section > a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

article div, section > a div {
  width: 100%;
}

article > *, section > a > * {
  margin-left: 1em;
  margin-right: 1em;
}

article > *:first-child, section > a > *:first-child {
  margin-left: 0em;
}

article > *:last-child, section > a > *:last-child {
  margin-right: 0em;
}

#funnel article, #funnel > a {
  margin-bottom: 3em;
}

section > a {
  text-decoration: none;
}

/* TEXT */

b a {
  text-decoration: none;
}

h1 {
  font-size: 2.5em;
  margin-top: 0em;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
  margin-left: -0.1em;
}

h2 {
  font-size: 2em;
  margin-top: 0em;
  margin-bottom: 0.3em;
  letter-spacing: 0.1em;
}


p {
  font-size: 1.6em;
  line-height: 1.4em;
}

a {
  color: inherit;
}

section > h1 {
  text-align:center;
  margin-bottom:1.4em;
  color: #FE4A49;
}

h1.red {
  font-size: 3.5em;
  margin-bottom: 1em;
}

a.link:hover h2 {
  text-decoration: underline;
}

.link p {
  margin-top: 0.4em;
}


footer p{
  text-align: center;
  font-size: 1.2em;
  width: 100%;
  margin: 0em;
}

#funnel p {
  color: gray;
}

#hello p {
  font-size: 1.84em;
}

b {
  color: #2e8eb6;
}

#hello b{
  color: #FFC914;
}


/* QUIRKS */

menu img {
  width: 1.5em;
}



.thinker {
  width: 260px;
}

#logo {
  width: 100%;
  display: flex;
  justify-content: space-between;
}


#logo .type {
  float:left;
  width: 50%;
  height: 20%;
  max-width: 350px;
}

header menu {
  float: right;
  margin-top:0.8em;
  padding-left: 0em;
  font-family: arial, sans-serif;
  min-width:400px;
}

header menu a{
  float: right;
  font-size: 1.2em;
  text-decoration: none;
  color: black;
  margin: 0em 0em 0em 1em;

}


header menu a:hover {
  text-decoration: underline;
}


#writer img {
  border: 0.5em solid #2e8eb6;
  width: 420px;
  margin-top:2em;
}

#hello img {
  margin-top: -0.8em;
}

#hello {
  padding-top: 5em;
  padding-bottom: 5em;
}

img.icon {
  width: 5em;
  background: #2e8eb6;
  border-radius: 0.5em;
  padding: 0.7em;
  box-sizing: border-box;
  margin-top: 0.5em;
}

img.icon * {
    stroke: gray;
}

#funnel #writer {
  margin-bottom: 1em;
}

#funnel #launcher {
  flex-wrap: wrap;
  margin-bottom: 8em;
}

#launcher h2 {
  color: #FE4A49;
  font-size: 2em;
  width: 100%;
  flex-shrink: 0;

}

select, button {
  margin: 0em;
  border: none;
  background: #FFC914;
  border-radius: 0.3em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  color: white;
  font-size: 1.8em;
}

button {
  color: black;
}

select {
  background: #2e8eb6;
  width: 610px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select {
  margin: 0em;
  width: 610px;
  display: block;
  position: relative;
}

.select:after {
  content: "";
  width: 2em;
  height: 2em;
  background-image: url(/svg/down.svg);
  background-size: contain;

  z-index: 100000;
  right: 1em;
  top: 1.2em;
  position: absolute;
  pointer-events: none;
}

button {
  letter-spacing: 0.16em;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5em 0.8em;
}



@media screen and (max-width: 900px) {


}


@media screen and (max-width: 800px) {
/*  body {
    font-size: 0.8em;
  }
  header menu a {
    font-size: 1.8em;
  }*/

}


@media screen and (max-width: 500px) {

/*  header menu a {
    font-size: 1.2em;
  }*/

}