@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1rem;
}
body {
    margin: 0;
    padding: 0;
    background: #CCC;
    color: #333; 
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
a { 
    text-decoration: none; 
    color: #FFF;
}

h1, h2, h3, h4, h5, h6, p, dl { margin-top: 1rem; }
h1, h2 { font-size: 1.8rem; }
h3, h4 { font-size: 1.4rem; }
h5, h6 { font-size: 1.2rem; }
p { font-size: 1rem; margin-bottom: 0.6rem; }
sup, sub { font-size: 0.9rem; }
dl :first-child { margin-top: 0; }
dl { margin-bottom: 1.2rem; }
dt { font-weight: bold; margin-top: 0.4rem; }
dd { margin-left: 1rem; margin-top: 0.4rem; }
li { margin-left: 2rem; margin-bottom: 0.4rem; }

#mode {
    display: none !important;
    z-index: 1;
}
label[for="mode"] { 
    display: inline-block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #333;
    color: #EEE;
    border-radius: 1rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    z-index: 1;
}
label[for="mode"] span:nth-of-type(1) { display: none; } 
label[for="mode"] span:nth-of-type(2) { display: none; }

#mode:checked + label[for="mode"] span:nth-of-type(1) { display: inline; } 
#mode:checked + label[for="mode"] span:nth-of-type(3) { display: none; }
#mode:checked + label[for="mode"] { background-color: #EEE; color: #333; }

#header, #menu, #content, #footer {
    min-width: 240px;
    max-width: 1330px;
    margin: 0 auto;
}

#container {
    margin: 0 auto;
    padding: 10px;
    min-width: 240px;
}

#container :last-child {
    padding-bottom: 0;
}
#header {
    content: '';
    background: url('../img/rg_fh5_mx7-drift.jpg') no-repeat center center #666;
    background-size: cover;
    min-height: 125px;
    max-width: 1330px;
    width: 100%;
}
#header .logo { 
    float: left;
    height: auto;
    width: 240px;
    display: inline; 
    padding: 3px 5px;
    z-index: 1;
}
.logo a { 
    color: #FFF; 
    text-shadow: 1px 1px 3px #000, -1px 1px 3px #000, -1px -1px 3px #000, 1px -1px 3px #000;
    -webkit-text-shadow: 1px 1px 3px #000, -1px 1px 3px #000, -1px -1px 3px #000, 1px -1px 3px #000; 
}
.logo a strong { color: #CF6; } 
.logo a em { color: #FFF; font-style: normal; }
.logo a:hover { border-bottom: solid 1px #CF6; }
.logo a:hover strong { color: #A6F; } 
.logo a:hover em { color: #CCC; font-style: normal;  }

.tiles {
    padding: 10px 0;
}
.tiles ul {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 7), 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 10px;
}

.tiles ul:before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}
.tiles li {
    list-style: none;
    display: block;
    margin: 0;
    background-color: #333;
    background: -webkit-radial-gradient(top left, #444, #333);
    background: -moz-radial-gradient(top left, #444, #333);
    background: radial-gradient(to bottom right, #444, #333);
}
.tiles li:nth-of-type(1) { grid-column: 1 / span 1; grid-row: 1 / span 1; } 
.tiles li:hover {
    transform: scale(0.98);
    background-color: #222;
    background: -webkit-radial-gradient(top left, #222, #333);
    background: -moz-radial-gradient(top left, #222, #333);
    background: radial-gradient(to bottom right, #222, #333);
}
.tiles a, .tiles div {
    border: none;
    color: #CF6;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 5%;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tiles a:hover {
    border: none;
    color: #A6F;
    text-shadow: 0 0 5px #000;
}
.tiles i { font-size: 40px; margin-bottom: 10px; }
.tiles a svg { height: 40px; fill: #CF6; margin-bottom: 10px; }
.tiles a:hover svg { fill: #A6F; filter: drop-shadow(0 0 3px #000); }

.tiles li.logo a svg { fill: #CF6; width: 100%; }
.tiles li.logo a:hover svg { fill: #A6F; }
.tiles li.logo a span { flex-direction: unset; }
.tiles li.logo a strong { color: #D8B8FF; font-weight: normal; font-size: 0.8rem; }
.tiles li.logo a:hover strong { color: #CF6; }
.tiles li.logo a span span { color: #CCC; font-size: 0.8rem; } 
.tiles li.logo a:hover span span { color: #FFF; } 


#content { 
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
#content section {
    background-color: #EEE;
    color: #333;
    padding: 1rem;
}

#content section { grid-column: span 12; }
#content section.s2 { grid-column: span 2; }
#content section.s3 { grid-column: span 3; }
#content section.s4 { grid-column: span 4; }
#content section.s6 { grid-column: span 6; }
#content section.s8 { grid-column: span 8; }
#content section.s9 { grid-column: span 9; }
#content section.s12 { grid-column: span 12; }

#content section :first-child { margin-top: 0; }
#content dt { color: #666;}
#content h1, #content h2, #content h3, 
#content h4, #content h5, #content h6 { font-weight: normal; color: #639; }
#content sup { color: #30520F; }


#mode:checked ~ #container { background-color: #222; }
#mode:checked ~ #container section { background-color: #333; color: #EEE; }
#mode:checked ~ #container #content dt { color: #CCC;}
#mode:checked ~ #container #content h1, 
#mode:checked ~ #container #content h2, 
#mode:checked ~ #container #content h3, 
#mode:checked ~ #container #content h4, 
#mode:checked ~ #container #content h5, 
#mode:checked ~ #container #content h6 { font-weight: normal; color: #B9F; }
#mode:checked ~ #container #content sup { color: #9C3; }


@media only screen and (max-width: 960px) {
    .tiles ul { grid-template-columns: repeat(auto-fill, minmax(calc(100% / 4), 1fr)); }
    .tiles ul:before { padding-bottom: 50%; }
    #content section.s2, 
    #content section.s3,
    #content section.s4,
    #content section.s6 { grid-column: span 6; } 
    #content section.s8,
    #content section.s9,
    #content section.s12 { grid-column: span 12; }    
}

@media only screen and (max-width: 700px) {
    .tiles ul { grid-template-columns: repeat(auto-fill, minmax(calc(100% / 4), 1fr)); }
    .tiles ul:before { padding-bottom: 100%; }
    #content section.s2, 
    #content section.s3,
    #content section.s4,
    #content section.s6,
    #content section.s8,
    #content section.s9,
    #content section.s12 { grid-column: span 12; }
}
@media only screen and (max-width: 460px) {
    .tiles ul { grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), 1fr)); }
    .tiles li:nth-of-type(1) { grid-row: 1 / span 1; }
}
@media only screen and (max-width: 290px) {
    html, body { min-width: 270px;}
    .tiles ul:before { padding-bottom: 50%; }
    .tiles ul { grid-template-columns: repeat(auto-fill, minmax(calc(100%), 1fr)); }
    .tiles li:nth-of-type(1) { grid-column: 1 / span 1; grid-row: 1 / span 1; }
}
@media only screen and ( min-width: 780px ) {
    #header { aspect-ratio: 16 / 3; }
}
@media only screen and (max-width: 1340px) {
    #header { background-image: url('../img/rg_20190106_1110s.jpg'); }
}
@media only screen and (max-width: 1200px) {
    #header { background-image: url('../img/rg_fh4-northmountains.jpg'); }
}
@media only screen and (max-width: 1060px) {
    #header { background-image: url('../img/rg_r3e-wtcr-brandshatch.jpg'); }
}
@media only screen and (max-width: 920px) {
    #header { background-image: url('../img/rg_fh4-merctruck-castle1.jpg'); }
}
@media only screen and (max-width: 780px) {
    #header { background-image: url('../img/rg_art8.jpg'); }
}
@media only screen and (max-width: 640px) {
    #header { background-image: url('../img/rg_art7.jpg'); }
}
@media only screen and (max-width: 500px) {
    #header { background-image: url('../img/rg_art6.jpg'); }
}