body {
	-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: auto;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
text-align: center;
color: white;
background-color: rgb(24, 24, 24);
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:18px;
    height:100%;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
    width:100%; }
	
	/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
  max-width: 60em;
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
        
h2 {
text-align: center;
text-shadow: 2px 3px red;
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
text-align: center;
color: blue;
text-shadow: 2px 3px cyan;
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
	text-align: center;
	color: green;
	text-shadow: 2px 3px yellow;
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
	text-align: left;
	color: white;
	text-shadow: 2px 3px gray;
  display: block;
  font-size: 1.2em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
	text-align: center;
	color: cyan;
	text-shadow: 3px 4px red;
	background: gray;
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

p {
	max-width: 40em
}

 ol {
 list-style: none;
 float: right }
 
 ol li:hover {
 background: white;
 margin: 0.5em 0;
 padding: 0.3em;
 width: 15em;
 border-right: 1em solid red }
 
 ol li {
 background: red;
 width: 15em;
 margin: 0.5em 0;
 padding: 0.3em;
 border-right: 1em solid white }
 
 ol a:link {
 color: white }
 ol a:visited {
 color: white }
 
 ol a:hover {
 color: black }
 
 ol.welcome {
 list-style: none;
 float: none }
 
 ul {
 list-style:none;
 float: left }
 
 a {
 text-decoration: none
 }
 
ul li:hover {
 background: red;
 margin: 0.5em 0;
 padding: 0.3em;
 width: 15em;
 border-right: 1em solid white }
 
 ul li {
 background: white;
 color: black;
 margin: 0.5em 0;
 padding: 0.3em;
 width: 15em;
 border-right: 1em solid red }
 
 ul a:link {
 color: black }
 ul a:visited {
 color: black }
 
 ul a:hover {
 color: white }
 
td {
  border: 5px solid red;
  padding: 15px;
  border-collapse: collapse;
}

td.button {
  border: 0;
  border-right: 1em solid red;
  background-color:white;
  color:black;
}

td.button:hover {
  border: 0;
  border-right: 1em solid white;
  background-color:red;
  color: white;
}

td.button a {
	color:black;
}

td.button a:hover {
	color:white;
}
 
 #container {
	 width: 80%;
	 max-width: 80em;
	 margin: 0 auto;
	 text-align: left;
	 padding: 10%;
	 background-color: black;
	 overflow: auto
 }
 
 #intro {
	 clear:both;
 }
 
 #lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,.7); 
    text-align:left;
}

#lightbox p {
	text-align:left; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:94%;
}

#welcome {
	width:512px;
	height:512px;
	position: relative;
	margin:0 auto;
	background-image: url(img/welcome.png);
    text-align:left;
	color: white;
}

#welcome a {
	color:black;
}

#content {
	position: absolute;
	padding: 15px;
	text-align: left;
	bottom: 0;
	left: 0;
}

table.stat {
	border-spacing: 0.5em;
}

td.stat {
	color: black;
	border: 0px;
	background-color: white;
	border-right: 1em solid red;
	text-align: left;
	margin: 0.5em 0;
    padding: 0.3em;
	width: 14em;
}

td.achiev {
	color: black;
	border: 0px;
	background-color: white;
	border-right: 1em solid red;
	text-align: left;
	margin: 0.5em 0;
    padding: 0.3em;
	width: 12em;
}

td.stat:hover {
	background-color: red;
	border-right: 1em solid white;
	margin: 0.5em 0;
    padding: 0.3em;
}

td.achiev:hover {
	background-color: red;
	border-right: 1em solid white;
	margin: 0.5em 0;
    padding: 0.3em;
}

td.stat2 {
	border: 0;
	margin: 0;
	padding: 0;
	width: 42px;
	color: red;
	text-align: center;
	border-bottom: 0px solid white;
	font-weight: bold;
}

td.stat3 {
	color: black;
	border: 0px;
	background-color: white;
	border-right: 0em solid red;
	text-align: center;
	margin: 0.5em 0;
    padding: 0.3em;
}

td.desc {
	color: white;
	border: 2px solid white;
	margin: 0.5em 0;
    padding: 0.3em;
	width: 18em;
}

td.gal {
	color: white;
	border: 0;
	margin: auto;
	padding: 0;
	max-width:400px;
	max-height:400px;
}

img.gal {
	max-width:400px;
	max-height:400px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

img.ach {
	float: left;
}

img.ach2 {
	float: right;
}

img.trophy {
    display:block;
    margin:auto;
}

table.trophy {
	border: 0;
	margin: 0;
	padding: 0;
}

td.trophy {
	border: 0;
	margin: 0;
	padding: 0;
}

b.ach {
	text-align: center;
}

table.progress {
	border: 5px solid red;
}

td.progress {
	border: 0;
	margin: 0;
	padding: 3px;
	border-bottom: 1px solid white;
}

td.dev {
  border: 5px solid cyan;
  margin: 0px;
  padding: 2px 0px 2px 7px;
}

table.bottom {
	width: 100%;
}

td.bottom {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Dropdown Button */
.dropbtn {
	cursor: pointer;
	float: left;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  	color: black;
	border: 0px;
	background-color: white;
	border-right: 1em solid red;
	text-align: left;
	margin: 0.5em 0;
    padding: 0.3em;
  min-width: 16em;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 0.3em;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: red;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.hide { color: black; }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top: 0;
  right:0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
    overflow-y: auto;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

.menubg {
    display: none;
  position: absolute;
  	color: black;
	border: 0px;
	background-color: white;
	border-right: 1em solid red;
	text-align: left;
	  height: 100%; /* Full height */
	margin: 0.5em 0;
    padding: 0.3em;
  min-width: 16em;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Modal Content/Box */
.ach-content {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 0;
  color: black;
  background-color: #262626;
  margin: auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
    max-height: 75%; /* Full height */
  overflow:auto;
  width: 80%; /* Could be more or less, depending on screen size */
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 38px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Modal Header */
.ach-header {
  padding: 2px 16px;
  background-color: red;
  color: white;
}

/* Modal Body */
.ach-body {padding: 2px 16px;}

/* Modal Footer */
.ach-footer {
  padding: 2px 16px;
  background-color: red;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {top: -300px; opacity: 0} 
  to {top: 0; opacity: 1}
}

@keyframes slideIn {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

a.splash {
	color: black;
}

 a.splash:link {
 color: black }
 a.splash:visited {
 color: black }
 
 a.splash:hover {
 color: white }

a.dd {
	color: white;
}

li.truelink {
 background: black;
 color: black;
 margin: 0.5em 0;
 padding: 0.3em;
 width: 15em;
 border-right: 1em solid black }
 
 li.truelink:hover {
 background: black;
 margin: 0.5em 0;
 padding: 0.3em;
 width: 15em;
 border-right: 1em solid black }

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.share {
	border:0;
	margin:0;
	padding:1em;
}