:root{
  --bg: #efeeed;
  --panel: #d4d0c8;
  --panel-shadow: #808080;
  --panel-highlight: #ffffff;
  --page-bg: #e4ddc2;
  --layout-bg: #d8cfaf;
  --text: #111111;
  --muted: #4c4c4c;
  --link: #0000ee;
  --alert: #cc0000;
  --success: #0b6b15;
  --field-bg: #ffffff;
  --field-border-dark: #666666;
  --field-border-light: #efefef;
  --button-top: #fff6b6;
  --button-bottom: #e0c93d;
  --button-text: #222222;
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg: #333231;
    --panel: #2e3138;
    --panel-shadow: #0f1115;
    --panel-highlight: #5c606b;
    --page-bg: #b6aa78;
    --layout-bg: #a69866;
    --text: #f2f0e6;
    --muted: #ddd5b6;
    --link: #8fb7ff;
    --alert: #7a120d;
    --success: #c7f5a9;
    --field-bg: #1a1c20;
    --field-border-dark: #090a0d;
    --field-border-light: #575c67;
    --button-top: #6f7582;
    --button-bottom: #3f434d;
    --button-text: #f7f4e8;
  }
}

html{
  background: var(--bg);
}

body{
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Comic Sans MS", "Comic Sans", "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  font-size: 13px;
  background: transparent;
}

a{
  color: var(--link);
}

center{
  display: block;
  padding: 18px 8px 30px;
}

.page{
  width: 760px;
  margin: 0 auto;
  padding: 10px 10px 18px;
  background: var(--page-bg);
  border: 3px ridge var(--panel);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}

.layout{
  width: 100%;
  background: transparent;
}

.main{
  padding: 12px;
  vertical-align: top;
}

.hero{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
  border: 0;
  background: transparent;
}

.intro{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: #7a0000;
  text-align: center;
}

.counter-note{
  display: block;
  width: 100%;
  margin: 12px auto 0;
  padding: 3px 0;
  text-align: center;
  color: #3f3300;
  font-size: 12px;
  background: rgba(255,255,255,0.28);
  border: 1px dotted #7f744b;
  box-sizing: border-box;
}

.counter-marquee{
  display: block;
}

.counter-digits{
  display: inline-block;
  margin: 0 3px;
  padding: 2px 5px;
  background: #000000;
  color: #38ff38;
  border: 2px inset #777777;
  font-family: "Courier New", monospace;
  font-size: 15px;
  letter-spacing: 2px;
}

.message{
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid;
  font-weight: bold;
}

.success-box{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
  text-align: center;
  color: var(--success);
  background: #e9ffd8;
  border-color: #77aa66;
}

.error-box,
.field-error{
  color: var(--alert);
}

.error-box{
  background: #ffe4dd;
  border-color: #d18f84;
}

@media (prefers-color-scheme: dark) {
  .success-box{
    background: #17381c;
    border-color: #5aa65f;
  }

  .error-box{
    background: #d2b2aa;
    border-color: #7a120d;
  }

  .counter-note{
    color: #1d1d1d;
    background: rgba(255,255,255,0.18);
  }
}

form{
  margin: 12px 0 0;
  text-align: left;
}

fieldset{
  margin: 0;
  padding: 10px;
  background: var(--panel);
  border-top: 3px solid var(--panel-highlight);
  border-left: 3px solid var(--panel-highlight);
  border-right: 3px solid var(--panel-shadow);
  border-bottom: 3px solid var(--panel-shadow);
}

legend{
  padding: 2px 8px;
  background: #003399;
  color: #ffffff;
  border: 2px outset #d9d9d9;
  font-weight: bold;
  font-family: "Comic Sans MS", "Comic Sans", "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
}

.form-table{
  width: 100%;
}

.label-cell{
  width: 135px;
  padding-top: 6px;
  text-align: right;
  vertical-align: middle;
  font-weight: bold;
  color: #1d1d1d;
}

.top-cell{
  vertical-align: top;
}

.inline-fields{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.inline-fields > div{
  flex: 1 1 0;
}

.inline-fields > div:first-child{
  flex: 0 0 42%;
}

.inline-fields > div:last-child{
  flex: 1 1 auto;
}

.inline-email > div{
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-email label{
  font-weight: bold;
  white-space: nowrap;
}

.inline-email input{
  flex: 1 1 auto;
}

label{
  color: var(--muted);
}

input,
textarea,
button{
  font-family: monospace;
  font-size: 13px;
}

input,
textarea{
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  color: var(--text);
  background: var(--field-bg);
  border-top: 2px solid var(--field-border-dark);
  border-left: 2px solid var(--field-border-dark);
  border-right: 2px solid var(--field-border-light);
  border-bottom: 2px solid var(--field-border-light);
}

textarea{
  resize: vertical;
}

.hint,
.footer-note{
  color: #5b5b5b;
}

.submit-line{
  margin: 10px 0 6px;
  text-align: center;
}

button{
  padding: 7px 14px;
  border-top: 2px solid var(--panel-highlight);
  border-left: 2px solid var(--panel-highlight);
  border-right: 2px solid var(--panel-shadow);
  border-bottom: 2px solid var(--panel-shadow);
  background: linear-gradient(var(--button-top), var(--button-bottom));
  color: var(--button-text);
  font-weight: bold;
  cursor: pointer;
}

button:active{
  border-top: 2px solid var(--panel-shadow);
  border-left: 2px solid var(--panel-shadow);
  border-right: 2px solid var(--panel-highlight);
  border-bottom: 2px solid var(--panel-highlight);
}

.footer-note{
  margin: 12px 0 0;
  font-size: 11px;
}

.nietzien{
  display: none;
}

@media (max-width: 820px) {
  .page{
    width: auto;
  }

  .layout,
  .layout tbody,
  .layout tr,
  .layout td,
  .form-table,
  .form-table tbody,
  .form-table tr,
  .form-table td{
    display: block;
    width: auto;
  }

  .label-cell{
    padding: 4px 0 2px;
    text-align: left;
  }

  .inline-fields{
    display: block;
  }

  .inline-fields > div{
    margin-bottom: 8px;
  }

  .inline-email > div{
    display: block;
  }

  .inline-email label{
    display: inline-block;
    margin-bottom: 2px;
  }

  input,
  textarea{
    width: 100%;
    box-sizing: border-box;
  }
}