* {box-sizing: border-box;}

html {scroll-behavior:smooth;}

.header {
  background-color: #634566;
  color: #e4daf2;
  padding: 0;
  width:100%;
  position: fixed;
  top:0;
  z-index:1;
}

.menu {
  width:100%;
  height:50px;
  margin:0;
  padding: 12px;
  position:relative;
  background-color: #756a84;
  z-index:3;
}

.menu a {
  text-decoration: none;
  width: auto;
  padding: 8px;
  margin-bottom: 7px;
  background-color: #756a84;
  color: #e4daf2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu a:hover {
  background-color: #534960;
  color: #e4daf2;
}

body {
  width:100%;
  background-color:#322333;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  margin:0;
  color: #e4daf2;
  text-align:center;
}

.content {
  margin-top:70px;
}

div.bookmark {display:block;position:relative;top:-70px;xvisibility:hidden;}

.footer {
  border-top: 2px solid black;
  color: #e4daf2;
  height: 200px;
  width: 100%;
}

h1 {
  font-family: "Times New Roman", Georgia, Serif; 
  margin-block-start: 0; 
  margin-block-end: 0;
  font-size:2.5em;
}
h2 {
  font-family: "Times New Roman", Georgia, Serif; 
  font-size:1.62em;
}
h3 {font-family: "Times New Roman", Georgia, Serif; xmargin:15px 0 5px 55px; font-size:1.2em; font-style:italic;}
h4 {font-family: "Times New Roman", Georgia, Serif; xmargin:0 0 5px 0; font-size:1.1em; font-weight: bold; text-decoration:underline;}
h5 {font-family: "Times New Roman", Georgia, Serif; xmargin:0 0 0 0; font-size:1em; font-weight: bold; font-style:italic;}

p {xmargin:10px 35px;}
p.footnote {xfont-size:.8em;}
a:link {color:#e4daf2;}
a:visited {color:#e4daf2;}
a:hover {color:#c6abed;}
a:selected {color:#e4daf2;}
img {xborder: none;}
blockquote {xfont-size:.9em;}

.infoBox {
  display: flex;
  align-items: center;
  xjustify-content: space-between;
  justify-content: center;
  xpadding: 20px;
  background-color: #1e151e;
  margin: auto;
  width: 100%;
  border-radius: 20px;
  border: 2px solid #d4c2d6;
}

.infoBox p {
  font-size: 120%;
  text-align: center;
  padding: 4px;
}

.infoBox .heavy {
  font-size:160%;
  font-weight: 700;
}

.selector {
  xdisplay: flex;
  align-items: left;
  xjustify-content: space-between;
  xjustify-content: left;
  xpadding: 20px;
  background-color: #1e151e;
  xmargin: auto;
  width: 100%;
  border-radius: 20px;
  border: 2px solid #d4c2d6;
}

.selector p {
  font-size: 105%;
  font-weight: 600;
  background-color: #6F4F6F;
  text-align: center;
  border: 1px solid #d4c2d6;
}

.selector h4 {
  text-align: center;
  margin: 4px 0px;
}

.selector-list {
  text-align:left;
  padding-left:4px;
}

.selector-button {
  display:inline-block;
  padding:0.35em 1.2em;
  border:0.1em solid #fff;
  margin:0 0.3em 0.3em 0;
  border-radius:0.3em;
  box-sizing: border-box;
  text-decoration:none;
  xfont-family:'Roboto',sans-serif;
  font-weight:700;
  color:#000;
  color: #ddd;
  background-color:#444;
  text-align:center;
  transition: all 0.2s;
}

.selector-button:hover {
  color:#000;
  background-color:#aaa;
}

@media all and (max-width:30em) {
  .selector-button {
    display:block;
    margin:0.4em auto;
  }
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {width: 100%;}
  div.header {position: absolute; width:100%;}
  div.menu {height:240px;}
  div.menu a {display:block;}
  div.bookmark {top:-240px;}
  div.content {margin-top: 240px;}
  h1 {font-size:1.7em;}
  /* need to figure out how to increase height of these two when at minimum width */
  #lettersToFrom_cumulative {height:130px}
  #lettersToFrom_perQuarter {height:130px}
}



[class*="col-"] {float: left; padding: 15px; xborder: 1px solid brown;}

.row::after {content: ""; clear: both; display: table;}