@font-face {
  font-family:"LifeCraft";
  src:url("../media/fonts/LifeCraft_Font.ttf");
}

@font-face {
  font-family:"SourceSansPro";
  src:url("../media/fonts/SourceSansPro-Regular.ttf");
}

html { height:100%; }

body {
  background-image: linear-gradient(#0E303C, #000000);
  font-size:1vw;
  margin:0;
  overflow:hidden;
  padding:0;
}

h1 {
  color:#e6b535;
  font-family:LifeCraft;
  font-size:2vw;
  margin:0 0 1vw 0;
  text-align:center;
  text-shadow:0.07vw 0.07vw 0.1vw #000000;
}

h2, h3 { 
  margin:0;
  text-align:center; 
}

div { border-sizing:border-box; }

p { margin:0; }

a {
  color:#000000;
  text-decoration:none;
}

/* ------ */
/* HEADER */
/* ------ */

#header {
  background-color:#E5D5B3;
  border-bottom:0.2vw solid #D2A569;
  color:#e6b535;
  font-family:LifeCraft;
  font-size: 3vw;
  padding:1.3vw 0 1vw 1vw;
  text-align:center;
  text-shadow:0.07vw 0.07vw 0.1vw #000000;
  user-select:none;
}

#logo img {
  display:block;
  margin:0 auto 0 auto;
}
#logo img:nth-of-type(1) { width:25vw; }
#logo img:nth-of-type(2) { width:15vw; }

#menu {
  background-color:#FAECCF;
  border-bottom:0.2vw solid #D2A569;
  color:#e6b535;
  font-family:LifeCraft;
  font-size:1.5vw;
  height:3vh;
  text-align:center;
  text-shadow:0.07vw 0.07vw 0.1vw #000000;
  user-select:none;
}

#menu table { 
  border-collapse:collapse; 
  margin:0 auto 0 auto;
}
#menu td { 
  border-right:0.1vw solid #D2A569; 
  cursor:pointer;
  height:3.1vh;
  padding:0 0.5vw 0 0.5vw; 
}
#menu td:hover { background-color:#D2A569; }

/* ----------------- */
/* BACKGROUND IMAGES */
/* ----------------- */

#background-images img { 
  position:absolute; 
  user-select:none; 
}
#background-images img:nth-of-type(1) {
  left:0;
  top:8vh;
  width:25vw;
}
#background-images img:nth-of-type(2) {
  left:0;
  top:55vh;
  width:19vw;
}
#background-images img:nth-of-type(3) { 
  right:3vw;
  top:8vh;
  width:19vw; 
}
#background-images img:nth-of-type(4) { 
  right:0; 
  top:50vh;
  width:25vw;
}

/* ------- */
/* CONTENT */
/* ------- */

#content-outer-1 {
  background-color:#858079;
  border:0.1vw dashed #231D14;
  border-top:0;
  margin:0 25vw 0 25vw;
  padding:0 0.1vw;
  width:50vw;
}

#content-outer-2 {
  background-color:#D2A569;
  border:0.3vw double #A77541;
  border-top:0;
  padding:0 0.2vw;
}

#content-outer-3 {
  background-color:#E5D5B3;
  border:0.1vw ridge #A77541;
  border-radius:0.2vw;
  min-height:76vh;
  max-height:76vh;
  overflow-y:auto;
  padding:1vw;
}

.content-inner {
  background-color:#FAECCF;
  border-radius:0.2vw;
  font-family:SourceSansPro;
  margin:0 1vw 1vw 1vw;
  padding:1vw 2vw 1vw 2vw;
}

/* ----- */
/* OTHER */
/* ----- */

.button {
  background-color:#E8DABC;
  border:0.1vw solid #A77541;
  border-radius:0.5vw;
  cursor:pointer;
  font-family:SourceSansPro;
  font-size:0.8vw;
  padding:0.2vw;
  user-select:none;
}
.button:hover { background-color:#D2A569; }

.form-center {
  display:flex;
  justify-content:center;
}