body {
  background-color: hsl(300, 76%, 72%, 0.1);
}
button {
  background-color: LightGray;
  width: fit-content;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: .5rem;
  font-weight: bold;
  }
button:hover {
  color: blue;
}
h1 {
  text-align: center;
  background: linear-gradient(90deg, Red 2%, Black 2%);
  color: white;
  padding-left: 5%;
  padding-top: 20px;
  padding-bottom: 20px;
}
h2 {
  text-align: left;
  background: linear-gradient(90deg, Red 2%, Black 2%);
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
}
h3 {
  width: 25%;
  text-align: left;
  background: linear-gradient(90deg, Red 2%, Black 2%);
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
}
h4 {
  width: 15%;
  text-align: left;
  background: linear-gradient(90deg, Red 2%, Black 2%);
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
}
table {
  width: 40%;
  padding: 2%;
  text-align: center;
  background-color: white;
  padding: 2.5%;
  border: 2px solid Black;
  border-radius: 2rem;
}
th, td {
  border-bottom: 1px solid black;
  border-collapse: collapse;
}
tr:hover {
  background-color: LightGray;
}
.blueBlock {
  display: inline-block;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color: #8fabff;
  text-align: center;
  margin-left: 5%;
  font-weight: bold;
}
.brownBlock {
  display: inline-block;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color: #cc6600;
  text-align: center;
  margin-left: 5%;
  font-weight: bold;
}
.card {
  position:relative;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  min-width:0;
  word-wrap:break-word;
  background-color: hsl(300, 76%, 72%, 0);
  background-clip:border-box;
  /*border:1px solid rgba(0,0,0,.125);
  border-radius:.25rem*/
}
.card-header {
  padding:10px 15px;
  margin-bottom:0;
  background-color: hsl(300, 76%, 72%, 0.3);
  border-bottom:1px solid rgba(0,0,0,.125);
  font-weight: bold;
  text-align: left;
  width: 25%;
}
.card-header-alt {
  /*padding:10px 15px;*/
  margin-bottom:0;
  /*background-color: hsl(300, 76%, 72%, 0.3);*/
  border: 2px solid hsl(300, 76%, 72%, 0.1);
  font-weight: bold;
  text-align: left;
  width: 100%;
}
.card-header-alt:hover {
  /*padding:10px 15px;*/
  margin-bottom:0;
  background-color: hsl(300, 76%, 72%, 0.3);
  border: 2px solid red;
  border-radius: 2rem;
  font-weight: bold;
  text-align: left;
  width: 100%;
}
.card-link:link {
  color: Black;
  text-decoration: none;
}
.card-link:visited {
  color: Black;
}
.card-link:hover {
  border-bottom: solid 5px Black;
}
.card-body {
  -ms-flex:1 1 auto;
  flex:1 1 auto;
  min-height:1px;
  text-align: left;
  padding-left: 2rem;
  padding-bottom: 20px;
  padding-top: 20px;
}
.collapse:not(.show) {
  display:none
}
.constructionBanner {
  border: solid 4px red;
  border-radius: 5rem;
  font-size: 2.5rem;
  font-weight: bolder;
  color: DarkBlue;
  text-align: center;
}
.descript { /*To be replaced in html with <em></em>*/
  font-style: italic;
}
.equation {
  text-align: left;
}
.exampleProgram {
  width: 98%;
  background-color: white;
  border: 1px solid black;
}
.flower1 {
  grid-area: f1;
  width: 100%;
}
.flower2 {
  grid-area: f2;
  width: 100%;
}
.flower3 {
  grid-area: f3;
  width: 100%;
}
.flower4 {
  grid-area: f4;
  width: 100%;
}
.flower5 {
  grid-area: f5;
  width: 100%;
}
.flower6 {
  grid-area: f6;
  width: 100%;
}
.flowerGrid {
  display: grid;
  grid-template-areas:
  'f1 f2 f3 f4 f5 f6';
  grid-gap: 10px;
  padding: 10px;
}
.geoFlowerGrid {
  display: grid;
  grid-template-areas:
  'sqF pentF hexF septF octF';
  grid-gap: 10px;
  padding: 10px;
}
.greyBlock {
  display: inline-block;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color: Gainsboro;
  text-align: center;
  margin-left: 5%;
  font-weight: bold;
}
.heading {
  text-align: center;
}
.hexFlower {
  grid-area: hexF;
  width: 50%;
}
.imgRef {
  font-style: italic;
  color: gray;
  font-size: smaller;
}
.instep1 {
  margin-left: 5%;
}
.instep2 {
  margin-left: 10%;
}
.lang {
  width: 98%;
  font-weight: bold;
  text-align: right;
}
.langTab:link {
  color: black;
  text-decoration: none;
}
.langTab:visited {
  color: black;
}
.mapFrame {
  border: 2px solid Black;
  border-radius: 2rem;
}
.octFlower {
  grid-area: octF;
  width: 50%;
}
.pentExt1 {
  grid-area: pE1;
  width: 50%;
}
.pentExt2 {
  grid-area: pE2;
  width: 50%;
}
.pentExt3 {
  grid-area: pE3;
  width: 50%;
}
.pentExtGrid {
  display: grid;
  grid-template-areas:
  'pE1 pE2 pE3';
  grid-gap: 10px;
  padding: 10px;
}
.pentFlower {
  grid-area: pentF;
  width: 50%;
}
.pieCharts {
  border: 2px solid Black;
  border-radius: 2rem;
  padding: 2.5%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  background-color: Black;
}
.question {
  font-weight: bold;
  font-size: larger;
  font-style: italic;
}
.redBlock {
  display: inline-block;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color: #ff3333;
  text-align: center;
  font-weight: bold;
}
.regionName {
  text-align: center;
}
.regionSpend {
  text-align: center;
}
.rotFlower1 {
  grid-area: rF1;
  width: 100%;
}
.rotFlower2 {
  grid-area: rF2;
  width: 100%;
}
.rotFlower3 {
  grid-area: rF3;
  width: 100%;
}
.rotFlowerGrid {
  width: 50%;
  display: grid;
  grid-template-areas:
  'rF1 rF2 rF3';
  grid-gap: 10px;
  padding: 10px;
}
.septFlower {
  grid-area: septF;
  width: 50%;
}
.sqExt1 {
  grid-area: sE1;
  width: 50%;
}
.sqExt2 {
  grid-area: sE2;
  width: 50%;
}
.sqExt3 {
  grid-area: sE3;
  width: 50%;
}
.sqExtGrid {
  display: grid;
  grid-template-areas:
  'sE1 sE2 sE3';
  grid-gap: 10px;
  padding: 10px;
}
.sqFlower {
  grid-area: sqF;
  width: 50%;
}
.sqFlower1 {
  grid-area: sF1;
  width: 50%;
}
.sqFlower2 {
  grid-area: sF2;
  width: 50%;
}
.sqFlower3 {
  grid-area: sF3;
  width: 50%;
}
.sqFlower4 {
  grid-area: sF4;
  width: 50%;
}
.sqFlowerGrid {
  display: grid;
  grid-template-areas:
  'sF1 sF2 sF3 sF4';
  grid-gap: 10px;
  padding: 10px;
}
.statement {
  width: 50%;
  margin-left: 25%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  border: 5px solid black;
  background-color: white;
}
.tab1 {
  margin-left: 3%;
}
.tab2 {
  margin-left: 6%;
}
.thinkingPrompt {
  font-size: larger;
  font-style: italic;
}
.warning {
  font-weight: bold;
  text-decoration: underline;
}
.yellowBlock {
  display: inline-block;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #ffad00;
  text-align: center;
  margin-left: 5%;
  font-weight: bold;
}
#snowOn {
  display: none;
}
#snowOff {
  display: block;
}