/* General stylesheet for every page / the base template */

/* Variables */
:root {
  /* --header-image: url("/images/header.png"); */
  /* --header-image2: url("/images/header_alt.png"); */
  --body-bg-image: url("");

  /* colors */
  --sidebar-background: #030303;
  --main-background: #030303;
  --box-bg: #000000;
  --box-border: #ab947e;
  --headers: #a39e80;
  --text-strong: #c3bb95;
  --links: #c3a995;
  --text: #aba17e;
  --main: #030303;
}

/* Reusable stuff */
.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.disabled > a {
  color: currentColor;
  display: inline-block;
  pointer-events: none;
  text-decoration: none;
}

h1,
h2,
h3 {
  color: var(--headers);
}

h1 {
  font-size: 25px;
}

strong {
  color: var(--text-strong);
}

hr {
  color: #3b2e29;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

textarea {
  width: 260px;
  height: 80px;
  background-color: var(--box-bg);
  border: 1px solid var(--box-border);
  color: var(--text);
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Base */

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

@font-face {
  font-family: Ubuntu;
  src: url("/Ubuntu-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: Ubuntu;
  src: url("/Ubuntu-Italic.ttf");
  font-style: italic;
}

@font-face {
  font-family: Ubuntu;
  src: url("/Ubuntu-BoldItalic.ttf");
  font-style: italic;
  font-weight: bold;
}

body {
  font-family: "Times new roman", serif;
  font-size: 18px;
  margin: 0;
  background-color: #030303;
  color: var(--text);
  background-image: var(--body-bg-image);
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

#content {
  background-color: #030303;
}

#container {
  max-width: 1300px;
  margin: 0 auto;
  background-color: #030303;
}

#container a {
  color: var(--links);
  /* font-weight: bold; */
}

#header {
  width: 100%;
  height: var(--header-height, 400px);
  background-image: var(--header-image, url("/images/header.jpg"));
  background-size: 100%;
  background-position: 90% 20%;
  background-repeat: no-repeat;
}

/* #header:hover {
  background-image: var(--header-image2);
} */

#flex {
  display: flex;
}

aside {
  background-color: var(--main);
  width: 300px;
  padding: 20px;
  font-size: smaller;
}

main {
  background-color: var(--main);
  padding: 20px;
  order: 2;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
}

#rightSidebar {
  order: 1;
}

footer {
  background-color: var(--main);
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}

.box {
  background-color: var(--box-bg);
  border: 1px solid var(--box-border);
  padding-left: 20px;
  padding-right: 20px;
  overflow: auto;
  height: 200px;
  text-align: justify;
}

/* ~~~ Sidebar ~~~ */

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#navigationImages {
  margin: 0 auto;
  position: relative;
  height: 300px;
  padding: 0;
  margin: 0;
}

.navItem a {
  display: block;
  text-indent: -999999px;
  height: 100%;
  width: 100%;
}

.navItem:not(.ignore-tooltip):hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 3;
}

.navItem {
  width: 352px;
  height: 352px;
  background-size: contain;
  filter: brightness(80%) sepia(30%);
}

.navItem.skull {
  background-image: url("/images/navigation/skull.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 150px;
  width: 140px;
  left: 40px;
  bottom: 0;
  clip-path: polygon(
    53% 0%,
    36% 3%,
    26% 9%,
    18% 17%,
    13% 28%,
    7% 31%,
    6% 43%,
    1% 51%,
    8% 58%,
    5% 65%,
    7% 70%,
    10% 70%,
    11% 75%,
    8% 76%,
    9% 82%,
    11% 89%,
    7% 95%,
    31% 99%,
    43% 95%,
    55% 94%,
    61% 96%,
    69% 73%,
    83% 71%,
    90% 61%,
    95% 45%,
    98% 31%,
    95% 19%,
    81% 7%,
    71% 4%
  );
}

.navItem.bottles {
  background-image: url("/images/navigation/bottles.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 200px;
  width: 120px;
  left: 160px;
  bottom: 0px;
  clip-path: polygon(
    52% 3%,
    61% 2%,
    67% 5%,
    69% 6%,
    72% 6%,
    71% 12%,
    72% 12%,
    75% 17%,
    75% 24%,
    77% 32%,
    96% 42%,
    97% 48%,
    98% 53%,
    97% 72%,
    95% 77%,
    94% 94%,
    75% 96%,
    49% 96%,
    42% 93%,
    40% 76%,
    37% 76%,
    35% 66%,
    26% 65%,
    28% 98%,
    6% 99%,
    2% 92%,
    1% 58%,
    10% 55%,
    9% 41%,
    10% 36%,
    13% 35%,
    7% 21%,
    9% 18%,
    17% 17%,
    22% 20%,
    20% 28%,
    18% 32%,
    20% 35%,
    20% 53%,
    26% 58%,
    36% 64%,
    33% 54%,
    37% 54%,
    32% 47%,
    45% 39%,
    51% 35%,
    50% 15%,
    53% 14%
  );
}

.navItem.thickBottle {
  background-image: url("/images/navigation/bottle.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 150px;
  width: 110px;
  left: -35px;
  bottom: 20px;
  clip-path: polygon(
    46% 2%,
    47% 12%,
    41% 15%,
    46% 18%,
    46% 40%,
    34% 46%,
    21% 51%,
    11% 60%,
    6% 71%,
    3% 80%,
    3% 93%,
    17% 97%,
    37% 99%,
    58% 99%,
    84% 96%,
    92% 94%,
    98% 80%,
    98% 70%,
    93% 59%,
    84% 51%,
    74% 45%,
    64% 41%,
    60% 37%,
    60% 18%,
    63% 17%,
    66% 14%,
    58% 12%,
    60% 11%,
    60% 2%,
    53% 1%
  );
}

.navItem.sparkles {
  background-image: url("/images/navigation/stars.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 150px;
  width: 250px;
  left: -10px;
  bottom: 160px;
}

.navItem.nav-bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.navItem.nav-bg span.empty-block {
  display: block;
  height: 100%;
}

#navigationImages:hover > .navItem:hover {
  transform: translateY(-3px);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#navigationImages:hover > .navItem:not(:hover) {
  filter: brightness(30%);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#updateList ul {
  padding: 0;
  list-style: none;
}

/* Media queries */
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
    min-width: auto;
  }

  aside {
    width: 100%;
  }

  /* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
  main {
    order: 1;
  }

  #rightSidebar {
    order: 2;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}

.eye {
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: contain;
  filter: sepia(80%);
}

.pupil {
  position: absolute;
  width: 30px;
  height: 30px;
  background: url("/images/pupil.png") center/contain no-repeat;
  display: none;
  filter: sepia(10%);
}

#eye-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure eye animation stays in the background */
  pointer-events: none; /* Allow clicks to pass through */
}

/* Image Grid for art gallery */
.gallery {
  display: flex;
  flex-flow: wrap;
}

.gallery-item {
  flex-grow: 1;
  min-width: 150px;
  border: 1px solid transparent;
  position: relative;
}

.gallery-item:before {
  content: "";
  padding-top: 100%;
  display: block;
}

.gallery-item__image {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;

  filter: brightness(50%) sepia(80%) grayscale(40%);
  transition: 0.7s;
}

.gallery-item__image:hover {
  filter: brightness(100%) sepia(0%) grayscale(0%);
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure this is higher than any other element */
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  position: absolute;
  width: 300px;
  top: -5px;
  left: 120%;

  padding: 6px 8px;

  opacity: 0;
  transition: opacity 0.7s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}