body {
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    width:100%;
    background: #e6e6e6;
    background: linear-gradient(180deg,
                                rgba(200,209,207,1) 0%,
                                rgba(200,209,207,1) 4%,
                                rgba(240,239,237,1) 6%,
                                rgba(240,239,237,1) 9%,
                                rgba(205,158,102,1) 10.4%,
                                rgba(240,239,227,1) 17%,
                                rgba(240,239,227,1) 53%,
                                rgba(178,115,151,1) 55.1%,
                                rgba(238,239,227,1) 63%);
    font-family: "Merriweather", serif; }

.page {
    margin-left:auto;
    margin-right:auto;
    padding:1em;
    width:80%;
    background-color: #FFFFFF;
    font-family: "Merriweather", serif;
    font-size: 1.1rem;
    box-shadow: 3px -3px 6px 3px rgba(160, 160, 160, 0.3);
}


h1 {
  font-size: 42px;
  font-size: 2.5rem;
  line-height: 48px;
  line-height: 2.5rem;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-bottom: 72px;
  margin-bottom: 1rem;
  margin-top: 24px;
  margin-top: 1.5rem;
  text-shadow: 2px -2px 2px rgba(80, 80, 80, 0.8);

}

h2 {
  font-size: 24px;
  font-size: 1.875rem;
  line-height: 36px;
  line-height: 2.25rem;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  margin-bottom: 48px;
  margin-bottom: 1rem;
  margin-top: 1.5rem; }

hr.main {
    height:5px;
    margin-left:0px;
    border-width:2px;
    color:black;
    background-color:steelblue;
    background-color:#3E0086;
    width:70%;
}

hr.sub {
    height:3px;
    margin-left:0px;
    border-width:2px;
    color:black;
    background-color:midnightblue;
    background-color:#6800E8;
    background-color:#260052;
    width:40%;
}


img.logo {
  height:120px;
  width:auto;
  box-shadow: 2px 2px 6px rgba(100, 100, 100, 0.3);

}

div.logo {
    display:flex;
    flex-direction:row;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:0px;
    margin-bottom:0px;
    border-bottom:4px;
    margin-left:20%;
    margin-right:20%;
    border-bottom-style:none;
    border-color:darkblue;
    justify-content:space-around;
    align-items:center;
   #background-color:#6800E8;
}



h3 {
    margin-top:1em;
    margin-bottom:0px;
}

div.definitions
{
    display:flex;
    flex-direction: column;                    
    margin-bottom:1.5rem;
}

div.term
{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

div.tag
{
    font-weight: 700;
    width: 7em;
    margin-right:0.5em;
    flex-shrink:0;
}

div.tag::after
{
    font-weight: 700;
    content: ":";
}


div.last{
    flex-basis:30vw;
    flex-grow:1;
    min-width:0px;
}

.table {
  display: flex;
  flex-flow: column nowrap;
  font-size: 1rem;
  margin: 0.5rem;
  line-height: 1.5;
  border: 1px solid #d0d0d0;
  flex: 1 1 auto;
  justify-content:space-between;
  offwidth: -moz-fit-content;
  offwidth: fit-content;
}

.th {
  display: none;
  font-weight: 700;
}

.th > .td {
    white-space: normal;
    padding: 0.5em;
    background-color: #C0C0C0;
}

.tr {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  background-color: ivory ;

}

.rtr:nth-of-type(even) {
  background-color: #f2f2f2;
}

.rtr:nth-of-type(odd) {
  background-color: #ffffff;
}

.td {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  word-break: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #d0d0d0;
}



.td.text {
    text-align:left;
    padding: 0.5em;
    flex-basis:10vw;
    min-width:4em;
    overflow:hidden;
    white-space: normal;
    align-items:baseline;
    width:10vw;
}

.td.audio.label {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    align-items:baseline;
}

.td.audio {
    justify-content:center;
    align-items:center;
    flex-basis:min(10vw, 300px);
    max-width: 300px;
    min-width: 100px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0px;
}

.td.audio.player {
    padding-top: 5px;
    padding-bottom: 5px;
}


table.demo
{
    border: 1px solid black;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    background-color: ivory ;
    margin-left:1em;
    margin-right:auto;
    margin-top:1.5em;
    margin-bottom:1em;

    text-align:center;
    
}

table.demo td {
    border: 1px solid black;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
    width: 9em;
    padding:3px;
}

table.demo th {
    border: 1px solid black;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
    
    padding:3px;

    background-color: #C0C0C0;
}

audio.demo{
    width:100%;
    height:100%;
    min-width:80px;
//    width:200px;
//    max-width:10vw;
}

.yellow {
      background-color: #F8E71C;
      padding-top: 12px;
      /*padding-top: 3rem;*/
      padding-bottom: 12px;
      /*padding-bottom: 3rem;*/
      padding-left: 48px;
      padding-right: 48px;
      margin: 0px -48px 12px -48px;
      /*margin: 3rem 3rem 3rem 3rem; }*/

td.even {
    background-color: #E8E8E8;
}

td.odd {
    background-color: #FFFFFF;
}


table.info {
    /*border: 0px solid white;*/
    /*border-collapse: collapse;*/
}

table.info td {
    border-bottom: 1px solid #C0C0C0;
    /*border-collapse: collapse;*/
}

td.info_entry {
    text-align:center;
}
td.info_entry table {
    border: 0px solid black;
    border-collapse: collapse;
}
td.info_entry td {
    border: 0px solid black;
    border-collapse: collapse;
}
td.info_input {
    text-align:right;
}
td.info_text {
    text-align:left;
}

div.finished {
    text-align:center;
    width:80%;
}