* {
  box-sizing: border-box;
}

html {
  cursor:url(https://static.tumblr.com/xjqjg7j/UJ8mxtr2b/01.png), auto;
}

body {
  background-color: #dbcfb1;
  color: #655057;
  font-family: MS UI Gothic, Helvetica, sans serif;
  font-size: 16px;
  line-height: 23px;
}

/*Text selection color - Code for Firefox */

::-moz-selection { 
  background-color: #dbcfb1;
}

::selection {
  background-color: #dbcfb1;
}

/*Layout image elements*/

#decor {
  background-image: url("https://blanketfort.neocities.org/lightsrepeat.gif");
  background-repeat: repeat-x;
  position: relative;
  top: 25px;
  width: 460px;
  height: 27px;
}

/* Main layout containers */

#page {
  margin: 0 auto;
  max-width: 700px;
  padding: 10px;
  text-align: left;
  display: flex;
  flex-wrap: wrap; /* allows the content and menu divs to stack when they no longer fit the screen */
}

#content {
  width: 460px;
  height: 370px;
  border: 1px solid #655057;
  background-color: #dfdfc3;
  padding: 15px;
  overflow-x: hidden;
}

#menu {
  width: 150px;
  margin-left: 14px;
  padding-top: 50px;
  flex-grow: 1; /* makes the #menu div stretch to fit the div containing it, the #page div  */
}

#menuicon {
  display: block;
  margin-right: 20px;
}

#menutable {
  table-layout: auto;
  padding: 0;
}

#menutable td {
  padding: 0px;
}

/* uncomment if using ul to format menu links

#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#menu li {
  list-style-type: none;
}

#menu a {
 color: #655057; 
 font-weight: normal;
}

#menu a:hover{ 
 color: #f6edcd; 
 font-weight: normal;
}

*/

/* Table styling */

#content-table {
  width: 100%;
}

#content-table ul {
  margin: 0;
  padding: 0;
}

#content-table td {
  text-align: left;
  padding: 10px;
}

#cozy-moods { /* the cozy corner table */
  table-layout: fixed; /*makes sure tds, tr, etc are equally sized */
  margin: 0 auto;
  border: 0px;
  width: 80%;
  text-align: center;
  color: #ffffff;
  border-spacing: 7px;
}

#cozy-moods tr {
  padding: 5px;
}

#cozy-moods td {
  border-radius: 10px;
}

#cozy-moods td:hover {
  background-color: white;
}


/*Text and image alignment*/

#profile { /* bio profile pic */
  float: right;
  padding: 10px 20px 0px 0px;
}

.thumbnail { /* cozy corner film still cover */
  float: left;
  padding: 0px 15px 0px 0px; /* top right bottom left */
}

.thumbnail img {
  width: 180px;
}

.thumbnail-book { /* cozy corner poster/book cover */
  float: left;
  padding: 0px 15px 0px 0px; /* top right bottom left */
}

.thumbnail-book img {
  width: 130px;
}

.center {
  text-align: center;
}

.justify {
  text-align:justify;
  text-justify: inter-word; 
}

/*Text styles*/

h1 {
  font-family: MS Sans Serif, Helvetica, sans serif;
  font-size: 23px;
  color: #6d8d8a;
  letter-spacing: 2px;
}

h2 {
  font-weight: bold;
  font-size: 14px;
  color: #d58353;
  text-transform: uppercase;
}

h3 { /* The P.S. and last updated footer */
  color: #c87e7e;
  font-size: 11px;
  text-align: right;
}

h4 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

hr {
  border: 1px solid #655057;
}

em {
  letter-spacing: 1px;
}

span {
 background-color: #f6edcd; 
}

blockquote {
  padding-left: 13px;
  border-left: solid 2px #d58353;
}

/* Link style */

a {
  text-decoration: none; 
  color: #aa8f68;
  font-weight: bold;
  cursor:url(https://static.tumblr.com/xjqjg7j/UJ8mxtr2b/01.png), auto;
}

a:hover {
  color: #f6edcd;
  background-color: #d58353;
}

a:active {
  cursor:url(https://static.tumblr.com/xjqjg7j/UJ8mxtr2b/01.png), auto;
}

#content ul {
list-style: circle outside url("brown-star-bullet.gif");
}

#content ul a {
  font-weight: normal;
}

#cozy-moods a {
  color: inherit;
  font-weight: normal;
}

#cozy-moods a:hover {
  background-color: inherit;
  border-bottom: solid 1px #fff;
}

/* Media queries */

@media only screen and (max-width: 700px) {
  #content {
    margin: 0px;
    order: 2; /* this will be stacked 2nd so the menu is stacked first */
  }
  
  #decor {
    top: 162px; /* moves the decor lower to line up with the top border of content div */
  }
  
  #menu {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 10px;
    display: flex; /* puts nav links beside the menu icon when screen size is less than 700px */
  }
  
  /* uncomment if using unordered list to format the menu:
  
  #menu li { the menu links are placed side by side when the screen size is less than 700px 
    display: inline;
  } 
  
  */

}