/** {
  border: solid red 1px;
  }
*/
main {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 14pt;
  color: #222;
}

main > div {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

#splash {
  background-color: #eee;
}

#splash > * {
  max-height: 80vh;
  max-width: 30%;
}

#splash > div {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: space-around;
}

h1 {
  font-size: 30pt;
  line-height: 1.5em;
  font-family: "Arial", sans-serif;
  margin: 0;
}

h2 {
  font-weight: 200;
}

#splash a {
  font-size: 18pt;
  font-weight: normal;
  background-color: #2af;
  border-radius: 20px;
  padding: 10px;
  color: white;
  border: solid #888 2px;
  transition: all 0.1s;
}
#splash a:hover, #splash a:focus {
  transform: scale(1.05);
}
#splash a:not(a:hover) {
  animation: a 1.5s ease-in-out infinite;
}

@keyframes a {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(1.03); }
  100% { transform: scaleX(1); }
}


.mainsect {
  min-height: 90vh;
  align-items: flex-start;
}

.mainsect img {
  max-width: 40%;
  max-height: 65vh;
}

.mainsect > div {
  max-width: 55%;
  flex-grow: 2;
}

h3 {
  width: 100%;
  text-align: center;
  padding-top: 25px;
  box-sizing: border-box;
  font-size: 20pt;
  font-weight: 600;
  font-family: "Arial";
}


.about { background-color: #C9D0E4; }
.compare { background-color: #5267AD; }
.howto { background-color: #43548E; color: #eee; }
.pricing { background-color: #34426F; color: #eee; flex-flow: column nowrap; align-items: center; }
.story { background-color: #262F50; color: #eee; }
.faq { background-color: #001547; color: #eee; }

#compwrap {
  overflow-x: auto;
  max-width: 94vw;
  min-width: 0;
}

table {
  margin: 0 auto;
  background-color: #eee;
}

th,td {
  padding: 5px;
  text-align:center;
}

td:first-child {
  text-align: left;
}

#pricelist {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 7ch;
  text-align: center;
  max-width: unset;
}

.priceitem {
  border: solid #2af;
  border-radius: 15px;
  width: 25ch;
  min-height: 50%;
  padding: 2ch;
}

.priceitem p {
  font-size: 20pt;
}

.q {
  font-size: 16pt;
}
.a {
  padding-left: 3ch;
}



.footer {
  background-color: #222;
}
.footerlinks {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 50px;
  min-height: 15vh;
}

.footer a {
  color: #ccc;
}
.footer a:hover, .footer a:focus {
  text-decoration: underline;
}





@media screen and (max-width: 640px) {
  #splash, .mainsect {
    min-height: 85vh;
    max-height: initial;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
  }

  #splash > *, .mainsect img {
    max-height: 50vh;
  }

  #splash > * , .mainsect img, .mainsect div {
    max-width: 94%;
    flex-grow: initial;
  }

  .faq {
    text-align: left;
  }
}