body
{
font-size:13pt;
font-family: "Metropolis";
margin:20px 0px 100px 0px;
line-height:31px;
font-weight:100;
}

#container
{
max-width:800px;
margin:auto;
}

thinbanner {
    font-size: 11pt;
    display: block;
    flex-direction: row;
    text-align: center;
    border-bottom: 1px solid #efefef;
    margin-top: -10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

thinbanner a {
    color: rgba(252,79,5,1);
    font-weight: bold;
}

donate {
    display: block;
    text-align: center;
    font-size: 11pt;
    margin-bottom: 25px;
}

donate span {
    background: #f9f9f9;
    padding: 5px 13px;
}

donate span a {
    color: #00f;
}

h1, h2, h3
{
font-family: "Merriweather";
margin:0px 0px 10px 0px;
font-weight: normal;
font-weight: 100;
}

#mast
{
text-align:center;
border-bottom:1px solid #efefef;
margin:50px 0px 20px 0px;
padding:0px 0px 20px 0px;
}

#mast h1
{
font-size:54px;
text-shadow:0px 1px #efefef;
}

#mast h1 a
{
color:#000;
text-decoration:none;
}

#mast span#site_name
{
font-size:54px;
text-shadow:0px 1px #efefef;
display:block;
text-align:center;
font-family: "Merriweather";
margin:0px 0px 10px 0px;
}

#mast span#site_name a
{
color:#000;
text-decoration:none;
}

detector {
    display: block;
    text-align: center;
    background: rgba(0,0,0,0.025);
    border-radius: 3px;
    margin-bottom: 20px;
    border: 1px solid #efefef;
}

shop {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

shop a {
    display: flex;
    background: #3385ff;
    color: #fff;
    font-weight: bold;
    padding: 3px 9px;
    border-radius: 5px;
    text-decoration: none;
}

shop a:hover {
    background: #005ce6;
}

#definition
{
background:#f9f9f9;
padding:20px;
margin:0px 0px 20px;
border:1px solid #efefef;
line-height:21px;
}

#definition p
{
line-height:31px;
margin:0px;
}

h2
{
font-size:34px;
margin:40px 0px 0px 0px;
}

#definition h2
{
font-size:24px;
margin:0px 0px 10px 0px;
text-decoration:none;
}

#list strong
{
/* background:#f4f4f4;
border-radius:5px;
*/
margin:0px 0px 10px 0px;
display:inline-block;
width:45%;
width:calc(50% - 5px);
font-weight:100;
font-size:90%;
background:#f9f9f9;
}

#list strong:nth-child(odd) {
margin-right:10px;
}

#list strong a {
  display:flex;
  color:#333;
  text-decoration:none;
  /* font-size:9pt; */
  padding:5px 10px 5px 10px;
  border-left:1px solid #999;
  line-height: 35px;
}

#list strong a:hover {
  color:#000;
  background:#f5f5f5;
  border-left:1px solid red;
}

#list strong img {
    width: 35px;
    height: 35px;
    margin-right: 10px;
}

#list ul
{
list-style:none;
}

#list p
{
padding:0px;
margin:0px 0px 10px 0px;
}

#list span.example
{
display:block;
margin:0px 0px 10px 0px;
padding:10px;
font-size:13px;
line-height:17px;
background:#f9f9f9;
}

#list span.example b
{
font-weight:normal;
text-decoration:underline;
}

example ul {
    margin: 15px 0px 0px 0px;
}

example ul li {
    margin-bottom: 15px;
}

example ul li span {
    display:block;
}

example ul li exp {
    display: flex;
    background: #fef9e7;
    padding: 9px 15px;
    font-size: 85%;
    margin-bottom: 15px;
    margin-top:5px;
    font-style: italic;
    line-height: 155%;
    border-radius:3px;
    border: 1px solid #fcedbd;
    font-family:"Metropolis Italic"
}

#long_fallacy_def h2 span {
    display: flex;
    font-size: 18pt;
    font-family: 'Metropolis';
    border-top: 1px solid #efefef;
    width: fit-content;
    margin-top: 10px;
}

#footer
{
text-align:center;
display:block;
margin:20px 0px 0px 0px;
font-size:90%;
color:#666;
}

#footer a
{
color:#666;
}

.form h2
{
margin:40px 0px 20px 0px;
}

.form b
{
font-weight:normal;
font-family: "Metropolis Light";
display:block;
line-height:17px;
margin-bottom:3px;
}

.form input, textarea
{
  display: block;
  margin: 0px 0px 15px 0px;
  font-size: 17px;
  font-family: "Metropolis Light";
  padding: 3px 7px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
}

.form textarea {
  width:80% !important;
}

.form .button
{
margin: -35px 0px 0px 0px;
background: #333;
padding: 5px 25px 5px 25px;
border: 0px;
border-radius: 50px;
color: #fff;
font-family: "Metropolis";
font-size: 90%;
cursor: pointer;
width: auto !important;
}

.form .note
{
color:#CC3300;
font-size:90%;
margin:0px 0px 20px 0px;
}

.form .missinginfo
{
color:#CC3300;
}

div#asterisk
{
background:#f9f9f9;
font-size:90%;
border-radius:3px;
padding:3px 8px 3px 8px;
border:1px dashed #999;
}

sup
{
color:#000;
}

example {
display: block;
padding: 20px;
border: 1px solid #efefef;
margin:30px 0px 30px 0px;
box-shadow: 0px 0px 5px #f5f5f5;
}

example h3 {
font-weight:bold;
margin:0px;
font-family:"Metropolis";
}

example p {
margin:0px;
}

note {
display:block;
border:1px solid #efefef;
padding:20px;
box-shadow: 0px 0px 5px #f5f5f5;
}

note strong {
font-family: "Metropolis"
}

bread {
font-size: 80%;
font-family:"Metropolis Light Italic";
color: #444;
border-bottom: 1px solid #efefef;
padding: 5px;
display:inline-block;
margin-bottom:25px;
}

bread a {
color:#444;
}

headingtop {
    display: flex;
    flex-direction: row;
}

fallacyheading {
    display: flex;
}

fallacyheading img {
    width: 75px;
    height:75px;
    margin-right: 15px;
}

fallacyheading h1 {
    line-height: 75px;
    margin:0px;
}

ftype {
    text-transform: capitalize;
    vertical-align: super;
    line-height: initial;
    height: fit-content;
    background: #efefef;
    border-radius: 5px;
    padding: 3px 7px;
    margin-left:5px;
}

.leaderboard {
    display: block;
    margin: 30px 0px 30px 0px;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding:5px 0px 5px 0px;
    }

common {
    background: #FDF8E1;
    padding: 5px 9px 7px 9px;
    border-radius: 5px;
    font-size: 90%;
    display: inline-block;
	margin-top: 15px;
}

a {
	color:#000;
}

b {
	font-family: "Metropolis";
  font-weight: bold;
}

/* search box */

searchBox {
	text-align:center;
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 7px;
  font-size: 16px;
  border-radius:5px;
}

input[type=text] {
  background-color: #fff;
border: 1px solid #dfdfdf;
font-family: "Metropolis Light";
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

input[type=submit]:hover {
  background:red;
}

.autocomplete-items {
  position: absolute;
  margin-top:1px;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  /* border-top: none; */
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  border-radius:5px;
  overflow:hidden;
}

.autocomplete-items div {
  padding: 3px 5px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  font-size:90%;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/* books */

/* OLD

books {
    display: flex;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding: 25px 0px 35px 0px;
    margin-top: 35px;
    flex-wrap: wrap;
    justify-content: space-between;
}
*/

books {
    display: flex;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding: 25px 0px 35px 0px;
    margin-top: 35px;
    flex-wrap: wrap;
    flex-direction: row;
    row-gap: 10px;
    column-gap: 30px;
}

books p {
    flex: 0 0 100%;
    margin: 0px;
    margin-bottom: 25px;
}

books h3 {
    margin:0px;
}

/* OLD

books book {
  width: 27%;
  border: 1px solid #efefef;
  padding: 15px;
  border-radius: 5px;
}
*/

books book {
    width: calc(20% - 24px);
    border-radius: 5px;
    flex-direction: column;
    display: flex;
}

book cover img {
  /* OLD width: 100%; */
  width:auto;
  display: inline-flex;
  /* OLD height: 200px; */
  height: 170px;
}

book cover img {
    /* OLD width: 150px; */
    width:100%;
    border-radius: 5px;
}

/* OLD
booktitle {
    font-weight: bold;
    font-size: 95%;
}
*/

booktitle {
    font-weight: bold;
    font-size: 95%;
    line-height: 110%;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}

amzbutton {
    display: block;
    font-size: 85%;
    background: #FF9E00;
    text-align: center;
    border-radius: 5px;
}

amzbutton a {
    color:#000;
    text-decoration: none;
    font-weight: 400;
}

amzbutton a:hover {
    color:#fff;
}

aff {
    display: block;
    margin-top: 35px;
    font-size: 85%;
    line-height: 115%;
    font-style: italic;
    color: #555;
}

/* supported by */
support span img {
    height: 20px;
    display: flex;
    margin-left: 3px;
}

support {
    /* font-size: 11pt; */
    display: flex;
    justify-content: center;
}

support span {
    display: flex;
    align-items: center;
}

/* banner */
banner {
    max-width: 729px;
    height: 90px;
    display: flex;
    border: 1px solid #efefef;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
}

banner a {
    display: flex;
    max-width: 729px;
    height: 90px;
}

@media screen and (max-width:600px) {

banner {
  display:none;
}

#container {
display:block;
margin:15px;
border-width:0px;
}

#mast h1,#mast span#site_name {
  line-height: 40px;
  font-size: 35px;
}

fallacyheading {
    display: flex;
    flex-direction: column;
}
headingtop {
    display: flex;
    flex-direction: row;
}
headingtop h1 {
    line-height: 100%;
}
ftype {
    width: fit-content;
    margin-left: auto;
}

#list strong {
display:block;
width:100%;
}

books book {
  width: 100%;
  margin-bottom: 15px;
  /* NEW */
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
}

book cover {
  height: auto;
}

cover img {
  width: 100%;
}

book cover img {
  height: auto;
}

}