/* Fonts */
@font-face {
  font-family: "8bitOperatorPlus-Bold";
  src: url("../fonts/8bitOperatorPlus-Bold.ttf") format("truetype");
}

/* Base */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #000;
  color: #fff;
  font-family: "8bitOperatorPlus-Bold", monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* Links */
a { text-decoration: none; color: inherit; }

/* Layout */
.wrapper {
  min-height: 100vh;
  display: flex;
  padding: 40px 0;
  align-items: flex-start;
}

@media (min-height: 700px) {
  .wrapper { align-items: center; }
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(6px, 2vw, 12px);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(8px, 2vw, 14px) calc(-1 * clamp(6px, 2vw, 12px));
}

/* Bigger gap between title row and warning row */
.row + .row {
  margin-top: clamp(28px, 6vw, 90px);
}

.col-full {
  width: 100%;
  padding: 0 clamp(6px, 2vw, 12px);
  text-align: center;
}

.main { width: 100%; text-align: center; }

/* Headings */
#home h1 {
  font-size: clamp(34px, 7vw, 80px);
  letter-spacing: clamp(4px, 2.2vw, 18px);
  line-height: 1.15;
  margin: 0 0 clamp(16px, 4vw, 60px);
  text-shadow: -4px 0 #777, 0 -4px #777, 0 4px #777, 4px 0 #777;
  animation: flashBorder 5s infinite;
}

#home h2 {
  color: #bbb;
  font-size: clamp(16px, 3.6vw, 42px);
  padding: 0 clamp(10px, 3vw, 20px);
  margin: 0 0 clamp(10px, 2vw, 24px);
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Download */
#download { margin-top: clamp(24px, 5vw, 50px); }

#download a {
  display: block;
  font-size: clamp(22px, 5vw, 54px);
  margin-bottom: clamp(16px, 4vw, 40px);
  line-height: 1.15;
  color: #f9ff10;
}

#download a:hover { color: #d6dc00; }

/* Extra-small devices */
@media (max-width: 420px) {
  #home h1 { letter-spacing: 3px; }
  #download a { letter-spacing: 1px; }
}

/* Animation */
@keyframes flashBorder {
  0%, 100% { text-shadow: -4px 0 #888, 0 -4px #888, 0 4px #888, 4px 0 #888; }
  50%      { text-shadow: -4px 0 #444, 0 -4px #444, 0 4px #444, 4px 0 #444; }
}