/* ~*~ christian's homepage stylesheet ~*~ do not steal ~*~ */

body {
  margin: 0;
  padding: 20px 8px 40px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  font-size: 15px;
  color: #ffff00;
  background-color: #000044;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23000044'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='7' cy='11' r='1.2'/%3E%3Ccircle cx='34' cy='6' r='0.9'/%3E%3Ccircle cx='51' cy='23' r='1.3'/%3E%3Ccircle cx='19' cy='38' r='1'/%3E%3Ccircle cx='44' cy='47' r='0.8'/%3E%3Ccircle cx='4' cy='52' r='1.1'/%3E%3Ccircle cx='27' cy='26' r='0.7'/%3E%3C/g%3E%3Cg fill='%2366ccff'%3E%3Ccircle cx='58' cy='40' r='1'/%3E%3Ccircle cx='13' cy='22' r='0.8'/%3E%3C/g%3E%3C/svg%3E");
}

.page {
  width: 620px;
  max-width: 100%;
  background: #000088;
  border-color: #00ffff;
  border-style: outset;
  text-align: center;
}

h1 {
  margin: 4px 0 14px;
  font-size: 27px;
  color: #00ffff;
  text-shadow: 2px 2px 0 #ff00ff;
}

/* one letter, one color, obviously */
.r1 { color: #ff0000; }
.r2 { color: #ff8800; }
.r3 { color: #ffff00; }
.r4 { color: #00ff00; }
.r5 { color: #00ffff; }
.r6 { color: #4488ff; }
.r7 { color: #ff00ff; }

.banner {
  display: block;
  margin-bottom: 12px;
  padding: 5px 0;
  background: #000000;
  border: 2px ridge #ffff00;
  color: #00ff00;
  font-weight: bold;
}

.rule {
  height: 6px;
  margin: 14px 0;
  border: 0;
  background: repeating-linear-gradient(
    90deg,
    #ff0000 0 12px,
    #ffff00 12px 24px,
    #00ff00 24px 36px,
    #00ffff 36px 48px,
    #ff00ff 48px 60px
  );
}

.hello {
  margin: 10px 0;
  line-height: 1.7;
}

.hello b {
  color: #ff00ff;
}

.wave {
  vertical-align: middle;
}

/* ~*~ THE LIGHTS ~*~ */

.lights {
  margin: 16px 0 10px;
  font-size: 30px;
  letter-spacing: 3px;
  line-height: 1.2;
  word-break: break-word;
}

.bulb {
  display: inline-block;
  filter: grayscale(100%) brightness(0.45);
  transition: filter 0.2s;
}

body.lit .bulb {
  filter: none;
  animation: bounce 0.9s infinite alternate ease-in-out;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

.state {
  margin: 6px 0 14px;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

body.lit .state {
  color: #00ff00;
}

.state.error {
  color: #ff8800;
}

.blink {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* ~*~ THE BIG BUTTON ~*~ */

.bigbutton {
  padding: 12px 26px;
  font-family: inherit;
  font-size: 21px;
  font-weight: bold;
  color: #000000;
  background: #c0c0c0;
  border: 5px outset #e8e8e8;
  cursor: pointer;
}

.bigbutton:hover:not(:disabled) {
  background: #ffff00;
}

.bigbutton:active:not(:disabled) {
  border-style: inset;
}

.bigbutton:disabled {
  color: #666666;
  cursor: wait;
}

/* ~*~ HIT COUNTER ~*~ */

.counter {
  margin: 0 auto;
  border-color: #888888;
  border-style: inset;
  background: #000000;
}

.counter-label {
  color: #00ffff;
  font-size: 11px;
  letter-spacing: 1px;
}

.counter-digits {
  font-family: "Courier New", Courier, monospace;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #00ff00;
  background: #002200;
}

/* ~*~ LINKS AND SMALLPRINT ~*~ */

.webring {
  margin: 14px 0;
  font-size: 13px;
  color: #ffffff;
}

a {
  color: #00ffff;
}

a:visited {
  color: #ff00ff;
}

a:hover {
  color: #ffff00;
}

.smallprint {
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.8;
  color: #aaaaff;
}

.smallprint b {
  color: #ffffff;
}

.smallprint img {
  vertical-align: text-bottom;
}

code {
  font-family: "Courier New", Courier, monospace;
  color: #00ff00;
  background: #000000;
  padding: 1px 3px;
}

.hitcount img {
  margin: 0 3px;
}

@media (prefers-reduced-motion: reduce) {
  .blink, .bulb { animation: none !important; }
}