/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display:block; }

body { line-height: 1; }

ol, ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table { border-collapse:collapse; border-spacing: 0; }

/* Fonts */
.roboto-light { font-family:"Roboto", sans-serif; font-weight:300; font-style:normal; }
.roboto-regular { font-family:"Roboto", sans-serif; font-weight:400; font-style:normal; }
.roboto-bold { font-family:"Roboto", sans-serif; font-weight:700; font-style:normal; }
.roboto-light-italic { font-family:"Roboto", sans-serif; font-weight:300; font-style:italic; }
.roboto-regular-italic { font-family:"Roboto", sans-serif; font-weight:400; font-style:italic; }
.roboto-bold-italic { font-family:"Roboto", sans-serif; font-weight:700; font-style:italic; }


/* Site Styles */

html {
    background-image: url("/images/background.jpg");
    background-size: cover;
    background-position: center top;
    background-attachment:fixed;
}

body {
    color: #eee;
    line-height:1.2rem;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.cf { clear:both; }

h1 { font-size:1.6rem; line-height:1.7rem; font-weight: 700; color:#fff; margin-bottom:2rem; }
h2 { font-size:1.5rem; line-height:1.6rem; font-weight: 700; color:#fff; margin-bottom:1rem; }
h3 { font-size:1.4rem; line-height:1.5rem; font-weight: 700; color:#fff; margin-bottom:1rem; }
h4 { font-size:1.3rem; line-height:1.4rem; font-weight: 700; color:#fff; margin-bottom:1rem; }
h5 { font-size:1.2rem; line-height:1.3rem; font-weight: 700; color:#fff; margin-bottom:1rem; }
h6 { font-size:1.1rem; line-height:1.2rem; font-weight: 700; color:#fff; margin-bottom:1rem; }

.back-link { position:absolute; left:2rem; top:2rem; color:#c5e5fa; background-color: rgba(255, 255, 255, 0.1); border-radius: 2rem; padding: 0.6rem 1rem; text-decoration: none; }

strong { font-weight:700; }

p { margin-bottom:1rem; }
a { color:#c5e5fa; }

main { max-width:896px; margin:0 auto; padding:2rem; backdrop-filter: blur(20px); background-color:rgba(0, 0, 0, 0.3); box-shadow:0 0 20px rgba(0, 0, 0, 0.3); border-radius:1rem; }

ul { margin:1rem; text-align:left; }

nav { 
    display:flex; justify-content:center; gap:1em; margin:2em 1em;

    div { 
        width:50px; height:50px; opacity:0.5; cursor:pointer; border-radius:8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
        a { width:100%; height:100%; display:block; }
        &:hover { opacity:1; transition: opacity 0.3s; }
    }

    .houses { background-image:url('/images/houses.png'); }
    .missions { background-image:url('/images/missions.png'); }
    .disturbances { background-image:url('/images/disturbances.png'); }
    .savants { background-image:url('/images/savants.png'); }
}

.nav-link { background-color:rgba(255, 255, 255, 0.2); border-radius:2rem; padding:1rem; text-decoration:none; }
.nav-link-disabled { background-color:#558; opacity:0.3; }

.tc { text-align:center; }
.tl { text-align:left; }

.tpz-icon { vertical-align:middle; box-shadow:0 0 10px #000; background-color: #000; border-radius:30px; margin-right:1rem; }

footer { 
    opacity:0.5; width:100%; margin-top:2rem; text-shadow:0 0 2px #000; 

    div { padding:1rem; }
}

@media (max-width: 896px) {
   h1 { font-size:1.4rem; line-height:1.5rem; }
   h2 { font-size:1.3rem; line-height:1.4rem; }
   h3 { font-size:1.2rem; line-height:1.3rem; }
   h4 { font-size:1.1rem; line-height:1.2rem; }
   h5 { font-size:1rem; line-height:1.1rem; }
   h6 { font-size:0.9rem; line-height:1rem; }

   main { margin:0 0.5rem; padding:2rem 1rem; }

   .nav-link { padding:0.5rem 1rem; font-size:0.9rem; }

   .back-link { position:inherit; display:block; margin-bottom:1rem; }
}