/* Style sheet */

@font-face {
  font-family: "Lobster";
  src: url('fonts/Lobster/Lobster-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Roboto";
  src:
  url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Black.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Light.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}

body.style-1 {
  font-family: "Roboto";
  width: 80%;
  margin: auto;
}

h1 { font-family: "Lobster"; }

p { color: #444; }

a { text-decoration: none; }

button {
  margin: 4px 0px;
  padding: 8px;
  background-color: #3BAD5F;
  color: #fff;
  border-radius: 10px;
  border: 0;
  font-family: "Roboto";
  font-size: 120%;
}

button:hover { box-shadow: 6px 6px; }

.name {
  font-size: 200%;
  padding: 12px;
  background-color: #eee;
  border: thin #ededed;
  display: block;
  clear: both;
  margin-bottom: 20px;
  font-family: "Lobster";
}

.blue { color: blue; }
.red { color: red; }
.green { color: green; }
.black { color: black; }

.bold { font-weight: bold; }
.italic { font-style: italic; }
.small-caps { font-variant: small-caps; }