/* CSS files add styling rules to your content */

body, html {
  font-family: helvetica, arial, sans-serif;
  margin: 10px;

}

h1 {
  font-style: italic;
  color: #ff0066;

}

p {
  color: white;
 background-color: rgba(0, 0, 0, 0.8);}

label {
  color: white;
 background-color: rgba(0, 0, 0, 0.8);}

button {
  display: inline-block;
  font-size: 16px;
  padding: 10px;
  margin: 10px;
  background-color: black;
  font-style: italic;
  color: white;
  
}

main {
  z-index: 1;
    position: absolute;
  left: 0;
  top: 0;
  }

  canvas {
  z-index: 0;
    position: absolute;
  left: 0;
  top: 0;
    width: 100%;
    heigth: 100%;
    background: black;
}

#container {
	/* Contains all content. */
	position: fixed; 
	left: 50%; 
  background: rgba(42, 176, 217, .65) ;
 /* margin-left:470px;*/
/* width: 100%; 
	height: 100%; */
  
}
#title {
	font-family: Arial,Helvetica,sans-serif;
	font-size:130%;
	font-weight:bold;
	margin-left:10px;
	margin-top:10px;
}
#maintext {
	/* Contains the poem text and the bottom colophon image. */
	position: relative;
	top:25%;
	margin:auto;
	width:450px;
	max-width:90%;
	padding:10px;
	font-size:13pt;
}

@media (max-width: 450px) {
	/* For mobile phones. */
  .passage0, .passage1, .passage2 {
    font-size:70%;
  }
}

/* This particular stir fry has 3 texts. A style for each text
so we can tell the texts apart when stirred together. */
.passage0 {
	color:#ffffff;
}
.passage1 {
	color:#4f5a73;
}
.passage2 {
	color:#d5e1ed;
}

#titleImg {
	/* The title image. */
	padding:10px;
}


#links {
	/* The div that contains the bottom left links to the Stir Fry
	home page and to vispo.com */
	position:fixed;
	right:5px;
	bottom:5px;
	text-align:center;
}

a.stir:link, a.stir:visited {
	/* Link to Stir Fry home page. */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: gray;
	text-decoration: none;
	margin:0 auto;
}
a.stir:hover {  
	color: #14c878;
}


a.logo:link, a.logo:visited {
	/* Logo link to vispo.com */
	font-family: "Times New Roman";
	font-weight: normal;
	text-decoration:none;
}
a.logo:hover {
	font-weight:bold;
}
#v {
	font-size:1em;
	color:#FF0000;
}
#i {
	font-size:0.8em;
	color:#FFFF00;
}
#s {
	font-size:0.6em;
	color:#00FF00;
}
#p {
	font-size:0.8em;
	color:#83AEF5;
}
#o {
	font-size:1em;
	color:#FF80FF;
}