@media (prefers-color-scheme:light) {
  :root {
    --buttoncolor: linear-gradient(#f08673, #f1524d);
    --buttoncolorhover: linear-gradient(#f1524d, #f08673);
    --bordercolor: #7a2c16;
    --bordercolorhover: #903301;
    --secondarycolor: linear-gradient(#eda74a, #c49918);
    --secondarybordercolor: #885c17;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --buttoncolor: linear-gradient(#d0382a, #901d10);
    --buttoncolorhover: linear-gradient(#f44532, #b62f14);
    --bordercolor: #8e1a0f;
    --bordercolorhover: #7a2c16;
    --secondarycolor: linear-gradient(#f09267, #c3ac38);
    --secondarybordercolor: #855d18;
  }
}
@media (orientation:landscape) {
  :root {
    --titlewidth: 60vw;
    --bannertop: -10%;
    --bannerright: -5%;
  }
}
@media (orientation:portrait) {
  :root {
    --titlewidth: 90vw;
    --bannertop: -30%;
    --bannerright: -5%;
  }
}
#merntitle {
  background-image: url(/img/mernncraftBackground.png);
  background-position: center;
  background-size: cover;
}
button#preorder {
  width: 8em;
  border-color: var(--bordercolor);
}
button#preorder:hover {
  border-color: var(--bordercolorhover);
  transition: 0.3s;
}
.titleimage {
  position: relative;
  width: var(--titlewidth);
  height: auto;
}
.titleimage img {
  height: inherit;
  width: inherit;
}
.banner#comingsoon {
  position: absolute;
  top: var(--bannertop);
  right: var(--bannerright);
  rotate: 20deg;
  background: var(--secondarycolor);
  border: 2px solid var(--secondarybordercolor);
  border-radius: 0.25em;
  color: #000000;
}
div.nomargin {
  margin: 0;
}