@font-face {
 font-family:"Regular";
 src:url("Fonts/Comfortaa-Regular.ttf");
}

.bg { background:#202830 url("Images/BG.jpg") center/contain repeat fixed; }

body {
/* Tunables */
 --text-color:#FFDDDD;
 --text-color-dim:#CCAAAA;
 --head-foot-color:#202530;
 --hover-color:#00DDFF;
 --link-text-color:#88DDFFD0;
 --link-ul-color:#8090B0;
 --section-bar-color:#FFDDEE3F;
 --section-bar-color-alt:#FFDDEE27;
 --section-bar-color-hover:#FFDDEE5F;
 --section-bar-color-hover-alt:#FFDDEE3F;
 --border-color:#888899;
 --gallery-thumbbar-bg:#272727D0;
 --gallery-thumb-size:calc(90%/8);
 --footer-bg-color:#282D38Ff;
 --icon-size:1.0em;
 --footer-icon-size:2.0em;
 --logo-size:3.0em;
 --anti-size:8em;

 box-sizing:border-box;
 font:normal normal normal normal;
 font-family:"Regular";
 writing-mode:page;
 color:var(--text-color);
 margin:0;
}

.hide {
 visibility:hidden;
 height:0;
 opacity:0%;
 transition:opacity 0.75s ease;
}

input[type=checkbox] { display:none; }
input[type=checkbox]:checked+.hide {
 visibility:visible;
 height:100%; 
 opacity:100%;
}

/* Headings */
h1 {
 font-size:48pt;
 text-align:center;
 margin:0.5em;
 text-decoration:none;
 color:var(--text-color);
}

h1 > a {
 text-decoration:none; 
 clear: both;
}

h2 {
 text-decoration:underline; font-size:120%; clear: both;
 display:inline-block;
}

li { color:var(--text-color-dim); }

/* Primary content sections */
.section { margin:0 2.5em 0 2.5em; }
.section p { margin:0.5em 0 0 0; }

/* Section expose */
.section > div {
 margin:0 1em 0 2em;
}

.section > label > h2 {
 font-size:16pt;
 text-align:left;
 font-weight:normal;
 padding:0.25em 0;
 background:linear-gradient(var(--section-bar-color), var(--section-bar-color-alt));
 margin:0.5em 0 0.25em 0;
 display:inline-block;
 width:100%;
 color:var(--link-text-color);
 cursor:pointer;
 border-top:1px solid var(--section-bar-color-hover);
 border-left:1px solid var(--section-bar-color-hover);
 text-decoration:none;
}

.section > label > h2:hover {
 color:var(--hover-color); 
 background:linear-gradient(var(--section-bar-color-hover), var(--section-bar-color-hover-alt));
}

.section > label > h2 > img { height:var(--icon-size); width:auto; vertical-align:middle; }

.main { margin:1vh 0vw 0vh 2vh; }

.subtitle {
    text-align:center;
    color:#EECCCC; margin:2vh 0;
}
.subtitle > p { margin:0px; }

.fixed { display:block; color:#DDDDFF; font-family:Courier, monospace; font-size:110%; }
.literal { display:inline; color:#ddFFcc; font-family:Courier, monospace; font-size:110%; }
.warn { font-weight:bold; color:#FF5500; }

p::first-letter { font-size: 120%; }
li::first-letter { font-size: 120%; }

a {
 text-decoration-color:var(--link-ul-color); 
 color:var(--link-text-color);
 transition:all 0.25s ease-out;
}

a:visited { color:var(--link-text-color); }
a:hover { color:var(--hover-color); }

hr { border:thin solid var(--border-color); }

.download li { padding:0 0 0.25em 0; }
.download ul { max-width: 80em; }

.activity-icons { text-align:center; }
.activity-icons > img { object-fit:scale-down; max-width:95%; }
.footer-ztgps > a > img { min-width: 20em; width: 25%; }

.icon-about { background:calc(var(--icon-size) * -0) 0; }
.icon-dl { background:calc(var(--icon-size) * -1) 0; }
.icon-faq { background:calc(var(--icon-size) * -2) 0; }
.icon-src { background:calc(var(--icon-size) * -3) 0; }
.icon-img { background:calc(var(--icon-size) * -4) 0; }
.icon-menu { background:calc(var(--icon-size) * -5) 0; }
.icon-home { background:calc(var(--icon-size) * -7) 0; }
.icon-arch { background:calc(var(--icon-size) * -8) 0; }
.icon-hist { background:calc(var(--icon-size) * -9) 0; }
.icon-lic { background:calc(var(--icon-size) * -10) 0; }
.icon-priv { background:calc(var(--icon-size) * -11) 0; }
.icon-cred { background:calc(var(--icon-size) * -10) 0;
             filter:saturate(250%) hue-rotate(70deg); }
.icon-top { background:calc(var(--icon-size) * -12) 0; }
.icon-news { background:calc(var(--icon-size) * -13) 0; }
.icon-donate { background:calc(var(--icon-size) * -14) 0; }
.icon-why { background:calc(var(--icon-size) * -15) 0; }
.icon-bottom { background:calc(var(--icon-size) * -16) 0; }

.anti-l-track { background:calc(var(--anti-size) * -0) 0; }
.anti-l-g { background:calc(var(--anti-size) * -1) 0; }
.anti-l-js { background:calc(var(--anti-size) * -2) 0; }
.anti-l-ad { background:calc(var(--anti-size) * -3) 0; }

.anti-s-track { background:calc(var(--footer-icon-size) * -0) 0; }
.anti-s-g { background:calc(var(--footer-icon-size) * -1) 0; }
.anti-s-js { background:calc(var(--footer-icon-size) * -2) 0; }
.anti-s-ad { background:calc(var(--footer-icon-size) * -3) 0; }

[class ^= "anti-"] {
 background-image:url("Images/Anti.png");
 display:inline-block;
}

[class ^= "anti-s-"] {
 background-size:calc(var(--footer-icon-size) * 4) var(--footer-icon-size);
 height:var(--footer-icon-size);
 width:var(--footer-icon-size);
}

[class ^= "anti-l-"] {
 background-size:cover;
 height:var(--anti-size);
 width:var(--anti-size);
}

[class ^= "icon-"] {
 background-size:calc(var(--icon-size) * 17) var(--icon-size);
 width:var(--icon-size);
 background-image:url("Images/Icons-v4.png");
 margin:0 0.25em;
 width:1em; height:1em;
 display:inline-block;
 vertical-align:middle;
}

.columns {
 column-width:40em;
 column-gap:1em; 
 column-rule:thin solid var(--section-bar-color-hover);
}

/* JS-free gallery */
.gallery {
 display:flex; 
 flex-flow:column nowrap;
}

.gallery > a {
 text-align:center;
 margin:0.25em 0 0.5em 0; 
}

.gallery-thumbs {
 display:flex;
 align-items:flex-end;
 flex-flow:row wrap;
 overflow:auto;
 background-color:var(--gallery-thumbbar-bg);
 border:thin solid var(--border-color);
 border-radius:0.25em;
}

.gallery-thumbs > div { display:contents; }
.gallery-thumbs > input { display:none; }
.gallery-thumbs .gallery-img { visibility:hidden; opacity:0%; transition:opacity 0.75s ease; }
.gallery-thumbs > input:checked+div > div { visibility:visible; opacity:100%; }
.gallery-thumbs > input:checked+div label img { border-color:var(--text-color); opacity:75%; }

.gallery-thumbs label {
 margin:0.2em;
 width:var(--gallery-thumb-size);
 height:auto;
 min-width:100px;
 max-width:240px;
 padding:0.25%;
 cursor:pointer;
 text-align:center;
 color:var(--text-color);
}

.gallery-thumbs > div > label > div {
 display:block;
 opacity:50%;
 border:thin solid;
 border-radius:0.25em;
 border-color:var(--hover-color);
 transition:opacity 0.5s ease-out;
}

.gallery-thumbs > div > label > div:hover { opacity:100%; }

.gallery-thumbs > div > label > img {
 display:inline-block;
 object-fit:scale-down;
 max-width:100%;
 opacity:50%;
 border:thin solid;
 border-radius:0.25em;
 border-color:var(--hover-color);
 transition:opacity 0.5s ease-out;
}

.gallery-thumbs img:hover { opacity:100%; }

/* Abuse translate() since there is no css parent selector.  This visually moves
   the image down to the main view area from the end of the thumb area. */
.gallery-img {
 position:absolute;
 transform:translate(0, 102%);
 max-width: 85%;
}

.gallery-img img {
 width:100%;
 height:auto;
 border:thin solid;
 border-radius:0.25em;
}

.gallery-link {
  border-color:var(--hover-color);
  transition:opacity 0.5s ease;
}

.gallery-link:hover {
  border-color:var(--hover-color);
}

.gallery-view-area {
 width:98%;
 height:65vw;
}

/* Footer */
.footer {
 display:flex;
 flex-flow:row nowrap;
 position:fixed;
 bottom:0;
 left:0%;
 width:100%;
 background-color:var(--head-foot-color);
 padding:0.5em 0em;
}

.footer-links {
 display:flex;
 flex-flow:row wrap;
 align-items:center;
}

.footer-links > div {
 min-width:5.0em;
 white-space: nowrap; /* don't line-wrap inside footer */
 padding: 0em 0.5em;
}

.footer-links > label:hover { color:var(--hover-color); }
.footer-icons, .footer-ztgps {
 flex-flow:row nowrap;
 align-items:center;
 opacity:0.5;
 transition:opacity 0.25s ease-in-out;
}

.footer-icons:hover, .footer-ztgps:hover {
 opacity:1.0;
}

.footer-popup {
 filter:saturate(30%);
 width:var(--footer-icon-size);
 height:auto;
 transition:all 0.75s ease-out;
 margin:0 0.1em;
}

.footer-popup > :first-child {
 visibility:hidden;
 opacity:0.0;
 bottom:var(--footer-icon-size);
 position:absolute;
 left:0px;
 z-index:10;
 text-align:center;
 transition:opacity 0.25s ease-in;
 margin: 0em;
}

[class ^= "anti-"] > :first-child {
 min-width: calc(var(--anti-size) * 2.5);
}

.footer-popup:hover, .footer-popup:hover > :first-child { 
 visibility:visible;
 opacity:1.0;
 filter:saturate(100%); 
}

.footer-popup p {
 margin: 0em;
 padding: 0.5em; 
 color: var(--link-text-color);
}

[class $= "-content"], .footer-popup > :first-child {
 border:thin solid;
 border-radius:0.75em;
 border-color:var(--border-color);
 background-color:var(--footer-bg-color);
}

.greencheck li {
 padding:0.5em 0;
 list-style:outside url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAr0lEQVQ4y52SsQ3CMBREXxAMkVWoMkC6DMAW1CyQHdgBBogoYAGaFCglHRLQ0VwKfwGFZevbnfV9907+B6VH7ACWheI9sEFl4g4xIiZE4xXXiBPigehL6FvEy0xqgIWLDq3djlTcvfTeon/pHnFjnzYiutiDIbs2IVtfRByGU4aeWFsYKpokSY8nGcpL828SSnNAPH2l+ZlcETdL4K7s2Uw+OXq8iRVr4AKsgHfKYAa76m/ndiBgmwAAAABJRU5ErkJggg==');
}


.footer-info-content h2 { font-size:larger; margin:0em; }
.footer-info-content h3 { font-size:large; margin:0.5em 0 0 0.5em; }
.footer-info-content p { font-size:smaller; margin:1em 0 0 2em; display: block; white-space: normal; }

/* Device sizing */
@media only screen and (max-width:1500px) {
 .gallery-thumbs label { font-size:80%; }
}

@media only screen and (max-width:800px) {
 h1 { font-size:36pt; }
 .main-nav-icon { height:1.5em; }
 .gallery-thumbs label { font-size:65%; }
}

@media only screen and (max-width:600px) {
 h1 { font-size:25pt; }
}