@font-face {
  font-family: "Almendra";
  src: url('../fonts/Almendra-Bold.otf') format("opentype");
  font-weight: bold;
}
@font-face {
  font-family: 'Kreon';
  src: url('../fonts/Kreon-Regular.ttf') format('truetype');
}
body {
  background: #000;
  height: 100%;
  overflow: hidden;
  width: 100%;
  color: #fafbd3;
  font: 18px/1.2 Kreon, Georgia, serif;
}
body::before, body::after {
  background-image: url('../images/textures/generic_dark.png');
  content: "";
  display: block;
  height: 100%;
  position: absolute;
    top: 0px;
    left: 0px;
  width: 100%;
  z-index: -2;
}
body::after {
  background-image: url('../images/vignette.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: -1;
}
.vignette {
  background: url('../images/vignettes/generic.png') no-repeat center;
  background-size: 100% 100%;
  height: 100%;
  position: absolute;
    top: 0px;
    left: 0px;
  width: 100%;
}
#frame {
  height: 768px;
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0% 0%;
  width: 1024px;
}
#frame > .scale_adjust {
  transform: scale(0.65);
  height: 154%;
  left: 0px;
  position: absolute;
  top: 0px;
  transform-origin: 0 0;
  width: 154%;
}
h1 {
  color: #f4c94a;
  font: bold 42px/48px Almendra, Georgia, serif;
}
a {
  color: rgb(223, 182, 70);
  text-decoration: none;
  transition: 0.3s ease;
}
a:hover {
  color: #ffd252;
  /*cursor: url('<%= asset_path 'cursors/hand_pointing.png' %>'),
    url('<%= asset_path 'cursors/hand_pointing.cur' %>'), pointer;*/
  text-shadow: 0px 0px 10px rgba(223, 182, 70, 0.7);
}
/* generic boxes */
.box, .mid_box, .thick_box {
  background: rgba(0,0,0,0.75);
  border: 1px solid #2f2e29;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
  color: #cbc39d;
  display: block;
  padding: 14px;
  position: relative;
}
/* deco box */
.deco_box {
  background: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 50px rgba(202,164,63,0.2);
  position: relative;
}
.deco_box::before, .deco_box::after {
  background: url('../images/deco-box-vertical.png') repeat-y;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 4px;
  z-index: 2;
}
.deco_box::before { left: 0px; top: 0px; }
.deco_box::after { right: 0px; top: 0px; transform: scale(-1); }
.deco_box > .top, .deco_box > .bottom, .deco_corners.top, .deco_corners.bottom, .black_torn_bg .top, .black_torn_bg .bottom  {
  display: block;
  position: absolute;
    left: 0px;
  width: 100%;
  z-index: 3;
}
.deco_box > .top, .deco_box > .bottom , .black_torn_bg .top, .black_torn_bg .bottom {
  background: url('../images/deco-box-horizontal.png') repeat-x;
  height: 4px;
}
.deco_box > .top, .deco_corners.top, .black_torn_bg .top { top: 0px; }
.deco_box > .bottom, .deco_corners.bottom, .black_torn_bg .bottom { bottom: 0px; }
.deco_corners.top::before, .deco_corners.top::after, .deco_corners.bottom::before, .deco_corners.bottom::after {
  background: url('../images/deco-box-corners.png') no-repeat;
  content: "";
  display: block;
  height: 46px;
  position: absolute;
  width: 46px;
}
.deco_corners.top::before, .deco_corners.top::after {   background-position: 0px -46px; }
.deco_corners.top::before { left: -1px; top: -1px; }
.deco_corners.top::after { right: -1px; top: -1px; transform: scaleX(-1); }
.deco_corners.bottom::before { left: -1px; bottom: -1px; }
.deco_corners.bottom::after { right: -1px; bottom: -1px; transform: scaleX(-1); }
/* small variant */
.deco_corners.small.top::before, .deco_corners.small.top::after, .deco_corners.small.bottom::before, .deco_corners.small.bottom::after {
  background-image: url('../images/deco-box-corners-simpler.png');
  height: 23px;
  width: 22px;
}
.deco_corners.small.top::before, .deco_corners.small.top::after {   background-position: 0px -23px; }
/* fancy variant */
.deco_corners.fancy.top::before, .deco_corners.fancy.top::after, .deco_corners.fancy.bottom::before, .deco_corners.fancy.bottom::after {
  background: none;
}
/* fancy errors */
.fancy_error_message {
  font-size: 28px;
  left: 50%;
  min-height: 200px;
  padding: 20px 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}
.fancy_error_message .error_icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.fancy_error_message .error_icon {
  padding-left: 40px;
  width: 130px;
}
.fancy_error_message .error_text {
  padding: 0 40px;
}
.fancy_error_message .error_text.has_icon {
  padding: 0 40px 0 210px;
}
.fancy_error_message .buttons_background {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 3;
}
.something_went_wrong {
  color: red;
}