html {
background-color: #bbbbbb;
padding: 0px;
}
body {
width: 80%;
min-height: calc(100vh - 4em);
margin: 0 auto;
padding: 2em;
background-color: #dddddd;
border-color: #eeeeee;
border-left-style: solid;
border-right-style: solid;
border-width: 20px;
}
p {
color: #444444;
font-family: 'Roboto', sans-serif;
font-size: 16pt;
line-height: 1;
margin: 4pt;
}
p.value-description {
text-indent: -16pt;
margin-left: 20pt;
}
p.question {
margin: 16pt auto;
color: #333333;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
width: 70%;
min-width: 500pt;
min-height: 144pt;
background-color: #eeeeee;
padding: 16pt;
border-radius: 16pt;
font-size: 36pt;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
h1 {
color: #222222;
font-family: 'Montserrat', sans-serif;
font-size: 72pt;
text-align: center;
line-height: 72pt;
margin-top: 0pt;
margin-bottom: 0pt;
}
h2 {
color: #333333;
font-family: 'Montserrat', sans-serif;
font-size: 36pt;
line-height: 36pt;
margin-top: 12pt;
margin-bottom: 0pt;
}
li {
font-size: 16pt;
text-indent: 16pt;
}
a {
font-family: inherit;
}
img.center {
display: block;
margin: 1em auto;
width: 50%;
min-width: 500pt;
}
.button {
background-color: #2196f3;
font-family: 'Montserrat', sans-serif;
border: none;
border-radius: 8pt;
color: white;
padding: 8pt;
width: 50%;
min-width: 500pt;
text-align: center;
text-decoration: none;
display: block;
font-size: 24pt;
margin: -2px auto;
cursor: pointer;
}
.small_button, .small_button_off {
background-color: #333;
font-family: 'Montserrat', sans-serif;
border: none;
border-radius: 8pt;
color: white;
padding: 8pt;
width: 10%;
min-width: 100pt;
text-align: center;
text-decoration: none;
display: block;
font-size: 18pt;
margin: -2px auto;
cursor: pointer;
}
.small_button_off {
background-color: #ddd;
color: #888;
border: 2px solid #888;
cursor: not-allowed;
margin: -4px auto;
}
div.axis {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
div.bar {
height: 36pt;
line-height: 36pt;
padding: 8pt;
margin-top: 4pt;
margin-bottom: 4pt;
border-width: 4px;
border-right-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-color: #222222;
background-color: #eeeeee;
display: block;
width: 50%;
}
div.text-wrapper {
font-family: 'Montserrat', sans-serif;
font-size: 36pt;
line-height: 36pt;
color: #222222;
display: inline-block;
}
div.axes {
background-color: #264677;
text-align: left;
border-right-style: solid;
}
div.horseshoe {
background-color: #777626;
text-align: right;
border-left-style: solid;
}
div.moderate {
background-color: #424242;
text-align: left;
border-right-style: solid;
}
div.radical {
background-color: #9e116f;
text-align: right;
border-left-style: solid;
}
div.political {
background-color: #47871c;
text-align: left;
border-right-style: solid;
}
div.apolitical {
background-color: #951631;
text-align: right;
border-left-style: solid;
}
div.dead {
background-color: #316151;
text-align: left;
border-right-style: solid;
}
div.leaning {
background-color: #147b98;
text-align: right;
border-left-style: solid;
}
div.leftist {
background-color: #89192b;
text-align: left;
border-right-style: solid;
}
div.rightist {
background-color: #6e7427;
text-align: right;
border-left-style: solid;
}
div.statist {
background-color: #264677;
text-align: left;
border-right-style: solid;
}
div.liberal {
background-color: #267752;
text-align: right;
border-left-style: solid;
}
div.anfash {
background-color: #265277;
text-align: left;
border-right-style: solid;
}
div.capcom {
background-color: #852132;
text-align: right;
border-left-style: solid;
}
div.vegan {
background-color: #169344;
text-align: left;
border-right-style: solid;
}
div.meat {
background-color: #7b232f;
text-align: right;
border-left-style: solid;
}
div.healthy {
background-color: #169567;
text-align: left;
border-right-style: solid;
}
div.junk {
background-color: #424242;
text-align: right;
border-left-style: solid;
}
div.smart {
background-color: #a3708d;
text-align: left;
border-right-style: solid;
}
div.strong {
background-color: #333161;
text-align: right;
border-left-style: solid;
}
div.fast {
background-color: #5e5932;
text-align: left;
border-right-style: solid;
}
div.patient {
background-color: #017dbb;
text-align: right;
border-left-style: solid;
}
span.weight-300 {
font-weight: 300;
}
#banner {
border-color: #444444;
border-style: solid;
border-width: 2px;
border-radius: 8pt;
display: block;
margin: 8pt;
margin-left: auto;
margin-right: auto;
}