body {
     margin: 0;
     padding: 6vw;
     font-family: sans-serif;
     background: #f9f7f4;
     color: #333;
     line-height: 1.7;
     font-family: Baskerville, serif;
     max-width: 600px;
 }

 a,
 a:visited {
     color: cornflowerblue;
 }


 .post {
     background: white;
     padding: 2em;
     border-radius: 2px;
     box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.08);
     text-align: center;

     min-height: 3em;
     display: block;
     /* animation-name: appear;
 animation-duration: 1s;
*/
 }
 .post em {display: block; text-align: right;}


.flex {display:flex; align-content: space-between; align-items: start;}
.flex > * {flex:1; text-align: center;}
.flex > *:last-child{text-align: right;}
.flex > *:first-child{text-align: left;}

 #faq_container > div {
     flex: 1;
     padding: 1em 0.5em;
 }

 #noscript, noscript {
    padding: 4vw; display: block; background: #333; color:white; font-size: large; text-align: center;
 }

 #faq_container>div:first-child {
     flex: 2;
 }

#list_container {
    padding: 2vw;
    text-align: center;
}
#list_container a{
    line-height: 1.5em; 
    display: list-item;
    list-style: none;
   /*
    padding-left: 0;
    margin-left: 1em; */
}

 h1,
 h2,
 h3,
 h4 {
     margin: 0 auto 0.125em;
     padding: 0;
     display: block;
 }


 header, header.flex {
     padding: 1vw 2vw 0.5em;
    
     align-items: end;
     line-height: xx-large;
 }

 header #logo {
     font-size: xx-large;
     text-decoration: none;
     line-height: normal;
}


 footer {
     padding: 1.5em 0 0;
     margin-top: 3em;
     border-top: 1px dotted #ccc;
 }

 form {
     clear: both;
 }

 form textarea {
     display: block;
     width: 98%;
     margin: 0 auto;
     height: 10em;
     text-align: left!important;
 }
 form input {text-align: left!important;}

 form label {
     display: block;
     line-height: normal;
 }

 nav {
     padding: 1.0em 2vw 1vw;
 }

 button,
 .button,
 .button:visited {
     background: #555;
     color: white;
     box-shadow: 0 2px 4px #aaa;
     border-radius: 2px;
     padding: 0.3em 0.75em 0.2em 0.75em;
     text-decoration: none;
     border: 1px solid black;
     border-top: 1px solid #666;
     font-family: sans-serif;
     font-size: 0.9em;
     cursor: pointer;
     margin: 0 0.25em;
     line-height: 1.5em;
     font-weight: normal;
     text-shadow: 0 1px 1px black;
    text-align:center !important;
 }

 button[disabled=disabled], button:disabled,
 .button[disabled=disabled], .button:disabled,
 .button.blue[disabled=disabled], .button.blue:disabled
 {
     background: #cdcdcd;
     color: white;
     box-shadow: none;
     text-shadow: none;
     border: 0 none;
    cursor:not-allowed;
    pointer-events: none;
 }


 .button.blue {
    background: cornflowerblue;
   text-shadow:0 1px 2px #333;
    border-color: royalblue;
     border-top-color: cadetblue;
 }
 

 /*
 .button:hover {
     color: #333;
     background: #eee;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
     border: 1px solid white;
     border-bottom: 1px solid #eee;
 }*/

 .hint {
     opacity: 1;
     transition: opacity 1s;
 }

 .hidden {
     display: none;
     opacity: 0;
 }

 .highlight{
 animation-name: animation1;
 animation-duration: 2s;
}
.lowlight{
    animation-name: animation2;
 animation-duration: 1s;
}


@keyframes animation1 {
      from {background-color:white;}
      to {background-color:transparent;}
}

@keyframes animation2{
      from {background-color:black; border-radius: 2px;}
      to {background-color:transparent;}
}

@keyframes appear{
      from {background-color:#f9f7f4; }
      to {background-color:#ffffff;}
}

 @media screen and (width <=800px) {
/*
      .flex {
         display: block;
     }

    

     .flex *{
         flex: none;

     }
         */
 }