body {
  font-size: 1.3em;
  background-color: #111; color: #ddd;
  padding: 20px 0px;
}

a:link,
a:visited { color: #9c9; text-decoration: none; }
a:hover   { color: #ee9; text-decoration: none; }

h1 { font-size: 1.7em; }
h2, h3 { font-size: 1.4em; }
h4, h5 { font-size: 1.3em; }
h6, h7 { font-size: 1.1em; }
h1, h2, h3, h4, h5, h6, h7 { text-align:center; }

/* q { quotes: "«" "»"; padding-left: 50px; }
q { quotes: '\201c' '\201d'; }
q:before { content: open-quote; }
q:after  { content: close-quote; } */

p.quote { quotes:"«" "»"; padding:0 2em; font-style:italic; }
p.quote:before { content:open-quote; }
p.quote:after  { content:close-quote; }

p.quote-open { quotes:"«" ""; padding:0 2em; font-style:italic; }
p.quote-open:before { content:open-quote; }
p.quote-open:after  { content:; }

p.indent { padding:0 2em; }
.italic { font-style:italic; }

.buttons { font-size:1.3em; text-align:center; }

.txt-center { text-align:center; }

/** Higher screens+ **/
@media (min-width: 1600px)
	{ body { padding: 20px 35%; } }

/** Desktop+ **/
@media (min-width: 1200px)
	{ body { padding: 20px 30%; } }

/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px)
	{ body { padding: 20px 25%; } }

/** Laptop+ **/
@media (min-width: 991px)
	{ body { padding: 20px 20%; } }

@media (min-width: 768px) and (max-width: 990px)
	{ body { padding: 20px 17%; } }

/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px)
	{ body { padding: 20px 8%; } }

/** Smartphone portrait mode **/
@media (max-width: 480px)
	{ body { padding: 20px 3%; } }