:root {
  --background-image: url("/images/eldora/eldorabg.jpg");
  --background-color: rgba(255, 255, 255, 0.5);
  --message-box-background: rgba(255, 255, 255, 0.5);
  --nav-button-font: calc(1.5vw + 1.5vh) "Jersey 25", sans-serif;
  --sidebar-button-font: calc(1.1vw + 1.1vh) "Jersey 25", sans-serif;
  --button-text-color: rgb(40, 51, 107);
  --text-color: rgb(196, 230, 250);
  --strip-banner-color: rgb(109, 118, 240);
  --strip-banner-font: "Girassol", serif;
  --main-outline: double rgb(196, 230, 250);
  --regular-box-shadow: 2px 5px 14px 3px rgba(0,0,0,0.75);
  --button-box-shadow: 0 0 20px #d2afffcc, inset 0 0 10px #ebe0fc;
}

.mainbody {
  background-image: var(--background-image);
}

/*Header*/
.mainheaderbox {
  background: var(--background-color);
  outline: var(--main-outline);
}

/*Navbar*/
.mainnavbar {
  font: var(--nav-button-font);
  background: var(--background-color);
  outline: var(--main-outline);
}

.maindropdown {
  color: var(--text-color);
}

.mainnavbutton {
  font: var(--nav-button-font);
  color: var(--button-text-color);
  background: rgba(56, 134, 108, 0);
  border: none;
}
.mainnavbutton:hover {
  background: var(--strip-banner-color);
  border-radius: 80%;
  box-shadow: var(--button-box-shadow);
}

.maindropdowncontent {
  background-color: var(--background-color);
  box-shadow: var(--regular-box-shadow);
  outline: var(--main-outline);
}
.maindropdowncontent a {
  color: var(--button-text-color);
}
.maindropdowncontent a:hover {
  background-color: var(--strip-banner-color);
  border-radius: 80%;
  box-shadow: var(--button-box-shadow);
}

/*Sidebar*/
.mainpagesidebar {
  background: var(--background-color);
  outline: var(--main-outline);
  color: var(--button-text-color);
}
.mainpagesidebar h2 {
  overflow-wrap: nowrap;
}
.mainpagesidebar span {
  text-decoration: underline;
}

.sidebarbuttonscontainer {
  background-color: transparent;
}

.sidebarbutton {
  font: var(--sidebar-button-font);
  background-color: var(--strip-banner-color);
}
.sidebarbutton:hover {
  background: var(--button-text-color);
  box-shadow: var(--button-box-shadow);
}
.sidebarbutton a {
  font: var(--sidebar-button-font);
  color: var(--text-color);
}

/*Main Content*/
.mainarticlecontainer {
  background: var(--background-color);
  outline: var(--main-outline);
}

.stripbanner {
  background-color: var(--strip-banner-color);
  font-family: var(--strip-banner-font);
  font-size: calc(1.5vw + 1.5vh);
}

.mainpagecontent {
  font-family: Georgia, serif;
}

.MessageBox {
  background: var(--message-box-background);
  outline: var(--main-outline);
}

.interests {
  background: var(--message-box-background);
  border: var(--main-outline);
}

.mainpagegrid {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  outline: var(--main-outline);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Eldora page~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.empirewelcome {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.empirelogo {
  width: 25%;
  display: block;
  margin: 20px;
}