/* Resets */
html, body, ul, li, h1, h2, p {
  margin: 0;
  padding: 0;
}


/* Declares font family, text colour and adds a subtle pattern to the background */
body {
	border:1px solid black;
  font-family: 'Quicksand', sans-serif;
  color: #333333;
  background-image: url('img/texture.png');
  -webkit-font-smoothing: antialiased;
  background-color: #E3E3E3
}


/* Make container centered in page and center text inside <div> */
.container {
  position: fixed;
  top:10%;
  width:100%;
  margin: 0;  
}


/* Makes image a circle and sizes it to 40% of the outside container */
.container img {
  width:100%;
	
  border-radius: 50%;
}


/* Clears bullet points and places <li> items next to each other instead of stacked on top and changes font */
li {
  display: inline;
  list-style: none;
  padding: 10px;
  font-family: 'Josefin Sans', monospace;
}


/* Remove default hyperlink styling, add our own colours and change font-size*/
a, a:visited {
  color:#F18651;
  font-size: 20px;
  text-decoration: none;
}

/* This changes the link colour when someone hovers their mouse over it */
a:hover {
  color: #be1522;
}

/* Style our header tags */
h1, h2 {
  font-weight: 700;
}

h1 {
  font-size: 32px;
  margin: 10px 0 0
}

h2 {
  font-size: 22px;
  color: #be1522;
}


/* Adds some space around our bio */
p {
  padding: 20px 0;
}


/* Style our 'available' and 'unavailable' classes */
.available, .unavailable {
  width: 100%;
  max-width:400px;
  margin:20px auto 20px;
  border-radius: 3px;
  padding: 14px 0;
}

.available {
  color: #333333;
  background-color: #ffffff;

}

.unavailable {
  color: #999;
  background-color: #eee;
}