body { font-family: sans-serif; font-weight: 200; color: #777; margin: 0; text-rendering: optimizeLegibility;
}
div { box-sizing: border-box; }
body:not([data-howmany]) #focus-items-input-container ~ div { display: none; }
body:not([data-howmany]) #focus-items-input-container       { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
body:not([data-howmany]) #focus-items-input-container h2    { font-size: 2.2rem; font-weight: 200;}
#focus-items-container { background: #fff; position: relative; z-index: 300; padding: 1px }

body[data-howmany="afew"]   #focus-items-input-container h2 { display: none; }
body[data-howmany="enough"] #focus-items-input-container    { display: none; }

#focus-item-input      { font-size: 1.3rem;  }
#focus-items           { padding: 0 0 0 1.2rem; text-align: left; margin: 0;}
#focus-items li        { cursor: pointer; padding-bottom: 4px; }

#activities input { display: block; }

#why-container {
  position: relative;
  z-index: 100;
  background: #fafafa;
  border-top: 1px solid #f2f2f3;
  padding: 3rem;
}

#why-container > div {
  max-width: 42rem;
  margin: 0 auto 6rem;
}
#why-container textarea {
  border: 1px solid #eee;
  padding: 1rem 1rem .2rem;
  min-width: 42rem;
  border-radius: 4px;
  margin-bottom: 2rem;
  font-family: sans-serif;
  color: #666;
  font-size: 1.3rem;
  min-height: 6.5rem;
  line-height: 150%;
  resize: vertical;
  box-sizing: border-box;
  overflow: hidden;
  font-weight: 100;
}

#why-container .can-do {
  min-width: 30rem;
}

#why-container h2 {
  padding-left: .9rem;
  font-weight: 300;
  font-size: 2rem;
  margin-top: calc(2vh + 4.2rem);
}
#why-container h2 span {
  font-size: 90%;
}
#why-container h2 span:before {
  content: "(";
}
#why-container h2 span:after {
  content: ")";
}

#why-container h3 {
  margin-top: 3px;
  font-weight: 300;
  padding-left: .9rem;
  margin-bottom: -4px;
  position: relative;
  z-index: 13;
}

#why-areas > div {padding-top: 2rem}

#why-areas h3 + p { padding-left: .9rem; margin-bottom: 0; margin-top: 7px }

#input-container ~ #why-container { display: none; }
#input-container[data-howmany] ~ #why-container { display: block; }


#why-areas details { margin-bottom: .6rem }
#why-areas details[open] { margin-bottom: 2rem }
#why-areas summary {position: relative; left: 1rem;}

footer details[open]{
  margin: 2rem auto calc(4vh + 2rem);
}

footer details {
  display: block;
  max-width: 30rem;
  margin: 2rem auto;
}

summary { cursor: pointer; }


@media print {
  #why-container h2 {page-break-before: always; }
  textarea:empty { display: none; }
  textarea:empty + h3 { padding-top: 1rem; display: block; }
}

@media (min-device-width: 700px) and (max-width: 1110px), (max-device-width: 699px) {
  #input-container { width: 42vw; margin: 0 auto; min-height: 13rem; }
  #focus-items-input-container { background: #f6f6f6; padding: 13vh 1rem 13vh; text-align: center; border-bottom: 1px solid #f0f0f0; }
}

@media (min-device-width: 700px) and (min-width: 800px) {
  #input-container { max-width: 96vw; }
}


@media (min-device-width: 700px) and (min-width: 1111px) {

  body[data-howmany]:not([data-howmany="enough"]) #focus-items-input-container { position: fixed; left: 1.3rem; bottom: 1.3rem; max-width: 30vw;}
  #focus-items-container { display: flex; justify-content: center; flex-direction: column; margin: 0 auto; }
  #focus-items-container[data-adding-focus-items="done"]:not(:hover) input:not(:focus) { max-height: 0; opacity: 0; margin-top: -15px }
  #focus-item-input      { order: 2;  }
}




/* smala ytor + mobiler:  */
@media (max-width: 799px), (max-device-width: 799px) {
  #focus-item-input { left: 10vw; width: 80vw; top: calc(20vh + 3rem)!important; }

  textarea { width: 100%; min-width: auto!important; }

  #input-container[data-howmany="afew"] #focus-item-input { top: 20vh!important }
}

@media (max-device-width: 799px) {
  #why-container { padding: 3rem .6rem!important; }
}