* {
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}

@media screen {
  body {
    color: white;
    background-color: #666;
  }
  #bghex {
    visibility: visible;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -4;
  }
  #background-image {
    width: 100%;
    height: 100%;
    position: fixed; z-index: -1;
    top: 0; left: 0; bottom: 0; right: 0;
  }
  #background-image::before {
    background-size: cover;
    content: "";
    display: block;
    position: fixed; z-index: -3;
    top: 0; left: 0; bottom: 0; right: 0;
    opacity: 0.4;
  }
  #background-image::after {
    background-color: #563d7c;
    content: "";
    display: block;
    position: fixed; z-index: -2;
    top: 0; left: 0; bottom: 0; right: 0;
    opacity: 0.4;
  }
  a { color: #ff9; text-decoration: none; }
  a:hover { color: #fff; text-decoration: underline; }
  p.standout {
    color: white;
    background: green url(../Images/shadow-rolloff) center center repeat-x;
  }
  p.standout a {
    color: white;
  }
  #dwtw,
  #litl {
    text-align: center;
    background: rgba(111,0,111,0.7);
    width: 80%;
    margin: 20px auto;
    border: 1px solid white;
    border-radius: 0.5em;
    box-shadow: 5px 8px 8px rgba(0,0,0,0.3);
  }
  .wrapped-light {
    background-color: #ddd;
    border: 1px solid black;
    border-radius: 4px;
    padding: 3px 8px;
  }
  h1 {
    text-align: center;
    color: #e88;
    text-shadow: #343a40 1px 1px;
    letter-spacing: 0.1em;
    line-height: 110%;
  }
  .linkish {
    cursor: pointer;
  }
}
@media print {
  body {
    color: black;
    background-color: white;
  }
  #background-image { display: none; }
  #bghex { display: none; }
  #footer { display: none; }
  h1,h2,h3 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  a:link, a:visited {
    color: black;
    text-decoration: none;
  }
}

body {
    font-family: sans-serif;
    line-height: 1.3em;
    margin: 0;
}

.noshow { display: none; }
.flex   { display: flex; }

.list-container,
.form-container {
    justify-content: space-around;
    align-items: center;
    width: 99%;
    margin-left: auto; margin-right: auto;
    padding: 2px;
}
.list-member,
.form-member {
    display: flex;
    flex: 1 1 100%;
    justify-content: space-around;
    align-items: center;
    width: 99%;
    margin: 1px;
}
.form-container { flex-flow: row wrap;    }
.list-container { flex-flow: column wrap; }
.form-member    { flex-flow: row wrap;    }
.list-member    { flex-flow: column wrap; }
.list-header,
.form-header {
    display: flex;
    flex: 1 1 100%;
    width: 99%;
}
.list-header h3,
.form-header h3 {
    text-align: center;
    width: 99%;
}
.bordered {
    border: 1px solid white;
    border-radius: 0.5em;
}

#top-text {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

#content-main {
    width: 97%;
    padding: 1em;
    float: left;
}

div.info-block {
    width: 16em;
    margin: 1em auto;
}

h2, h3 {
    text-align: center;
}
@media (min-width: 640px) {
  h1, h2, h3 {
    margin: 0.5em 3em 1em 3em;
  }
}
@media (max-width: 640px) {
  h1, h2, h3 {
    margin: 0.4em 0.1em 0.2em 0.1em;
  }
}

h1 span { font-variant: small-caps; }

p.standout {
    text-align: center;
    font-variant: small-caps;
    border-left: 1px solid #090;
    border-bottom: 2px solid #030;
}

#footer {
    position: fixed;
    left: 120px;
    bottom: 5px;
}

p#info-msg {
    font-size: x-small;
    line-height: 1.5em;
    color: white;
}
p#info-msg a {
    color: #ff3;
}
p#today-is {
    display: block;
    text-align: center;
    width: 60%;
    min-width: 30em;
    margin: 0.2em auto;
}

input:invalid:required,
input:invalid {
    border: 1px solid rgb(255,0,0);
    background-color: rgb(255,216,216);
}
input:required {
    background-color: rgb(216,216,255);
}

@media (min-width: 320px) {
  #background-image::before {
    background-image: url(../Images/AC-001-460x305.png);
  }
}
@media (min-width: 460px) {
  #background-image::before {
    background-image: url(../Images/AC-001-720x477.png);
  }
}
@media (min-width: 720px) {
  #background-image::before {
    background-image: url(../Images/AC-001-980x649.png);
  }
}
@media (min-width: 980px) {
  #background-image::before {
    background-image: url(../Images/AC-001-1240x821.png);
  }
}
@media (min-width: 1240px) {
  #background-image::before {
    background-image: url(../Images/AC-001-1500x993.png);
  }
}
@media (min-width: 1500px) {
  #background-image::before {
    background-image: url(../Images/AC-001-1760x1165.png);
  }
}
@media (min-width: 1760px) {
  #background-image::before {
    background-image: url(../Images/AC-001-1920x1271.png);
  }
}