/* Paradise SPRX, styled after the original paradisesprx.net (2016-2021):
   blurred GTA background, dark tint, particles, thin uppercase letter-spaced type. */

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.5;
}

/* the blurred screenshot behind everything */
.background {
  position: fixed;
  inset: -20px;
  z-index: -3;
  background: #111 url('/img/background.jpg') center / cover no-repeat;
  filter: blur(5px);
}
.tint {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: rgba(0, 0, 0, 0.6);
}
#particles-js {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.page {
  padding: 8px 24px 48px;
  max-width: 1200px;
}

h1 {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 7px;
  text-transform: uppercase;
  margin: 24px 0 10px;
}
h1 a { color: #fff; }
h1.title { margin-top: 20px; }
h4 { font-weight: 400; letter-spacing: 3px; margin: 0 0 8px; }

p, li { font-size: 16px; letter-spacing: 2px; }
p { margin: 0 0 14px; }
a { color: #fff; }
b, strong { font-weight: 700; }
.red { color: red; font-weight: 700; }
.section { font-weight: 700; margin-top: 28px; }
.muted { color: rgba(255, 255, 255, 0.7); }

/* nav links, underlined and uppercase, invert on hover */
nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 18px; }
a.link {
  color: #fff;
  font-size: 16px;
  letter-spacing: 7px;
  text-transform: uppercase;
  text-decoration: underline;
  padding: 2px 2px 6px;
}
a.link:hover, a.link[aria-current="page"] { background: #fff; color: #2d3436; }

/* the big white button from the old GTA page */
.big-button {
  display: inline-block;
  border: 0;
  border-radius: 12px;
  padding: 24px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 16px;
  letter-spacing: 7px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}
.big-button:hover { background: #dfe6e9; }
.big-button:disabled { opacity: 0.5; cursor: default; }
.center { text-align: center; }

/* small link-style buttons */
.text-button {
  background: none;
  border: 0;
  padding: 2px 2px 6px;
  color: #fff;
  font: inherit;
  letter-spacing: 7px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}
.text-button:hover { background: #fff; color: #2d3436; }
.text-button:disabled { opacity: 0.5; cursor: default; background: none; color: #fff; }

input[type="text"], input[type="number"] {
  width: 100%;
  max-width: 480px;
  padding: 10px 12px;
  margin: 4px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: inherit;
  letter-spacing: 1px;
}
input::placeholder { color: rgba(255, 255, 255, 0.5); }
label { display: block; text-transform: uppercase; letter-spacing: 4px; font-size: 13px; }

code, .key {
  font-family: Consolas, 'Courier New', monospace;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}
.key {
  display: inline-block;
  max-width: 100%;
  margin: 10px 0;
  padding: 14px 16px;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  user-select: all;
}

.msg { min-height: 1.5em; margin-top: 10px; }
.msg.error { color: #ff7675; }
.msg.ok { color: #55efc4; }

.columns { display: grid; gap: 8px 48px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

table.status { border-collapse: collapse; margin-top: 8px; }
table.status td { padding: 4px 24px 4px 0; letter-spacing: 2px; }
table.status td:first-child { text-transform: uppercase; letter-spacing: 4px; font-size: 13px; }

footer { padding: 24px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* gallery slideshow, like the old one */
.slideshow { position: relative; max-width: 1000px; margin: 10px auto; }
.slide { display: none; }
.slide img { width: 100%; display: block; }
.slide.active { display: block; animation: fade 1.5s; }
.prev, .next {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  padding: 16px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.6s ease;
}
.prev { left: 0; border-radius: 0 3px 3px 0; }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.8); }
.numbertext { position: absolute; top: 0; padding: 8px 12px; font-size: 12px; color: #f2f2f2; }
@keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }

@media (max-width: 600px) {
  .page { padding: 8px 16px 40px; }
  h1, a.link, .big-button, .text-button { letter-spacing: 4px; }
  p, li { letter-spacing: 1px; }
  .big-button { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide.active { animation: none; }
}