/* 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 {
  font-family: 'Montserrat', sans-serif;
  color: #2c3e50;
  background-image: url('img/texture.png');
  -webkit-font-smoothing: antialiased;
}


/* Make container centered in page and center text inside <div> */
.container {
  width:400px;  
  margin: 0px auto;  
  text-align: center;
  padding-top: 20px;
}


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


/* 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: 0 4px;
  font-family: 'Montserrat', sans-serif;
}


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

/* This changes the link colour when someone hovers their mouse over it */
a:hover {
  color: #0a3c6d;
  text-decoration: underline;
}

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

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

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


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

.finance {
  font-size: 10px;
  padding: 20px 0;
  font-style: italic;
  margin-top: 10px;
}

ul li a img {
  max-width: 50px !important;
}


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

.available {
  color: #fff;
  background-color: #0a3c6d;
}

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