/* In CSS, in addition to the standard styling, I wrote a custom animation for fade-in and out that is used for the photo transitions. I also used a transition, ease-in-out, for the side drawer to make this function appear smooth.
I also animated the drawer menu to provide visual feedback when the user hovers. CSS displays the interactive elements and interaction feedback as this is only a partial website.
I encountered a problem while animating the side-drawer. I want the drawer to be on the top left corner so that it feels intuitive for the drawer to slide out from the left, but while animating, the drawer would cover the drawer button once it slides out. To fix this, I researched W3 Schools regarding z-index. By setting different index values for the button and drawer, I was able to achieve this interaction by overlaying the button on top of the drawer.
https://www.w3schools.com/cssref/pr_pos_z-index.php */

body {
  background-color: #2d3250;
  display: flex;
  text-align: center;
  margin: 60px;
  max-width: 1000px;
  align-items: baseline;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #e5e5cb;
  font-size: 1.1rem;
  gap: 1.5rem;
  justify-content: left;
}

.outer {
  margin-left: 400px;
  position: absolute;
  border: 1px dashed #f6b17a;
  width: 600px;
  /* min-height: 200px; */
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  opacity: 1;
}

#drawer-button {
  padding: 10px 30px;
  font-size: 1.3rem;
  border-radius: 12px;
  cursor: pointer;
  justify-content: left;
  background-color: transparent;
  border-color: #f6b17a;
  color: #e5e5cb;
  position: absolute;
  z-index: 1;
  transition: border-color 0.8s ease scale 0.7s linear;
  transition: transform 1s ease;
}

button:hover {
  scale: 0.95;
  border-color: cyan;
}

#side-drawer {
  justify-content: left;
  position: absolute;
  top: 0;
  left: -200px;
  width: 200px;
  min-height: 100vh;
  transition: translate 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  border-right: 3px dashed #f6b17a;
}

#side-drawer ul > li {
  padding: 30px;
}
#Home:hover {
  background-color: black;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
#Contacts:hover {
  background-color: black;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
#About-me:hover {
  background-color: black;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
#Others:hover {
  background-color: black;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
img:hover {
  cursor: pointer;
}

.caption {
  border: 1px dashed #f6b17a;
  justify-content: center;
  margin-left: 400px;
  position: absolute;
  bottom: 100px;
  width: 600px;
  white-space: normal;
}

#image {
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.directory {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  left: 1300px;
  position: absolute;
}

.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.thumbnail:hover {
  transform: scale(1.1);
}