@font-face {
  font-family: byte;
  src: url('/fonts/byte.ttf');
}

:root {
  --bgc01: #122; /* Old version*/
  --dark: #1A2533;
  --primary-color: #3498db; /* Not Implemented */
  --ugly-color: #4d442e;
  --font-size: 16px; /* Not Implemented */
  --fontc-main: goldenrod;
  --fontc-secondary: red;
  --white: 214 20% 93%;
  --pink-light: 345 80% 40%; /* Not Implemented */
  --yellow-light: 42 100% 50%; /* Not Implemented */
  --green-light: 164 95% 43%; /* Not Implemented */
  --pink-dark: 345 80% 69%; /* Not Implemented */
  --yellow-dark: 42 100% 70%; /* Not Implemented */
  --green-dark: 164 95% 43%; /* Not Implemented */
  --pink: var(--pink-light); /* Not Implemented */
  --yellow: var(--yellow-light); /* Not Implemented */
  --green: var(--green-light); /* Not Implemented */
  --accent: var(--pink); /* Not Implemented */
  --text: var(--dark); /* Not Implemented */
  --background: var(--dark);
  --easing-bounce: cubic-bezier(.53,-.55,.64,1.63); /* Not Implemented */
  --stop-1: 20%;
  --stop-2: 40%;
  --stop-3: 60%;
  color-scheme: light dark;
}

/* NOT IMPLEMENTED */
.accentbg {
  background-image: linear-gradient(to left,:whsl(var(--green)),hsl(var(--green)) var(--stop-1),hsl(var(--yellow)) var(--stop-1),hsl(var(--yellow)) var(--stop-2),hsl(var(--pink)) var(--stop-2),hsl(var(--pink)) var(--stop-3),transparent var(--stop-3));
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 10%;
}

html, body {
  background-color: var(--background);
  color: var(--fontc-main);
  font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 200;
  margin: 0;
  overflow: clip;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}


/* Navbar styling */
.navbar {
    width: 100%;
    height: 30px;
    background-color: var(--ugly-color); /* Slightly lighter than #112222 */
    display: flex;
    align-items: center;
}
.navbar.active {
  height: 60px;
  transition: height 0.4s ease;
}

/* Logo styling */
.navbar .logo {
    height: 100%;
}

.navbar .logo img {
    height: 100%;
    max-height: 64px; /* Ensuring the logo fits within the navbar */
}

/* Navigation links */
.navbar ul {
    list-style: none;
    display: flex;
    margin-left: auto; /* Pushes the navigation links to the right */
    margin-right: 4rem;
}

.navbar ul li {
    margin-left: 20px;
}

.navbar ul li a {
    text-decoration: none;
    color: #f5f5f5;
    font-size: 16px;
    padding: 10px;
    transition: color 0.3s;
}

.navbar ul li a:hover {
    color: #daa520; /* Goldenrod color on hover */
}

.showcase {
  width: 100%;
  height: auto;

}

.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(400px, auto));
  grid-auto-rows: 1fr;
  gap: 2px;
  padding: 4px;
  box-sizing: border-box;
  width: 100%;
}

.gallery {
  position: relative;
  background-color: #111;
  aspect-ratio: 1 / 1;
  display: flex;
  height: 100%;

  justify-content: center;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.gallery.active {
  grid-column: 1 / -1; /* Span all columns */
  grid-row: 1 / -1;    /* Span all rows */
  transform: scale(1);
  z-index: 2;          /* Bring to front */
}

.gallery.inactive {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

/* Optional: Add hover effects */
.gallery:hover {
  background-color: #1c1c1c;
  cursor: pointer;
}

.gallery:hover .gal-extra {
  opacity: 1;
}

.gal-extra {
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,.66);
  position: absolute;
  font-size: 70%;
  opacity: 0;
  transition: opacity 1s;
}

.gal-extra h1 {
  margin: 0 2rem;
  padding: 0;
}

.gal-extra p {
  margin: 0 2rem;
  padding: 0;
}


.gallery img {
  max-width: none; /* Ensures that the image isn't constrained by default max-width settings */
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.55); /* Centers the image and scales it down */
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

/* Optional: Add hover effects */
.gallery:hover img {
  transform: translate(-50%, -50%) scale(0.95); /* Slightly zooms the image on hover */
  transition: transform 9.25s cubic-bezier(0.04, 0.5, 0.5, 1);

}






footer {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  color: goldenrod;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: small;
  height: 1.5rem;
  padding: .25rem .25rem;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

footer.expanded {
  height: 5rem;
}

footer .left {
  flex: 1;
}

footer .right {
  white-space: nowrap;
}

footer .right p {
  margin: .25rem .5rem;
}

footer #tb {
  width: 100%;
  background-color: transparent;
  color: goldenrod;
  border: none;
  outline: none;
  padding: 5px;
  box-sizing: border-box;
}

footer #tb:focus {
  outline: none;
  border-bottom: 1px solid goldenrod;
}

footer.enlarged {
  height: 12rem;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
footer.enlarged:hover {
  height: 15rem;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#long-status p{
  color: red;
  font-family: byte;
}

@media screen and (max-width: 700px) {
  .navbar {
    font-size: 70%;
  }
}