/* title text */
@font-face {
  font-family: pfefferBold;
  src: url('../fonts/pfeffer-simpelgotisch-bold.otf');
}

/* title first letter */
@font-face {
  font-family: pfefferBold;
  src: url('../fonts/pfeffer-simpelgotisch-bold.ttf');
}

body
{
  font-family:'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  background-color: #1e1e28;
  color: #c5c5c5;
}

.title
{
  font-family:'pfefferBold', serif;
  color: #B9A64B;
  font-size: 40px;
}

.title .first-letter
{
  font-family:'steelplateTextura', 'pfefferBold', serif;
  color:#1E1E28;
  text-shadow: #B9A64B 1px 1px, #B9A64B -1px 1px, #B9A64B -1px -1px, #B9A64B 1px -1px;
  font-size: 40px;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

.modal{
  margin-top: 5em;
}

.histoire{
  margin-top: 0.6em;
}

#change_interface{
  display: none;
  background-color: #1E1E28;
  border: none;
  margin-top: 4px;
  margin-left: 0px;
}

.part{
  margin-top: 8em;
}

.part2{
  margin-top: 30%;
  left : 4% !important;
  font-size: 1.5em !important;
}

#change_interface{
  left: 300px !important;
}