:root {
    --text-light: #e2e2e2;
    --text-dark: #1d1d1d;
    --color-grey: #111111;
    --grey: #111111;
    --black: rgb(25, 25, 25);
    --purple: #9600ff;
    --purple-hover: #6400ac;
    --blue: #7253ff;
    --blue-hover: #5239c2;
    --cyan: #0099ff;
    --cyan-hover: #006db6;
    --red: #ff0000;
    --red-hover: #c00000;
    --pink: #e100ff;
    --pink-hover: #a200b8;
    --navbar-button-highlighted: rgba(183, 0, 255, 0.185);
    --background-image: url(background.png);

    --sidenav-width: 10%; /* keep in sync with your .sidenav width */
    --transition-speed: 1500ms;
}


  /* reset & safe box-sizing */
  * { box-sizing: border-box; }
  html, body {margin: 0; }

html{
    width: 100%;
    width: 90%;
    height: 100%;
    margin-bottom: 10%;
    margin: 1%;
    overflow: auto;
    background: var(--color-grey);
}

html.sidenav-hidden {
  --sidenav-width: 0; /* override the inherited variable */
  width: 99%;
}

body{
    margin-left: var(--sidenav-width);
    margin-right: 15%;
    transition: margin-left var(--transition-speed) cubic-bezier(.2,.9,.2,1);
    box-sizing: border-box;    
    padding: 25px;
    background-image: var(--background-image);
    min-width: 99%;
    min-height: 96%;
    border:50px var(--color-grey);
    border-radius: 25px;
}

h1 {
    color: var(--text-main);
    font-weight: bolder;
    }

h3 {
    font-size: xx-large;
    font-weight: bold;
    color: var(--purple);
    text-shadow: 2px 2px #111111;
}

p {
    color: #818181;
}


/* sidenavbar content */

.sidenav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidenav-width);
  transform: translateX(0);
  transition: transform var(--transition-speed) cubic-bezier(.2,.9,.2,1), opacity 180ms;
  will-change: transform, opacity;
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--color-grey); /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 5%;
  overflow: auto;
}

.sidenav-hidden .sidenav {
  transform: translateX(-100%);
}

.sidenav-hidden .body {
    margin-left: 0; /* main expands to fill the page */
}

.sidenav-toggle {
  position: fixed;
  width: var(--toggle-size);
  height: var(--toggle-size);
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  z-index: 9999;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.sidenav-account {
  position: absolute;
  bottom: 1%;
  width: 100%;
  left:0%;
}

.sidenav-account a:hover{
    padding: 6px 8px 6px 16px;
  padding-left: 15%;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  overflow: auto;

}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  padding-left: 15%;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  overflow: auto;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* make the active sidebar link visible */
.sidenav .nav-link.active {
  color: white;     /* color of the text when selected */
  font-weight: 700;
  background: var(--navbar-button-highlighted);
  /* border-left: 4px solid var(--purple);
  padding-left: calc( (15%) - 4px ); */
}

/* make the nav links look like buttons and grow on hover */
.sidenav .nav-link,
.oauth-btn  {
  display: inline-flex;
  width: 75%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;      /* compact button padding */
  margin: 0.4rem 1rem;         /* spacing between buttons */
  font-size: 1.1rem;           /* keep it readable */
  color: #c0c0c0;            /* color of the text */
  text-decoration: none;
  background: transparent;
  border-radius: 0.5rem;
  transition: transform 160ms cubic-bezier(.2,.9,.2,1),
              background-color 160ms ease,
              box-shadow 160ms ease,
              color 160ms ease;
  transform-origin: left center; /* grow to the right so the sidebar doesn't jump */
  cursor: pointer;
  will-change: transform;
  outline: none;
}

/* subtle hover/focus effect: grow slightly, lift, and change bg */
.sidenav .nav-link:hover,
.sidenav .nav-link:focus,
.oauth-btn:hover {
  transform: scale(1.06);
  color: #ffffff;                           /* color of text when highlighted*/
  background-color: var(--navbar-button-highlighted); /* color of button when hovered */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}



/* Style page content */
.main {
    background: fixed;
}
    
/* ---------- Gallery styles (paste at end of styles.css) ---------- */
.gallery-card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-card:focus,
.gallery-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.gallery-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* placeholder for missing images */
.gallery-card .missing {
  width:100%;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#efefef;
  color:#777;
  border-radius:0.5rem;
}

/* fullscreen overlay used by the gallery */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
}
.fullscreen-overlay img {
  max-width: 95%;
  max-height: 95%;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* small responsive tweak */
@media (max-width: 480px) {
  .gallery-card img { height: 140px; }
}