/* Basics */
html, body {
	margin: 0;
	padding: 0;
	text-align: center;
  font-size: 30pt;
}
body {
  background: linear-gradient(#def8ff,#ffffff);
  text-align: center;
}

table {
  border-collapse: collapse;
}
table tr{
  position: relative;
  /*border-bottom: 10pt solid linear-gradient(#000000,#ff0000);*/
}
table tr::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1pt;
  background: linear-gradient(to right, #00001000 0%, #000010 50%, #00001000 100%);
}
table td{
  padding: 5pt 15pt;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
h1 {
  font-size: 65pt;
}
h2 {
  font-size: 60pt;
}
h3 {
  font-size: 40pt;
}
h4 {
  font-size: 35pt;
}
h5 {
  font-size: 20pt;
}
h6 {
  font-size: 15pt;
}

/* Mock up */
.Mockup {
  z-index: 10000;
  position: fixed;
  display: flexbox;
  margin: auto;
  padding: 30pt;
  height: min-content;
  max-width: fit-content;
  max-height: fit-content;
  rotate: 45;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: red;
  background-color: #00000000;
  border: 1pt solid red;
  border-radius: 20pt;
  vertical-align: middle;
  box-shadow: 0pt 0pt 2pt black, 0pt 0pt 2pt inset black;
  text-shadow: 0pt 0pt 2pt black;
  rotate: 15deg;
  pointer-events: none;
}

/* Splash image zone */
.splash {
	z-index: -1;
	margin: 0;
	padding: 0;
	width: 100%;
	height: calc(100vh * 0.8);
	background-attachment: fixed;
	background-blend-mode: luminosity;
	background-image: url("image/splash.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  font-size: 30pt;
  text-shadow: 2pt 2pt 8pt black;
}
.splash h1 {
  position: absolute;
  top: 5rem;
  margin: 10pt 0;
  width: 100%;
  color: white;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  font-size: 40pt;
}
.company-name {
  position: absolute;
  top: 20pt;
  left: 20pt;
  text-shadow: 2pt 2pt 4pt rgb(255, 255, 255);
  color: rgb(50, 127, 255);
  font-size: 70pt;
  font-weight: bold;
}

/* Floating button array */
.floatie{
	z-index: 9000;
  position: fixed;
  display: block;
	margin: 0;
	padding: 0;
  top: 10pt;
  right: 10pt;
  color: rgb(0, 0, 0);
  background-color: #00000000;
  text-decoration: none;
  text-shadow: none;
}
.floatie-button {
  display: block;
  margin: 10pt;
  padding: 5pt 10pt;
  min-width: 1em;
  background-color: white;
  /*border: 1px solid black;*/
  border-radius: 5000pt;
  color: inherit;
  font-size: 30pt;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: 2pt 2pt 5pt black, 0pt 0pt 2pt black inset;
  cursor: pointer;
}
.floatie-button a {
  color: inherit;
  text-decoration: none;
  align-content: center;
  text-align: center;
}
.floatie-button a img {
  display: inline-block;
  margin: auto;
  width: 100%;
}

/* Dialogs/Modals & popovers*/
[popover] {
  border: #98e7ff solid 1pt;
  border-radius: 10pt;
}
div::backdrop {
  background-color: #00000088;
}
dialog {
  padding: 5pt;
  border: hidden 1pt;
  border-radius: 10pt;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  box-shadow: 2pt 2pt 10pt rgb(0, 0, 0);
}
dialog::backdrop {
  background-color: #00000088;
}
dialog .close-btn {
  position: absolute;
  top: 5pt; 
  right: 5pt; 
  margin: 5pt;
  padding: auto;
  min-width: 2em;
  min-height: 2em;
  border: rgba(0, 0, 0, 0) hidden 0;
  border-radius: 5pt;
  color: black;
  background-color: white;
  font-size: 20pt;
  box-shadow: -1pt -1pt 2pt rgba(0, 0, 0, 0.5) inset;
}
dialog h4 {
  margin: 10pt;
  color: #000040;
}
dialog .scrollContainer {
  text-align: left;
  overflow-y: scroll;
  padding: 10pt 10pt 20pt 10pt;
  max-height: calc(100vh * 0.7);
  border-radius: 5pt;
  box-shadow: 1pt 1pt 5pt rgba(0, 0, 0, 0.5) inset;
}

/* Styling for technical details */
#technical {
  margin: 2rem;
}
.technical-details {
  display: inline-block;
  padding: 10pt;
  border: 1pt solid black;
  border-radius: 5pt;
  background-color: rgba(128, 128, 128, 0.25);
  border-radius: 20pt;
}
.technical-details h2 {
  text-align: center;
  font-size: 60pt;
  margin-top: 5pt;
  margin-bottom: 0.5em;
}
.technical-details ul {
  text-align: left;
  margin: 0;
}


/* Styling for page footer */
.footer{
  font-size: 30pt;
  border-top: 1pt solid #98e7ff;
  background-color: #dff8ff;
}
.footer > div {
  display: inline-block;
  text-align: left;
  padding: 0pt 10pt 10pt 10pt;
}
.footer h2 {
  text-align: center;
  font-size: 60pt;
  margin-top: 10pt;
}
.footer-info-block {
  display: block;
  margin: 15pt;
}
.footer-info-block a {
  text-decoration: none;
  color: inherit;
}
.footer-info-block img {
  vertical-align: middle;
}

/* Styling for icons in different locations */
.icon {
  margin: 5pt;
  width: 40pt;
  vertical-align: middle;
  object-fit: contain;
}
.icon-text {
  margin-left: 20pt;
  display: inline-block;
}
.footer-separator{
  margin-top: 20pt;
}

/* Styling for detail-Summary */
details summary {
  padding: 2pt 20pt;
  border-radius: 20pt;
  color: #000040;
  background-color: #98e7ff;
  text-align: left;
  box-shadow: -1pt -1pt 2pt rgba(0, 0, 0, 0.5) inset, 1pt 1pt 2pt rgba(255, 255, 255, 0.5) inset;
}
details {
  margin: 0.75rem 4rem;
  border: 1pt solid #98e7ff;
  border-radius: 20pt;
  background-color: #dff8ff;
}
details.NoInfo summary {
  list-style: none;
}
details.NoInfo summary::-webkit-details-marker, 
details.NoInfo summary::marker {
  display: none;
  content: "";
}

/* Detail-Summary image display block styling */
.image-display img {
  margin: 5pt;
  border: rgba(0, 0, 0, 0) solid 1px;
  border-radius: 5pt;
  display: flexbox;
  max-width: calc(100vw / 4);
}
.image-display img.landscape{
  max-width: calc(100vw / 4 * 1.5);
}


/* Slideshow container */
.slideshow-container {
  margin: 50pt 0 10pt 0;
  width: auto;
  position: relative;
  height: 25rem;
}
.slideshow-container div {
  vertical-align: middle;
  text-align: center;
  align-content: center;
  display: none;
  position: relative;
  object-fit: contain;
  animation-name: fade-in;
  animation-duration: 0.6s;
}
.slideshow-container div img {
  height: 25rem;
  max-height: 25rem;
  width: 100%;
  vertical-align: middle;
  object-fit: contain;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  font-size: 80pt;
  width: auto;
  min-width: 10%;
  height: auto;
  padding: 10pt;
  color: white;
  font-weight: bold;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  align-content: center;
  background-color: rgba(0, 0, 0, 0.1);
}
.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.5);
}

/* The dots/bullets/indicators */
.dot-container{
  text-align: center;
  padding: 4pt;
}
.dot {
  cursor: pointer;
  height: 15pt;
  width: 15pt;
  margin: 5pt 10pt;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  box-shadow: -1pt -1pt 2pt rgba(0, 0, 0, 0.5) inset, 1pt 1pt 2pt rgba(255, 255, 255, 0.5) inset;
}
.active, .dot:hover {
  background-color: #717171;
}

/* Caption text, if needed */
.text {
  color: #f2f2f2;
  font-size: 15pt;
  padding: 8pt 12pt;
  position: absolute;
  bottom: 8pt;
  width: 100%;
  text-align: center;
}

/* Fading animation */
@keyframes fade-in {
  from {opacity: 0} 
  to {opacity: 1}
}