@font-face {
  font-family: 'opensans-regular';
  src: url('./fonts/opensans/OpenSans-Regular-webfont.eot');
  src: url('./fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('./fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'),
       url('./fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'librebaskerville-italic';
  src: url('./fonts/librebaskerville/librebaskerville-italic-webfont.eot');
  src: url('./fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('./fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'),
       url('./fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 14px;
}

body {
  background: #0f0f0f;
  color: #838C95;
  font-family: 'opensans-regular', sans-serif;
}

main {
  position: relative;
  height: 100vh;
  width: 100%;
  background: #2b2b2b url(../images/background.jpg) no-repeat top center;
  background-size: cover !important;
  -webkit-background-size: cover !important;
  display: flex;
}

.box {
  padding: 30px;
  background-color: #2b2b2b;
  line-height: 30px;
  width: 66.6%;
  margin: auto;
  border: 5px solid #838C951A;
}

blockquote {
  margin: 30px 0px 10px 0px;
  padding-left: 40px;
  position: relative;
  color: #7a7a7a;
}

blockquote:before {
  content: "\201C";
  opacity: 0.45;
  font-size: 80px;
  line-height: 0px;
  margin: 0;
  font-family: arial, sans-serif;
  position: absolute;
  top:  30px;
  left: 0;
}

blockquote p {
  font-family: 'librebaskerville-italic', serif;
  padding: 0;
  font-size: 18px;
  line-height: 36px;
  margin-bottom: 5px;
}

footer {
  padding: 20px 30px;
  font-size: 12px;
}