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

@font-face {
    font-family: Glowist;
    src: url(assets/Glowist.otf);
}

@font-face {
    font-family: Rockmasta;
    src: url(assets/Rockmasta.otf);
}


/* Declares font family, text colour and adds a subtle pattern to the background */
body {
  font-family: 'Glowist', sans-serif;
  color: #ffffff;
  background: url('img/2.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
}


/* Make container centered in page and center text inside <div> */
.container {
  position: absolute;
  top:50%;
  left:50%;
  width:400px;  
  margin: -220px 0 0 -200px;  
  text-align: center;
}


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


/* Clears bullet points and places <li> items next to each other instead of stacked on top and changes font */
li {
  list-style: none;
  padding: 0 4px;
  font-family: 'Rockmasta';
}


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

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

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

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

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


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


/* 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: #2ecc71;
}

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