 @font-face {
        font-family: "rainyhearts", "DOSGothic";
        src: url("/fonts/rainyhearts.ttf") format("truetype");
      }
      :root {
        --white: #fffffc;
        --black: #0c0c0c;
        --lightpink: #fcf0f7;
        --pink: #f2cde1;
        --darkpink: #ce94a4;
        --darkestpink: #a93d5b;
        --green: #c2d3b1;
        --darkgreen: #868660;
        --offwhite: #f7f7f0;
        --taupe: #8f7f78;
        --darktaupe: #635048;
      }

      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-family: "rainyhearts", "DOSGothic";
      }
      #dialogText {
        color: var(--darkestpink);
        background-color: var(--pink);
      }

      #dialogWrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: table;
        background-image: url("/backgrounds/s71mpp.gif");
      }

      #dialogWrapCell {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }

      #mainDialog {
        max-width: 400px;
        margin: 5px;
        border: solid var(--darkpink) 1px;
        border-radius: 10px;
        box-shadow: 3px 3px 5px 3px var(--darkpink);
        margin-left: auto;
        margin-right: auto;
        background-color: var(--white);
        overflow: hidden;
        text-align: left;
      }
      #mainDialog > * {
        padding: 10px 30px;
                color: var(--darkestpink);

      }
      #passArea {
        padding: 20px 30px;
        background-color: var(--white);
                border-color: var(--darkestpink);

      }
      #passArea > * {
        margin: 5px auto;
      }
      #pass {
        width: 100%;
        height: 40px;
        font-size: 30px;
        color: var(--darkestpink);
      }

      #messageWrapper {
        float: left;
        vertical-align: middle;
        line-height: 30px;
      }

      .notifyText {
        display: none;
      }

      #invalidPass {
        color: red;
      }

      #success {
        color: pink;
      }

      #submitPass {
        font-size: 20px;
        border-radius: 5px;
        font-family: "rainyhearts";
        background-color: var(--pink);
        border: solid var(--darkestpink) 1px;
        float: right;
        cursor: pointer;
      }
      #contentFrame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      #attribution {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        padding: 10px;
        font-weight: bold;
        font-size: 0.8em;
      }
      #attribution,
      #attribution a {
        color: var(--darkestpink);
      }
      .error {
        display: none;
        color: yellow;
      }