:root {
  --blue: hsla(219, 84%, 15%, 1);
  --teal: hsla(202, 47%, 57%, 1);
  --silver: hsla(0, 1%, 79%, 1);
  --gray: hsla(0, 0%, 44%, 1);
  --opaque: 232, 234, 235;
}
html {
  font-size: 18px;
}
header img {
  max-width: 100%;
}
p,
li {
  line-height: 1.8rem;
}
p,
li,
.logobox h2,
h3,
h4,
h5,
h6,
.button,
input,
textarea {
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: lighter;
}

h1,
h2,
.quote {
  font-family: "Playfair Display", "Times New Roman", serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: var(--blue);
}
h2,
h1 {
  font-size: 2.5rem;
}
header {
  display: grid;
  grid-template-columns: 60% auto;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  min-height: 6.4rem;
  margin: 1% 5%;
  position: relative;
  border-bottom: 4px double var(--gray);
}
.logobox {
  display: grid;
  grid-template-columns: 70% auto;
  grid-template-rows: auto auto;
  margin-bottom: 0;
}
.logobox h1,
.logobox h2 {
  margin: 0.5rem;
}
.logobox h1 {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.4rem;
}
.logobox h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.7rem;
  white-space: nowrap;
  font-style: italic;
  line-height: 0;
  margin-top: -0.05rem;
}
.logobox img {
  grid-column: 2;
  grid-row: 1/3;
}

.navmenu li:first-child {
  display: block;
}
.navmenu li {
  display: none;
}
.navmenu a {
  display: block;
}
a {
  color: var(--blue);
  text-decoration: none;
  font-family: "Open Sans Condensed", Arial, sans-serif;
}
.ham {
  font-size: 3rem;
}
.responsive li:not(:first-child) {
  display: block;
  background-color: var(--blue);
  padding: 0.5rem 2rem;
}
.responsive li:not(:first-child) a {
  color: white;
}
.responsive li:not(:first-child):hover {
  background-color: var(--teal);
}
.navmenu {
  position: absolute;
  top: 20%;
  right: 1%;
  text-align: right;
}
.active {
  border-bottom: 6px solid var(--teal);
}
.button {
  background-color: var(--teal);
  color: black;
  filter: drop-shadow(0 0 0 black);
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  margin: 1rem;
  justify-self: center;
  border: 3px solid var(--teal);
  max-height: 1rem;
}
.button:hover {
  border: 3px solid var(--teal);
  background-color: var(--blue);
  color: white;
}
/* --------main body------------ */
main,
footer {
  text-align: center;
}

main > section:not(:first-child, .quotebox) {
  padding: 5%;
}
.introbox {
  padding: 1rem;
}
.introbox img {
  max-width: 25rem;
}
.introbox,
.introbox h2,
.introbox h3,
.introbox p,
.blue,
.blue h2,
.blue h3,
.blue h4,
.blue p {
  background-color: var(--blue);
  color: white;
}
.introbox h2 {
  margin-top: -1rem;
  font-size: 2rem;
  font-weight: lighter;
  white-space: break-spaces;
}
.introbox h3::first-letter {
  font-size: 3rem;
  font-family: "Playfair Display", "Times New Roman", serif;
}
.introbox p,
.copyright {
  padding: 1rem;
}

/* ---------footer--------- */
.copyright {
  background-color: var(--gray);
}
.copyright p {
  color: white;
}
footer p {
  margin: 0;
  color: black;
}
footer img {
  margin: 1rem;
}
.socialbox img {
  max-width: 3rem;
  margin: 0;
  padding: 0.5rem;
}
.socialbox h4 {
  padding-top: 2rem;
}
.contact {
  margin-top: 5rem;
  padding-top: 2rem;
}

/* -----------thankyou page---------- */
.thankyoubox {
  grid-column: 1/3;
  margin: 0 -20% 0 30%;
}
/* ---------------Community Page---------- */
.imgbox {
  object-fit: cover;
  height: 400px;
  width: 337.5px;
}
.opaquebox {
  background-color: rgba(var(--opaque), 0.3);
  padding: 0.5rem;
}
.opaquebox li {
  text-align: left;
  margin-bottom: 0.5rem;
}
.quotebox {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.quote1,
.quote2 {
  font-size: 400px;
  margin: 0;
  padding: 0;
  filter: opacity(20%);
  max-width: 10rem;
}
.quote1 {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: -1;
  justify-self: flex-start;
}
.quote-title {
  grid-column: 1 / span 2;
  grid-row: 1 / 3;
  z-index: 2;
  font-size: 1.2rem;
  font-weight: 100;
  align-self: center;
  letter-spacing: 0.05rem;
  line-height: 2.3rem;
  margin: 0;
  margin-top: -2rem;
  max-width: 500px;
  justify-self: center;
  padding: 2%;
}
.quote2 {
  grid-column: 1/3;
  grid-row: 2;
  z-index: -1;
  justify-self: flex-end;
  margin-top: -1rem;
}
.icon {
  max-width: 12rem;
}
.graph {
  background-color: var(--teal);
  margin-bottom: 2rem;
}
.graph .stats h2 {
  margin: 0;
}
.graph img ~ h2 {
  margin-bottom: 0;
}
.community {
  background-color: var(--blue);
}
.community h2,
.community h3,
.community li {
  color: white;
}

/* ----------About Page--------- */

.tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
  margin-top: 4rem;
}

ul.tilegrid,
ul.stats {
  list-style-type: none;
  padding: 0;
}
.flip-card-front h2,
.flip-card-back h2 {
  line-height: 2.5rem;
}
.flip-card-front p,
.flip-card-front h2,
.flip-card-back p,
.flip-card-back h2 {
  padding: 1rem;
  margin: 0;
}
.flip-card-back p {
  text-align: left;
}
.tilegrid li {
  margin: 0 auto;
}
.colorblock {
  background-color: var(--blue);
  width: 300px;
  height: 300px;
}
.colorblock2 {
  background-color: var(--teal);
  width: 300px;
  height: 300px;
}
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1.8s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-card-back {
  background-color: var(--teal);
  transform: rotateY(180deg);
}
.colorblock h2,
.colorblock p {
  color: white;
}

.bullseye {
  max-width: 4.5rem;
}
h4.mobile {
  margin-top: 3rem;
}
main li a,
sup a {
  color: white;
  text-decoration: underline;
}
.graph sup a {
  display: block;
  text-align: center;
  color: var(--blue);
  margin-top: 1rem;
}
.databox {
  border-bottom: 3px solid white;
}
.attrbox li {
  text-align: left;
}