@import url("https://resources/fonts.googleapis.com/css2?family=DotGothic16&display=swap");
@import url("https://resources/fonts.googleapis.com/css2?family=Satisfy&display=swap");

@font-face {
  font-family: 'rainyhearts', 'DOSGothic';
  src: url("/resources/fonts/rainyhearts.ttf") format("truetype");
}

@font-face {
  font-family: 'Cherish';
  src: url("/resources/fonts/Cherish.ttf") format("truetype");
}

@font-face {
  font-family: 'Satisfy';
  src: url("/resources/fonts/satisfy.ttf") format("truetype");
}

@font-face {
  font-family: 'EmojiFont';
  src: url("/resources/fonts/EmojiFont.ttf") format("truetype");
}

@font-face {
  font-family: 'DOSGothic';
  src: url("/resources/fonts/DOSGothic.ttf") format("truetype");
}

@font-face {
  font-family: 'yurumoji';
  src: url("/resources/fonts/yurumoji.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;
  --text-shadow: -1px -1px 0 var(--darkpink), 1px -1px 0 var(--darkpink),
    -1px 1px 0 var(--darkpink), 1px 1px 0 var(--darkpink),
    2px 2px 3px rgba(185, 70, 127, 0.5);
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: 'rainyhearts', 'DOSGothic';
}

#dialogText {
  color: var(--lightpink);
  background-color: var(--pink);
  text-shadow: var(--text-shadow);
  font-family: 'Cherish';
}

#dialogWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  background-image: url("/resources/images/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(--white);
  text-shadow: var(--text-shadow);

}

#passArea {
  padding: 20px 30px;
  background-color: var(--white);
  border-color: var(--darkestpink);

}

#passArea>* {
  margin: 10px auto;


}

#pass {
  width: 100%;
  height: 40px;
  font-size: 30px;
  color: var(--darkestpink);
  box-shadow: var(--text-shadow);
  border-color: var(--darkestpink);
  border-radius: 5px;
}

#messageWrapper {
  float: left;
  vertical-align: middle;
  line-height: 30px;
}

.notifyText {
  display: none;
}

#invalidPass {
  color: rgb(196, 63, 63);
}

#success {
  color: var(--green);
}

#submitPass {
  font-size: 15px;
  border-radius: 5px;
  font-family: 'rainyhearts', 'DOSGothic';
  background-color: var(--pink);
  border: solid var(--black) 1px;
  float: right;
  cursor: pointer;
  color: var(white);
  box-shadow: var(--text-shadow);
}

#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(--darkpink);
}

.error {
  display: none;
  color: rgb(250, 250, 120);
}