* {padding: 0; margin: 0;}
html {font-size: 15px; height: 100%;}
body {background: #006600; background-image: radial-gradient(circle, #3c8f09 0%, #004f00 80%); background-attachment: fixed; height: 100%; font-size: 1rem; line-height: 1.45em; color: rgba(255,255,255,0.9); font-family: Arial, Helvetica, sans-serif;  overflow-x: hidden; overflow-y: scroll;}
.innerbody {background: url(/img/bg2.png) center center; background-attachment: fixed; min-height: 100%; z-index: 1; position: relative;}
.innerbody > * {padding-top: 8rem; padding-bottom: 4rem;}
.home .innerbody > * {padding-bottom: 6rem;}
.container {max-width: 77rem; margin: 0 auto; padding-left: 3rem; padding-right: 3rem;}
img {max-width: 100%;}
a {color: rgba(255,255,255,0.9); text-decoration: none;}
p.hr {border-top: 1px dotted rgba(255,255,255,0.5); margin-top: 3rem!important; margin-bottom: 0.5rem!important; height: 1px; background: transparent;}
p.smaller {font-size: 1rem; margin-bottom: 0!important;}

.cards {overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(17.4rem, 17.4rem)); grid-gap: 1.4rem; justify-content: center;}
.home .card, #menu::before {width: 17.4rem; min-height: 25.4rem; padding-bottom: 0;}
.card.back, #menu::before {
    width: 17.4rem;
    min-height: 25.4rem;
    background: #9a0000; border: 0.7rem solid white!important; border-radius: 0.4rem; padding-bottom: 0;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
}
.card .img {display: block; margin: 0 0 0.9rem 0;}
.card h1, a.card h2 {margin: 0 1.4rem 0.7rem; font-size: 1.45rem; line-height: 1em;}
.card.large, a.card {width: 100%; max-width: 43rem; height: auto; padding-bottom: 2.4rem; background: #014603; 
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.25); 
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.25);
}
.card.large.back {max-width: 41.6rem; background: #9a0000;} 
a.card {display: block;background: #014603;}
a.card p {margin: 0 1.4rem; padding-right: 0rem; color: rgba(255,255,255,0.5);}
div.card h1 {margin: 0 2.4rem 1.6rem; padding-right: 2rem;}
div.card.back h1 {margin: 0; padding-right: 0;}
div.card p a {text-decoration: underline; color: rgba(255,255,255,0.5);}
div.card p a:hover {color: rgba(255,255,255,0.9);}
div.card p, div.card summary {margin: 0 2.4rem 1rem; color: rgba(255,255,255,0.5); padding-right: 2rem;}
div.card {border-top: 0.9rem solid #003400;}
div.card summary {color: rgba(255,255,255,0.5); cursor: pointer; margin-bottom: 0!important;}
div.card summary:hover {color: rgba(255,255,255,0.9);}
.gamepages div.card {border-top: 0;}
div.card + div.card {margin-top: 2rem; padding-bottom: 1.4rem; padding-top: 1.4rem; border-top: 0rem solid #003400; background: rgba(6, 93, 6, 1);}
div.card + div.card p {color: rgba(255,255,255,0.5);}

#breadcrumbs {margin: 0 2.4rem; font-size: 0.75rem; line-height: 2em;}
#breadcrumbs, #breadcrumbs a {color: rgba(255,255,255,0.3);}
.page #breadcrumbs {margin-top: 1.1rem;}



#menu {text-align: center; position: absolute;}
#menu::before {content: ""; position: absolute; left: 0; z-index: -1; margin-left: -0.7rem; margin-top: -0.7rem; -webkit-transform: rotate(-5.5deg); -ms-transform: rotate(-5.5deg); transform: rotate(-5.5deg);}
#menu .sitetitle {position: relative; margin-top: 46%; width: 100%;}
#menu .sitetitle img {width: 65%; display: block; margin: 0 auto 0;}
#menu .sitetitle h1, #menu .sitetitle a {font-weight: bold; font-size: 1.45rem; line-height: 1.5em; color: white!important;} 
#menu ul {text-align: left; position: absolute; bottom: 2rem; left: 2rem; font-size: 1rem; line-height: 1.75em; font-weight: bold;}
#menu li {list-style: none;}
#menu li a {display: block; text-decoration: none; color: rgba(255,255,255,0.9);}

#page {padding-left: 22rem;}
#page h1 {}

details summary {display: block;}
details summary::before {content: "▸ "; position: relative; bottom: 1px;}
details[open="open"] summary::before {content: "▾ "; position: relative; bottom: 0px;}
details[open="open"] summary {color: rgba(255,255,255,0.9);}
details summary ~ * {
    display: none;
}
details[open] summary ~ * {
    display: block;
}


#language {padding-top: 0; position: absolute; right: 25px; top: 15px; z-index: 4;}

.togglemenu {cursor: pointer; position: absolute; right: 2rem; top: 1.3rem; font-size: 1rem; line-height: 1.75em; font-weight: bold; text-decoration: none; color: rgba(255,255,255,0.9);}
.togglemenu:hover {color: rgba(255,255,255,0.9);}
.togglemenu span {display: block; height: 0.14rem; background: white; width: 1.6rem; margin: 0.32rem 0;}

.overlay {background: rgba(0,0,0,0.5) url('/img/play_icon.png') center center / 26% auto no-repeat;}
.overlay img {opacity: 0; display: block;}

.mobile {display: none;}
.desktop {display: initial;}

@media (min-width: 1000px) {
    #menu ul {display: block!important;}
}
@media (max-width: 1000px) {
    .container {padding-left: 2rem; padding-right: 2rem;}
    #menu {position: fixed; top: 0; z-index: 2; min-height: 0!important;}
    #menu ul {line-height: 1.3em;}
    #menu.card.back {height: 4.4rem; width: 100%; padding: 0; border: 0.3rem solid white!important; border-left: 0!important; border-right: 0!important; border-top: 0!important; margin-left: -2rem; border-radius: 0; background: #9a0000;}
    #menu.card.back::before {content: none;}
    #menu .sitetitle {text-align: center; padding-left: 2.4rem; padding-top: 0.6rem; padding-right: 2.4rem; width: auto; margin-top: 0;}
    #menu .sitetitle > div {margin: 0 auto 0; display: inline-block;}
    #menu .sitetitle img {width: 7rem;}
    #menu .sitetitle h1, #menu .sitetitle a {font-size: 0.95rem; line-height: 1.6em;}
    #page {padding-left: 0rem;}
    #page .card {margin-left: auto; margin-right: auto;}
    .mobile {display: initial;}
    .desktop {display: none;}
    #language {display: none;}
    #menu ul {
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        bottom: auto;
        height: 100%;
        background: rgba(0,0,0,0.95);
        z-index: 99;
    }
    #menu ul li a {color: rgba(255,255,255,0.9); padding: 0 2.4rem 0; font-size: 1.45rem; line-height: 3em; text-align: center;}
    #menu ul li:first-child a {padding-top: 3rem;}
    body {background-attachment: scroll;}
}
@media (max-width: 600px) {
    body {background: none;}
    .container {padding-left: 0.4rem; padding-right: 0.4rem;}
    .togglemenu {right: 1.4rem;}
    .cards {grid-template-columns: repeat(2,1fr); grid-gap: 2vw;}
    .home .card {width: 100%; min-height: 0; padding-bottom: 1.4rem;}
    .innerbody {background: rgba(6, 93, 6, 1);}
    .card {-webkit-box-shadow: none!important; box-shadow: none!important;}
    div.card h1, div.card p, div.card summary {padding-right: 1rem; margin: 0 1.4rem 1rem;}
    #breadcrumbs {margin-left: 1.4rem;}
    .home a.card, div.card + div.card {font-size: 1rem; line-height: 1.5em;}
    #menu ul li a {padding: 0 1.4rem 0;}
    div.card.large {padding-bottom: 3.4rem;}
    .page .container, .game .container {padding-left: 0.4rem; padding-right: 0.4rem;}
    .innerbody > * {padding-top: 5.1rem; padding-bottom: 0;}
    #menu.card.back {margin-left: -0.4rem;}
    .home #menu.card.back {margin-left: -0.4rem;}
    .page #breadcrumbs {margin-top: 2rem;}
    div.card + div.card {margin-top: 0.4rem; background: #0E690E; margin-bottom: 0.4rem;}
    div.card h1, div.card p {padding-right: 0rem;}
    div.card {border-top: 0.3rem solid #014603;}
}
@media (max-width: 500px) {
    a.card h2 {font-size: 1.1rem; line-height: 1em;}
    .home a.card {font-size: 0.75rem; line-height: 1.5em;}
    a.card h2, a.card p {margin-left: 1rem; margin-right: 1rem;}
}