/* ****************************************************************************
SOLILOQUY STYLES
*******************************************************************************/

body {
  /* Note the font-family; this is a monospaced web font
  used to display the letters in the poem. */
	margin:0px;
  padding:0px;
	font-size: 100%;
	font-weight:bold;
	font-family: "monofur";
}

/* ****************************************************************************
POEM STYLES
Styles used in the actual poem. 
*******************************************************************************/

@font-face {
  /* This is the monospaced web font used to display the poem.
  It's monospaced because we need a grid-like display when the
  word "one" convers the screen. */
  font-family: "monofur";
  src: url(../fonts/monof55.woff);
  font-weight: bold;
}
.layer {
  /* There are two layers of text. This style is for the two
  divs (id="0" and id="1") that contain the two layers of 
  text the poem is displayed in. We have two layers so we
  can display text in the same spot in two layers at once
  when we fade  text in/out. */
  position: absolute;
  top:0px;
  left:0px;
  padding:0px;
}
.main {
  /* This is the style applied to a row of text. */
  color:#000000;
  font-size:1em;
  line-height:1em;
  margin-bottom: 0px;
  margin-top: 0px;
  padding:0px;
}

/* ****************************************************************************
MISCELLANEOUS STYLES
Styles used other elements of the Soliloquy HTML.
*******************************************************************************/

#openingMsg {
  /*  This is the initial div that contains the title etc of the poem. */
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  text-align: center;
  width:250px;
  top:30%;
  top:calc(50% - 150px);
  left:calc(50% - 125px);
}
#openingMsg:hover {
  color:maroon;
}
#fullscreen {
  position:absolute;
  top:10px;
  right:10px;
  cursor: pointer;
}
.note1 {
  font-family: Times, "Times New Roman", sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#creditsDiv {
  /* This div contains the final box that appears after the poem is over. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  width:150px;
  max-width: 35%;
  background-color: rgba(255,255,255,0.85);
  text-align: center;
  position:fixed;
  left:2px;
  bottom:2px;
  padding:5px;
  display:none;
  border: 1px solid silver;
}
#finalTitle {
  font-size: 20px;
  color:white;
  text-shadow: 2px 2px 2px #000000;
}
#seeAlso {
  color:maroon;
  text-decoration: none;
  cursor: pointer;
}
#seeAlso:hover {
  color:red;
}
#restart {
  font-size: 16px;
  text-align: center;
  cursor:pointer;
  color:maroon;
}
#restart:hover {
  color:red;
}
h1, h2, h3 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
h1 {
  font-size: 40px;
  color:white;
  text-shadow: 2px 2px 2px #000000;
}

h2 {
  font-size: 20px;
}
h3 {
  font-size: 12px;
}
#logo {
  position: fixed;
  bottom: 10px;
  right: 10px;
}