tweaking some details

results/index.html

@@ -312,56 +312,70 @@
 				<div id="anarBonus" class="description">
 					<div class="descImg"><img src="/images/anarchism.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Anarchist:</strong>  When the people are being hit with a stick, they are not happier if the stick is called “the stick of the people”. The State is an oppression that must be abolished.</p>
-
+						<p>
+							<h4>Anarchist</h4>
+							When the people are being hit with a stick, they are not happier if the stick is called “the stick of the people”. The State is an oppression that must be abolished.
+						</p>
 					</div>
 				</div>
 
 				<div id="pragBonus" class="description">
 					<div class="descImg"><img src="/images/pragmatism.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Pragmatist:</strong> politics objectively boil down to looking at where the problems are and trying to solve them according to the means available.</p>
-
+						<p>
+							<h4>Pragmatist</h4>
+							Politics objectively boils down to looking at where the problems are and trying to solve them according to the means available.
+						</p>
 					</div>
 				</div>
 
 				<div id="femiBonus" class="description">
 					<div class="descImg"><img src="/images/feminism.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Radical Feminist:</strong> gender should disappear to put an end to the patriarchy.</p>
-
+						<p>
+							<h4>Radical Feminist</h4>
+							Gender should disappear to put an end to the patriarchy.
+						</p>
 					</div>
 				</div>
 
 				<div id="compBonus" class="description">
 					<div class="descImg"><img src="/images/complotism.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Conspiratorial:</strong> the biggest problems of our society are the work of a small group of people. It is then essential to find them, inform the people of their objective and neutralize them.</p>
-
+						<p>
+							<h4>Conspiratorial</h4>
+							The biggest problems of our society are the work of a small group of people. It is then essential to find them, inform the people of their objective and neutralize them.
+						</p>
 					</div>
 				</div>
 
 				<div id="vegaBonus" class="description">
 					<div class="descImg"><img src="/images/veganism.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Vegan:</strong> Human beings must stop at all costs the consumption and exploitation of “sensible” being.</p>
-
+						<p>
+							<h4>Vegan</h4>
+							Human beings must stop at all costs the consumption and exploitation of “sensible” being.
+						</p>
 					</div>
 				</div>
 
 				<div id="monaBonus" class="description">
 					<div class="descImg"><img src="/images/monarchism.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Monarchist:</strong> society should be organized around a king.</p>
-
+						<p>
+							<h4>Monarchist</h4>
+							Society should be organized around a king.
+						</p>
 					</div>
 				</div>
 
 				<div id="reliBonus" class="description">
 					<div class="descImg"><img src="/images/religion.png" alt=""></div>
 					<div class="descTextMono">
-						<p><strong>Missionary:</strong> for you religion is important, especially yours. It is therefore appropriate to spread it as globally as possible.</p>
-
+						<p>
+							<h4>Missionary</h4>
+							For you religion is important, especially yours. It is therefore appropriate to spread it as globally as possible.
+						</p>
 					</div>
 				</div>
 			</div>

style.css

@@ -95,6 +95,10 @@ h3 {
   }
 }
 
+#bonusBox {
+  max-width: 640px;
+  margin: 0 auto;
+}
 .questionBox {
   max-width: 640px;
   min-height: 5.5em;
@@ -103,6 +107,7 @@ h3 {
 .description {
   margin: 1.5em auto;
   display: flex;
+  flex-direction: row-reverse;
   justify-content: center;
 }
 .descText,
@@ -119,6 +124,9 @@ h3 {
 .descTextMono {
   align-self: center;
 }
+.descTextMono h4 {
+  margin: 0 0 0.5em;
+}
 .descTextMono p {
   margin: 0;
 }
@@ -234,11 +242,11 @@ h3 {
 .buttonLink:hover {
   color: #500076;
 }
-.buttonLink svg {
+.button svg {
   fill: #fff;
   vertical-align: text-bottom;
 }
-.buttonLink:hover svg {
+.button:hover svg {
   fill: #500076;
 }
 .buttonLinkGood {
@@ -249,6 +257,10 @@ h3 {
   background-color: #0eb31a;
   color: white;
 }
+.buttonLinkGood svg,
+.buttonLinkGood:hover svg {
+  fill: white;
+}
 
 .flagDecoration {
   text-align: center;
@@ -267,7 +279,7 @@ h3 {
 }
 #slogan {
   margin: 1em 0;
-  font-size: calc(14px + 2vmin);
+  font-size: calc(14px + 2vw);
 }
 .urlToCopyContainer {
   width: 100%;