body { 
  /*text-align:center;*/
  /*padding:0px 0px 0px 0px; 
  margin:0; */
  background-image: url("images/catcolors.gif");
  background-attachment:local; 
  /*align-items: center;
  flex-direction: column;*/
  background-position: center; 
  cursor: url("images/st.png"), auto;
}

#container {
  /*display: flex;*/
  max-width:698px; 
  margin:0 auto; 
  /*position:relative;  */
}

#HomeButton {
  cursor: url("images/horsecursor.png"), auto;
}

#header {
  max-width:698px;
  background-image: url("images/pigs.jpg"); 
  background-size: 100%;
  background-repeat: no-repeat; 
  margin: 0 auto; 
}

#title { 
  border:0px solid; 
  position:absolute; 
  width:698px; 
  text-align: center; 
}

#titleitself, #titleshadow { 
  border:0px solid; 
  font:40pt georgia; 
  margin:20px; 
  text-align:left; 
  letter-spacing: -5px; 
  font-style:italic;
}

#titleshadow { 
  color: black; 
  position:absolute; 
  top:11px; 
  left:3px; 
} 

#titleitself { 
  color: #ff99cc; 
  position:absolute; 
  top:10px; 
  left:0px; 
}

#quotationshadow, #quotation { 
  font:10px georgia; 
  font-style:oblique; 
  /*bottom:8px;*/
  font-weight:bold;
} 

#quotationshadow {
  color: black; 
  position:absolute;  
  left:62px;
  top:85px; 
}
#quotation { 
  color:#ff99cc;
  position:absolute;  
  left:60px;
  top:84px;
}

#flex {
  display:flex;
}

main {
  /*position:relative;
  top: 750px;
  width: 435px;
  padding: 5px;
  left: 0;*/
  background-image:url("images/greenflowers.png");  
  flex:1;
  /*padding:20px;*/
  order:1;
}

a.box, a.box:active, a.box:link, a.box:visited {
  display: block;
  font-family: arial;
  font-size: 11px;
  border-left: 0px;
  border-right:0px;
  color: blue;
  letter-spacing: 3px;
  text-align: center;
  text-decoration:none;
}

a.box:hover {
  display: block;
  font-family: arial;
  font-size: 11px;
  border-left: 5px solid blue;
  border-right: 5px solid blue;
  color: black;
  letter-spacing:5px;
  text-align: center;
}

input textarea { 
  font-family: georgia;
  font-size: 10px; 
}

p {
 font-family: arial; 
 font-size: 12px; 
 letter-spacing: 3px;
 color: black;
 margin-left:10px; 
 margin-right:10px;
}

b { 
 font-family: georgia;
 font-size: 12px;
 color: black; 
 
}

#nav {
  /*position:absolute; 
  left: 467px;
  top: 0px;
  width:188px;*/
  text-align: left;
  width: 200px;
  padding: 20px;
  font-size: smaller;
  order:2;
}

.nav {
 font-family: arial; 
 font-size: 13px; 
 letter-spacing: 3px;
 color: black;
 background-image: url("images/nav.png");
 height: 16px;  
 width: 188px;
}

.head {
 font-family: georgia; 
 font-size: 15px; 
 letter-spacing:3px;
 color: black;
 background-image: url("images/head.png");
 background-repeat: no-repeat;
 height: 30px;  
 width: 188px; 
 padding-top: 7px;
 padding-left: 10px;
}

.head3 {
 font-family: arial; 
 font-size: 10px; 
 letter-spacing: 2px;
 color: black;
 background-color:#fb8332;
 text-align: center;
 height: 10px;  
 width: 440px; 
}

.head4 {
 font-family: arial; 
 font-size: 12px; 
 letter-spacing: 2px;
 color: black;
 background-color:#fb8332 ;
 text-align: center;
 height: 10px;  
 width: 440px; 
}

.cont {
 font-family: georgia; 
 font-size: 18px; 
 letter-spacing:3px;
 color: black;
 background-image: url("images/cont.png");
 background-repeat: no-repeat;
 /*height: 23px;  
 width: 448px; */
 padding-left: 15px;
}

A:link, a:visited {
 font-family: arial; 
 font-size: 12px; 
 letter-spacing: 3px;
 color: black;
 text-decoration:none;
}

A:hover {
 font-family: arial; 
 font-size: 12px; 
 letter-spacing: 5px;
 color: blue;
 text-decoration:underline;
}

.avatar { 
  float:left; 
  border: 2mm dashed pink; 
  margin: 5px 10px; 
}

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  height:20px;
  width:100%;
  background:pink;
  text-align: center;
  font-family: arial; 
  font-size: 12px; 
  letter-spacing: 5px;
  color: #f3e1e1;
}

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap; 
  }
  
  /*aside {
    width: 100%;
  }*/

/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
  main {
    order: 1;
  }
  
  #title{
    width: 100%;
    top:0px;
  }
  
  #quotation, #quotationshadow {
    width: 50%;
    top: 85px;
  }
  
  #nav ul {
   flex-wrap: wrap;
   /*margin-top: 0px;*/
   width: 100%;
   order: 2;
  }
}