/* (c) 2022 ArtZen LLC */
* { margin: 0; padding: 0; border: 0; }

:root {
  --lite-f1: #22447f; --dark-f1: #f0f8ff;
  --lite-f2: #222440; --dark-f2: #e0efff;
  --lite-b1: #f8f8ff; --dark-b1: #424448;
  --lite-b2: #e0efff; --dark-b2: #363838;
  --fg1: var(--dark-f1); --bg1: var(--dark-b1);
  --fg2: var(--dark-f2); --bg2: var(--dark-b2);
  font-family: sans-serif;
}

.checkbox:checked ~ .page {
  --fg1: var(--lite-f1); --bg1: var(--lite-b1);
  --fg2: var(--lite-f2); --bg2: var(--lite-b2);
}

.checkbox {
  display: none;
}

a { background-color: transparent; }
a:link    { text-decoration: none; color: var(--fg1); background-color: var(--bg1); }
a:visited { text-decoration: none; color: var(--fg1); background-color: var(--bg1); }
a:hover   { text-decoration: outline: 0; }
a:active  { text-decoration: outline: 0; }

html, 
body { 
  height: 100%;
  color: var(--fg1);
  background-color: var(--bg1);
  -webkit-text-size-adjust: 120%;
  -ms-text-size-adjust: 100%;
  font-size: 100%
  line-height: normal;
}

.page {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.label {
  display: flex;
  font-size: 4vmin;
}

.c1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--fg1);
  background-color: var(--bg1);
}

.b1 {
  font-size: 10vmin;
  line-height: 12vmin;
  font-style: oblique;
  font-weight: bold;
  font-family: "Script", cursive;
  font-feature-settings: "smcp" on;
  padding: 0px 1vmin 0px 2vmin;
}

.b2 {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  align-items: center;
}

.b2a {
  padding: 0px;
}
.b2b {
  padding: 0px 4vmin 0px 4vmin;
}

.c2 {
  display: flex;
  justify-content: space-between;
  color: var(--fg1);
  background-color: var(--bg1);
  border: 4px solid var(--fg2);
  border-style: double none double none;
  font-size: 3vmin;
  padding: 1vmin;
}

.c3 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: var(--fg1);
  background-color: var(--bg1);
  font-size: 2.5vmin;
  line-height: normal;
  padding: 2vmin;
}

.m1 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: start;
  padding: 1vmin;
}

.m1 > a {
  background-color: var(--bg1);
  padding: 0.7vmin;
}

.m2 {
  display: flex;
  flex: 3 4 auto;
  flex-direction: column;
  justify-content: start;
  font-size: 2.5vmin;
  padding: 1vmin;
  white-space: nowrap;
  overflow: hidden;
}

.m2 > p {
  font-size: 1.75vmin;
  color: var(--fg2);
  padding: 1vmin;
}
.m2 > p > a {
  font-size: 2.5vmin;
  padding: 1vmin;
}
.bx {
  color: silver;
  font-size: 1.5vmin;
  padding: 0px; */
}
.b4 {
  color: var(--fg1);
  background-color: var(--bg1);
  padding: 2vmin;
}
.c4 {
  color: var(--fg1);
  background-color: var(--bg1);
  text-align: center;
  font-size: 2vmin;
  padding: 5px;

}
.d4 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  color: var(--fg1);
  background-color: var(--bg1);
  text-align: start;
  font-size: 2.5vmin;
  margin: 2vmin;

}
.d4 > a {
  margin: 2px;
}

.i4 {
  background-color: var(--bg2);
  padding: 0.5vmin;
  margin: 0.75vmin;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

input[type="text"] {
  color: var(--fg2);
  background-color: var(--bg2);
}