@font-face {
  font-family: "Karrik";
  src: url("../fonts/Karrik-Regular.woff2");
}

@font-face {
  font-family: "Karrik";
  src: url("../fonts/Karrik-Regular.woff2");
}

@font-face {
  font-family: "Basteleur";
  src: url("../fonts/Basteleur-Bold.woff2");
}

* {
  -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
body {
  background: #333;
  padding: 2%;
  font: 1.5rem "Karrik", sans-serif;
  color: #fff;
  /*letter-spacing: .025rem !important;*/
}

body.card {
  color: #333;
  background: #fff;
}

body.card.setup {
  background: #333;
  font: 1.5rem "Karrik", sans-serif;
  color: #fff;
  /* letter-spacing: .075rem !important; */
}

body.card.setup .info a {
  background: #333;
  color: #fff;
  border: 2px solid #fff;
}

body.card.setup .info a:hover {
  background: #333;
  color: #fff;
  border: 2px solid #fff;
}

body.card.education {
  background: #F2994A;
}

body.card.diversity {
  background: #F2C94C;
}

body.card.gender {
  background: #BB6BD9;
}

body.card.philosophy {
  background: #27AE60;
}

body.card.experience {
  background: #56CCF2;
}

body.card.work {
  background: #EB5757;
}

body.card.age {
  background: #6FCF97;
}

body.card.geo {
  background: #DCF24A;
}


header {
  display: flex;
  justify-content: space-between;
}

header h1 {
  width: 20%;
  font-size: 3rem;
}

header section.filters {
  display: flex;
  width: 65%;
  align-items: center;
  justify-content: flex-start;
}

header section.info {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

header select, input[type=submit], body.card select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: 1.5rem "Karrik", sans-serif;
  height: 48px;
  padding: 8px 16px;
  margin: 0 24px 0 0;
  background: none;
  color: #fff;
  border-radius: 72px;
  border: 2px solid #fff;
  cursor: pointer;
}

body.card.setup select {
  background: #fff;
  color: #333;
  border: 2px solid #333;
  /* */
}

body.card.setup select:hover {
  background: #333;
  color: #fff;
}

header a, a.results {
  font: 1.5rem "Karrik", sans-serif;
  height: 38px;
  text-align: center;
  padding: 10px 16px 0 18px;
  text-decoration: none;
  margin: 0 24px 0 0;
  background: none;
  color: #fff;
  border-radius: 72px;
  border: 2px solid #fff;
  cursor: pointer;
}

header select:hover, header a:hover, a.results:hover {
  background: #fff;
  color: #333;
}

body.card header a, body.card input[type=submit], a.results {
  color: #333;
  border: 2px solid #333;
}

a.results {
  padding: 8px 16px;
}

section.buttons {
  width: 400px;
  display: flex;
  padding: 24px 0;
}

body.card select, section.buttons input[type=submit] {
  height: 64px;
  margin: 0;
  width: 45%;
}

body.card select  {
  background: #333;
  color: #fff;
  width: 100%;
}

body.card select:hover {
  color: #333;
  background: #fff;
  border: 2px solid #333;
}

section.buttons input[type=submit].disagree {
  margin-right: 10%;
}

section.buttons input[type=submit].location-entry {
  color: #fff;
  background: #333;
  border: 2px solid #fff;
  width: 400px;
}

section.buttons input[type=submit].location-entry:hover {
  background: #fff;
  color: #333;
}

body.card header a:hover, body.card input[type=submit]:hover {
  background: #333;
  color: #fff;
}

body.card section.card {
  aspect-ratio: 1 / 1;
  width: 400px;
  border: 2px solid #333;
  background: #fff;
  color: #333;
}

body.info section {
  max-width: 50rem;
}

section.card main {
  padding: 24px;
}

section.card main h2 {
  font-size: 2.5rem;
  line-height: 130%;
  margin: 0;
}

section.card header {
  width: 100%;
  border-bottom: 2px solid #333;
}

section.card header h3 {
  padding: 0 24px;
  font-size: 1.5rem;
  color: #333;
  display: flex;
  align-items: center;
}

h1 {
  font-family: "Basteleur", serif;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 24px 0 88px 0;
}

.hide {
  display: none !important;
}



section.prompt {
  width: 75%;
  flex-direction: column;
}

section.numbers {
  width: 25%;
  display: flex;
  flex-direction: column;
}

li section.numbers div {
  display: flex;
  margin: 0 0 8px 0;
}

li section.numbers div h4 {
  font-size: 4rem;
  margin: 0 16px 0 0;
}

li.education section.numbers div.agree h4{
  color: #F2994A;
}

li.diversity section.numbers div.agree h4{
  color: #F2C94C;
}

li.gender section.numbers div.agree h4{
  color: #BB6BD9;
}

li.philosophy section.numbers div.agree h4{
  color: #27AE60;
}
li.experience section.numbers div.agree h4 {
  color: #56CCF2
}

li.work section.numbers div.agree h4 {
  color: #EB5757;
}

li.age section.numbers div.agree h4 {
  color: #6FCF97;
}

li.geo section.numbers div.agree h4 {
  color: #DCF24A;
}

li section.numbers div h5 {
  font-size: 1.5rem;
  margin: 0;
  align-self: center;
}

li section.prompt h3 {
  font-size: 1.5rem;
  margin: 0;
  display: flex;
  align-items: center;
}

li section.prompt h2 {
  font-size: 3rem;
  margin: 16px 0;
}

.dot {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

section.card .dot {
  border: 2px solid #333;
}

li.education section.prompt h3 .dot, body.education section.card header h3 .dot {
  background-color: #F2994A;
}

li.diversity section.prompt h3 .dot, body.diversity section.card header h3 .dot {
  background-color: #F2C94C;
}

li.gender section.prompt h3 .dot, body.gender section.card header h3 .dot {
  background-color: #BB6BD9;
}

li.philosophy section.prompt h3 .dot, body.philosophy section.card header h3 .dot {
  background-color: #27AE60;
}
li.experience section.prompt h3 .dot, body.experience section.card header h3 .dot {
  background-color: #56CCF2
}

li.work section.prompt h3 .dot, body.work section.card header h3 .dot {
  background-color: #EB5757;
}

li.age section.prompt h3 .dot, body.age section.card header h3 .dot {
  background-color: #6FCF97;
}

li.geo section.prompt h3 .dot, body.geo section.card header h3 .dot {
  background-color: #DCF24A;
}

li section.bar {
  margin-top: 24px;
  width: 100%;
  height: 8px;
}

li section.bar span {
  height: 8px;
  display: block;
}

li.education section.bar {
  background-color: #7E5027;
}

li.education section.bar span {
  background-color: #F2994A;
}

li.diversity section.bar {
  background-color: #7E6928;
}

li.diversity section.bar span {
  background-color: #F2C94C;
}

li.gender section.bar {
  background-color: #623871;
}

li.gender section.bar span {
  background-color: #BB6BD9;
}

li.philosophy section.bar {
  background-color: #1A7641;
}

li.philosophy section.bar span {
  background-color: #27AE60;
}

li.experience section.bar {
  background-color: #2D6A7E;
}

li.experience section.bar span {
  background-color: #56CCF2;
}

li.work section.bar {
  background-color: #7B2D2D;
}

li.work section.bar span {
  background-color: #EB5757;
}

li.age section.bar {
  background-color: #3A6C4F;
}

li.age section.bar span {
  background-color: #6FCF97;
}

li.geo section.bar {
  background-color: #737E27;
}

li.geo section.bar span {
  background-color: #DCF24A;
}


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

  body.card, body.log, body.info {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  body.card section.card, body.card section.no-more {
    width: auto;
    margin: 2%;
  }

  body.card header, body.log header, body.info header {
   width: 96%;
   padding: 0 2%;
  }

  body.card header h1, body.log header h1, body.info header h1 {
    width: auto;
    margin: 16px 0;
  }

  body.card header section.info, body.log header section.info, body.info header section.info {
    width: auto;
  }

  body.card header a, body.log header a, body.info header a {
    margin: 0;
  }

  body.card section.buttons {
    width: auto;
    margin: 2%;
  }

  body.log header section.filters {
    display: none;
  }

  body.log header h1, body.info header h1 {
    width: 85%;
  }

  body.log li {
    width: 96%;
    padding: 0 2%;
    flex-wrap: nowrap;
    flex-direction: column;
  }

  body.log li section.prompt {
    width: 100%;
    padding: 0;
  }

  body.log li section.numbers {
    width: 100%;
  }

  body.info section {
    padding: 0 2%;
  }

}