:root {
  --background-image: url("/images/jaibackground.webp");
  --background-color: rgba(54, 143, 124, 0.6);
  --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;
  --text-color: rgb(196, 230, 250);
  --strip-banner-color: rgb(13, 119, 161, 0.7);
  --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 rgba(0, 255, 255, 0.8), inset 0 0 10px rgb(102, 204, 255);
}

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

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

.cornervinesprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 23%;
  height: auto;
  object-fit: contain;
  box-sizing: border-box;
  transform: translateY(-10px);
  z-index: 3;
}

.cornervinespriteflipped {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1) translateX(-5px);
  z-index: 3;
}

.fireflysprite {
  position: absolute;
  top: 70%;
  left: 5%;
  width: 64px;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
  object-fit: contain;
  z-index: 5;
}

.fireflysprite.active {
  animation: fireflyBlink 2.8s infinite ease-in-out;
}

@keyframes fireflyBlink {
  0% {
    filter: drop-shadow(0 0 2px gold);
    opacity: 0.8;
  }
  40% {
    filter: drop-shadow(0 0 14px gold);
    opacity: 1;
  }
  60% {
    filter: drop-shadow(0 0 10px orange);
    opacity: 0.95;
  }
  100% {
    filter: drop-shadow(0 0 2px gold);
    opacity: 0.8;
  }
}
/*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(--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(--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(--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: rgb(6, 74, 114);
  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);
}