/* :root {
  --img-hover-trans-time: 0.6s;
} */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  width: 100vw;
}
#main {
  height: 100%;
  width: 100%;
  padding: 20px;
  background: linear-gradient(
    -45deg,
    #ff7e5f 0%,
    rgb(32, 31, 31) 20%,
    black 40%
  );
  overflow: auto;
  text-align: center;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  background-color: black;
  color: white;
}
#main > * {
  /* flex-shrink: 1; */
  margin-bottom: 20px;
}
#main > *:last-child {
  margin-bottom: 0;
}
/* #img-div {
   flex: 1; 
} */
.card-container {
  width: 50%;
  margin: auto;
  position: relative;
  background-color: transparent;
  perspective: 5000px;
  cursor: pointer;
  /* height: calc(100% - 48px); */
}
.inner-card {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  min-height: 300px;
}

.card-container:hover .inner-card {
  transform: rotateY(180deg);
}

.front-inner-card,
.back-inner-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back-inner-card {
  transform: rotateY(180deg);
}
#img-div {
  width: 100%;
}
img {
  display: block;
  margin: auto;
  min-width: 200px;
  max-width: 625px;
  max-height: 100%;
}
#img-caption {
  margin-top: 10px;
  margin-bottom: 20px;
  font-style: italic;
}
#tribute-link {
  font-size: 20px;
}
#img-caption {
  /* transition: all 6s; */
  transition: opacity 0.25s ease-in-out;
  opacity: 1;
}
#tribute-link {
  color: white;
}
#tribute-info {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
#tribute-info > p {
  text-align: justify;
}

@media screen and (max-width: 600px) {
  img {
    max-width: 167px !important;
    height: auto !important;
    object-fit: contain;
  }
}