* { box-sizing:border-box;text-decoration:none; }
body { font-size:1.5em;font-family:sans-serif;color:#a79f8a;background-color:#0a1517;nax-width:1920px;text-align:center;font-weight:lighter;display:flex;flex-direction:column; }
html, body, nav, header, main, section, ul, p { width:100%;margin:0 auto;padding:0;border:0; }
header {background:url(assets/gibbon_header_small.jpg);background-position:center;background-size:140%;padding-bottom:56.25%;}
section{margin-bottom:8vw}
footer {padding-bottom:10vw}
nav ul {margin:0}
nav ul li { margin-bottom:8px;padding:20px;color:#d3cbb4;font-weight:normal}
h1 { display:none;}
section { width:90%;}
nav, h2, q {font-size:1.3em;font-weight:lighter;color:#df787c;width:100%}
h3 { font-size:1em;font-weight:normal;color:#df787c;width:100%}
cite { display:block;font-size:1.4em;font-style:normal;color:#566387;margin:10px 0px 50px 0px; }
a, a:visited { color:#df787c;text-decoration:none;font-weight:lighter} 
a:hover { color:#ffefaf;}
p { line-height:1.3;margin-top:2vw;}
small {font-size:0.5em;}
ul { list-style-type:none; }
li { margin-bottom:4vw; }
img { max-width:100%; }
hr{background:url(assets/hr.png) center no-repeat;min-height:20px;margin:4vw;border:0}
#trailer {display:block;position:relative;padding-bottom:56.25%;height:0; }
#trailer video { position:absolute;top:0;left:0;width:100%;height:100%;border:none; }
#storeLinks ul {display:none;}
#storeLinks h3 {font-size: 2em;font-weight:normal;text-transform:uppercase;color:#df787c}
#storeLinks #badges {display:flex;flex-wrap:wrap;justify-content:space-evenly;}
#storeLinks #badges a {width:100%;padding:5%;margin-bottom:3%;background-color:#232836;border-radius:8px;}
#storeLinks #badges a:hover {background-color:#461e27;}
#gibbons a{display:block;color:#d3cbb4;background-color:#232836;border-radius:8px;margin-top:8vw;padding:6%;font-size:1.5em;font-weight:normal;text-transform:uppercase;}
#gibbons a:hover{background-color:#461e27}
#images img { width:100%;margin-bottom:4vw }
#awards ul { display:flex;flex-wrap:wrap;justify-content:space-evenly; }
#awards li { display:inline-block;width:100%;overflow:hidden;margin-bottom:1vw;padding:10%;background:url('assets/laurels.png') no-repeat center;background-size:contain;font-size:0.9em;font-weight:normal; }
#awards sub { font-size:0.8em;line-height:0.1;color:#df787c;font-weight:lighter; }
footer, footer p {color:#59658d}
#credits a { display:block;width:200px;height:200px;padding-top:200px;margin:0 auto;margin-top:20px;margin-bottom:40px;background:no-repeat center center;opacity:0.4;font-size:0.7em;}
#credits a:hover {opacity: 1.0}
#credits a.brokenRules { background-image:url(assets/logo_brokenRules.svg) }
#ngos {display:flex;flex-wrap:wrap;justify-content:space-evenly;}
#ngos a { display:flex;flex-direction:column;flex-basis:100%;margin-bottom:4vw;padding:8vw;border-radius:4vw;background-color:#1c1d29;}
#ngos a:hover {background-color:#df787c}
#ngos a:hover p {color:#1c1d29}
#ngos a img { display:block;margin:0 auto;width:100%;}
#ngos a h4 {margin-bottom:0}
#ngos a p {color:#ffefaf}
#gibbon_head{width:30%;margin-top:8vw}
#gibbon_singing{width:75%;margin-top:8vw}
#ratings a { display:block;width:160px;height:160px;padding-top:200px;margin:0 auto;margin-top:10px;margin-bottom:40px;background:no-repeat center center;background-size:contain;opacity:0.4;font-size:0.7em;}
#ratings a.pegi { background-image:url(assets/ratings/logo_PEGI.svg) }
#ratings a.usk { background-image:url(assets/ratings/logo_USK.svg) }
#ratings a.esrb { background-image:url(assets/ratings/logo_ESRB.svg) }

@media (min-width: 600px) {
body{font-size:1.5em;}
header {background:url(assets/gibbon_header_md.jpg) top no-repeat;background-size:100%;background-position:50% 60%;padding-bottom:35%}
nav ul li {display:inline-block;margin:0;font-size:0.8em;}
section{margin-bottom:2vw}
footer {padding-bottom:4vw;}
#about a{margin-top:0;margin-bottom:4vw}
#storeLinks #badges a {width:45%;}
#images img { width:49%;margin-bottom:0.5vw }
#awards li { width:47%;padding:4% 0px 4% 0px; }
#ngos a img {max-width:60%;max-height:300px}
#ngos a {flex-basis:48%;margin-bottom:2vw;padding:4vw;border-radius:1vw;}
#credits a { width:300px;height:200px;padding-top:300px;}
#gibbon_head{width:14%;margin-top:4vw}
footer #links li {display:inline-block;}
footer #links li::after{content:" | "}
footer #links li:last-child::after{content:""}
#gibbons a{margin-top:2vw;margin-bottom:4vw;}
#gibbon_singing{width:50%;margin-top:8vw}
#ratings li { display:inline-block; }
#ratings a {height:100px;padding-top:100px;}
}
@media (min-width: 1024px) {
main{max-width:1024px;}
body {font-size:2em;}
header {background:url(assets/gibbon_header_hd.jpg) top no-repeat;background-size:100%;background-position:50% 60%;padding-bottom:35%}
section{margin-bottom:4vw;}
footer {padding-bottom:1vw;}
hr{margin:2vw}
#awards li {padding:3% 0px 3% 0px;}
#gibbon_head{margin-top:0;}
#gibbons a {padding:3%;}
#about a{max-width:75%;margin: 0 auto}
#ngos a img {max-height:500px}
#ngos a {margin-bottom:1vw;padding:1vw;border-radius:1vw;}
#gibbon_singing{width:40%;margin-top:4vw}
}
@media (min-width: 1900px) {
body{font-size:2em;}
main{max-width:1200px;}
nav, footer {padding-bottom:4vw;}
section { margin-bottom:4vw;}
#storeLinks #badges a {width:24%;padding:3%;margin:0;}
#ngos a img {max-height:400px}
#ngos a {margin-bottom:1vw;padding:2vw;border-radius:1vw;}
#gibbon_singing{width:30%}
}
@media (min-width: 2600px) {
body {font-size:4em;}
main{max-width:2600px;}
header {background:url(assets/gibbon_header_4k.jpg) top no-repeat;background-size:100%;background-position:50% 60%;padding-bottom:35%}
nav ul li {margin-bottom:4px;padding:40px;}
#about a{border-radius:24px;padding:40px;}
#credits a { width:800px;height:800px;padding-top:500px;}
}