/* DEFAULT STYLES, ALL MEDIA */


@font-face {
  font-family: "Arcade";
  src: url('ARCADE.TTF');
  src: url('ARCADE.TTF') format('truetype');
}

.center { text-align: center; }
.tar { text-align: right; }
.fll { float: left; margin: 0 1em 0 0; }
.flr { float: right; margin: 0 0 0 1em; }
.cll { clear: left; }
.clr { clear: right; }
.clb { clear: both; }

body {
  margin: 0;
  padding: 0;
  font-size: calc(14px + 1vh);
  font-family: "Helvetica Neue",Helvetica,Ubuntu, "Segoe UI",Verdana,Arial,sans-serif;
  font-weight: 300;
  background: url("3448785.jpg") center no-repeat fixed #000000;
  background-size: cover;
  color: silver;
}
body *:focus { outline: none; text-shadow: 0 0 10px #EEF; }

header {
  position: fixed;
  z-index: 1000;
  top: 0;
  color: #999;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 1ex 0;
  background: rgba(0,0,0,0.666);
}
header h1 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font: inherit;
  position: absolute;
  top: 3ex;
  left: 5em;
}

header nav { display: inline-block; }
nav summary {
  margin: 0;
  padding: 1ex 0 2ex 0;
  cursor: pointer;
  font-size: 200%;
  display: block;
  position: relative;
  left: 3em;
  top: -0.5ex;
  transition: all 0.4s;
}
nav summary:hover { color: white; }
/* rotate symbol on click of details element */
nav details[open]>summary:before { transform: rotate(90deg); content: '🗙'; top: .3ex}
/* own symbol */
nav summary:before {
  content: '☰';
  position: absolute;
  left: -2em;
  transition: all .2s;
}
nav summary span { display: none; }
nav ul { list-style: none; margin: 0 0 0 20px; padding: 0; }

main {
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100%;
  position: relative;
  z-index: 2;
}

main p {
  line-height: 150%;
  margin: 0;
  padding: 0 0 2ex 0;
}

main article.highlight section {
  border: 3px solid cyan;
  backdrop-filter: blur(20px);
}
main article.highlight section h2 { color: darkorchid; text-shadow: 0 0 2px black; }

main section a:link { color: cyan; }
main section a:visited { color: inherit; }
main section a:active,
main section a:focus,
main section a:hover { color: red; text-decoration: none; }

main > h2 {
  color: cyan;
  font-weight: 100;
  padding: 0;
  margin: 0;
  font-size: 500%;
  font-family: "Arcade";
  font-variant: small-caps;
  text-align: center;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(5px);
}

main img.cover { width: 66%; max-width: 25vw; margin: 1ex auto; display: block; padding: 0; box-shadow: none; transition: all 1s; }
main img.cover:hover { box-shadow: 0 0 2ex orchid; cursor: pointer; }

main #faq details {
  margin-bottom: .5rem;
  box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
}
main #faq summary {
  background: #282828;
  border: 4px solid transparent;
  outline: none;
  padding: 1rem;
  display: block;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}
main #faq summary:before {
  content: '';
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: .25s transform ease;
}
main #faq details p { padding: 0; margin: 1ex 2ex; }
main #faq details[open] > summary:before { transform: rotate(90deg); }
main #faq details summary::-webkit-details-marker { display:none; }
#download a img { width: 4em; height: 4em; display: block; margin: 0 auto; }
#download p:has(a):has(img) { line-height: unset; margin: 0 0 2ex 0; padding: 0; }
#download p:has(a:hover):has(img) {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(255,255,255,0.25) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(5px);
}

footer ul { list-style: none; display: flex; justify-content: space-evenly; }
footer li a img { width: 6ex; height: 6ex; border: none; text-decoration: none; }
footer form [type='tel'] { position: absolute; top: -1000em; }
footer form [type='text'],
footer form [type='email'] { padding: 5px; width: calc(100% - 10px); }
footer form textarea { padding: 3px; width: calc(100% - 6px); }
footer form [type='text'],
footer form [type='email'],
footer form textarea { color: darkcyan; background: #080808; font-family: monospace; border: 1px solid #222; }
footer form [type='text']:focus,
footer form [type='email']:focus,
footer form textarea:focus { color: cyan; border: 1px solid cyan; box-shadow: 0 0 1ex cyan; outline: none; }