:root {
  --BOX-SHADOW: hwb(0 100% 0% / 0.813) 5px 5px 0 0;
}

/* GENERAL FORMATTING */
* {
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

img {
  display: block;
}

/* FONT */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

p,
h1 {
  font-family: "Poopins", sans-serif;
  color: white;
  padding: 0;
  margin: 0;
}

body {
  /* background-color: black; /*  */
  background-image: url("assets/bg-defined.jpg");
  background-size: auto;
  min-width: none;
  padding: 0;
  margin: 0;
}

/* HEADER */
header {
  height: 100vh;
  position: relative;
}

.dept,
.set {
  font-size: 0.6rem;
}

.header-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-text {
  height: 10vh;
  background-color: hsl(0, 0%, 0%);
  padding-inline: 1rem;
}

.header-logo {
  font-size: 1.4rem;
  align-self: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

.header-image-container {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  height: 90vh;
  overflow-x: hidden;
  width: 100%;

  object-position: center;
}

/* LANDING PAGE */
.img-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-image: url("https://ik.imagekit.io/kay/animation01.png?updatedAt=1743623279454");

  background-position-x: 38%;

  animation: image-swipes cubic-bezier(1, 0, 0, 1) 30s 3s infinite;
  -webkit-animation: image-swipes cubic-bezier(1, 0, 0, 1) 30s 3s infinite;
  animation-fill-mode: forwards;
  will-change: background-image;
}

/* LANDING PAGE BACKGROUND IMAGE ANIMATION */
@keyframes image-swipes {
  0% {
    background-image: url("https://ik.imagekit.io/kay/animation01.png?updatedAt=1743623279454");
  }
  20% {
    background-image: url("https://ik.imagekit.io/kay/animation02.png?updatedAt=1743623279730");
  }

  40% {
    background-image: url("https://ik.imagekit.io/kay/animation03.png?updatedAt=1743623279503");
  }

  60% {
    background-image: url("https://ik.imagekit.io/kay/animation04.png?updatedAt=1743623279616");
  }

  80% {
    background-image: url("assets/animation/animation05-transformed.png");
  }

  100% {
    background-image: url("https://ik.imagekit.io/kay/animation01.png?updatedAt=1743623279454");
  }
}

/* OVERLAY ON EVERY SECTION AFTER LANDINNG PAGE TO DARKEN THE EFFECT OF THE BACKGROUND IMIAGE TO AID VISIBILITY */
.overlay-dark {
  position: absolute;
  top: 0%;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.268);
}

/* BUTTONS */
.to-top-button, /* BUTTON IN FOOTER */
.quantized-button  /* BUTTON IN HEADER */ {
  background-color: hsla(0, 0%, 0%, 0.4);
  backdrop-filter: blur(0.2em);
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Poopins", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: hsla(0, 0%, 100%, 0.813);

  width: 8rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0.6em;
  margin: 0;

  box-shadow: var(--BOX-SHADOW);
}

.quantized-button {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 3.5rem - 2px);
  --left-distance: calc(50% - 3.5rem - 2px);
}

.to-top-button:hover,
.quantized-button:hover {
  cursor: pointer;
  box-shadow: hwb(0 100% 20% / 0.813) 5px 5px 0 0;
}

.to-top-button:active,
.quantized-button:active {
  background-color: hsla(0, 0%, 0%, 0.8);

  box-shadow: hwb(0 100% 0% / 0.813) 1px 1px 0 0;
}

.quantized-button:active {
  bottom: calc(50%-4px);
  left: calc(var(--left-distance) + 2px);
}

.back-to-top-container {
  display: flex;
  justify-content: center;

  margin-top: 2rem;
}

/* ABOUT SECTION */
#about {
  height: 80vh;
  width: 100%;
  background-color: black;
  background-image: url("assets/drop.svg");
  /* background-image: url("assets/background.svg") */
}

.content {
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.89);
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.futo-logo {
  width: 30%;
  max-width: 150px;
  height: auto;
}

.about-primary-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 3rem;
}

.about-text {
  font-size: 0.5rem;
  color: hsla(0, 0%, 100%, 0.9);
  line-height: 0.7rem;
}

.about-text span {
  font-style: oblique;
  font-weight: 600;
}

/* GALLERY AND ABOUT HEADER */
.about-content h1,
.gallery-h1 {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
  color: hsla(0, 0%, 100%, 0.9);
}

/* GALLERY SECTION */

#gallery {
  height: fit-content;
}

.gallery-primary-container {
  height: max-content;
  padding-block: 3rem;
  background-color: hsl(0, 0%, 0%, 0.89);
}

.gallery-h1 {
  margin-bottom: 2rem;
}

.gallery-house {
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
  gap: 1rem;
  padding-inline: 0.5rem;
}

.images-container {
  display: flex;
  place-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.image-item {
  width: 20rem;
  aspect-ratio: 1;
  border: none;
  overflow: hidden;
  background-color: transparent;
}

.gallery-piece {
  width: 100%;
  aspect-ratio: 1;
  /*  height: 100%;
  width: 100%; */
  object-fit: cover;
  transition: all 300ms;
}

.gallery-piece:is(:hover, :focus) {
  cursor: pointer;
  transform: scale(1.05);
  transform: perspective(2);
}

.images-container a {
  overflow: hidden;
  flex-shrink: 1;
  /* max-width: 20rem; */
  width: 25%;
  aspect-ratio: 1;
}

/* .gallery-piece:hover,
.gallery-piece:focus {
  cursor: pointer;
  transform: scale(1.05);
  transform: perspective(2);
} */

/* FOOTER */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(0, 0%, 0%, 0.89);
  padding-bottom: 2rem;
}

footer p {
  font-size: 0.8rem;
}

footer a {
  color: wheat;
}

footer a:hover {
  cursor: pointer;
  color: hsl(39, 100%, 76%);
}

@media (max-width: 25rem) {
  .header-text {
    height: 10vh;
  }

  .header-image-container {
    height: 90vh;
  }
}

@media (min-width: 35rem) {
  /* ABOUT SECTION */
  .content {
    padding-inline: 2rem;
  }

  .about-text {
    font-size: 0.8rem;
    line-height: 1rem;
  }

  /* ABOUT AND GALLERY HEADER */
  .about-content h1,
  .gallery-h1 {
    font-size: 1rem;
  }
}

@media (max-width: 35rem) {
  .gallery-primary-container,
  .about-primary-container {
    padding-inline: 0rem;
  }
}

@media (min-width: 47rem) {
  /* HEADER */
  .dept,
  .set {
    font-size: 0.65rem;
  }

  .header-logo {
    font-size: 1.5rem;
  }

  /* ABOUT SECTION */
  .about-content h1,
  .gallery-h1 {
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .futo-logo {
    width: 30%;
    height: auto;
  }

  p.about-text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}