/* Card hover animation */

.card:hover {
  background: rgb(255, 255, 255, 0.5);
}

h1 {
  font-size: clamp(1.4rem, 8vw, 2rem); 
}

h1.card {
  background: rgb(255, 255, 255, 0);
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  font-size: clamp(1rem, 6vw, 1.8rem); 
}

p.card {
  font-size: clamp(0.5rem, 3.8vw, 1rem); 
}

.grid > a:nth-child(-n + 8) {
  transform: rotateY(3deg);
}

.grid > a:nth-child(n + 16) {
  transform: rotateY(-3deg);
}

.grid > a:nth-child(-n + 8) > .card:hover {
  transform: scale(1.04) translateX(10px);
}

.grid > a:nth-child(n + 16) > .card:hover {
  transform: scale(1.04) translateX(-10px);
}

/* Salesforce logo hover animation */

.sfdclogo {
  transition: 0.1s;
}
.sfdclogo:hover {
  opacity: 0.8;
}

/* Hide scrollbars during loading animation */

@-webkit-keyframes showScrollbars {
  99% {
    overflow: hidden;
  }
  100% {
    overflow: auto;
  }
}
@keyframes showScrollbars {
  99% {
    overflow: hidden;
  }
  100% {
    overflow: auto;
  }
}

body {
  overflow: hidden;
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 14 * var(--between-delay)
  );
  -webkit-animation: showScrollbars var(--duration) ease 0s forwards;
  -moz-animation: showScrollbars var(--duration) ease 0s forwards;
  -ms-animation: showScrollbars var(--duration) ease 0s forwards;
  animation: showScrollbars var(--duration) ease 0s forwards;
}

/* Card loading animation */

:root {
  --base-duration: 2s;
  --overall-delay: 0s;
  --between-delay: 0.2s;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(80vh);
  }
  20% {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(80vh);
  }
  20% {
    opacity: 1;
  }
}

.grid > a:nth-child(2) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 0 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(3) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 1 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(4) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 2 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(5) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 3 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(6) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 4 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(7) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 5 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(8) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 6 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(18) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 0 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(19) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 1 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(20) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 2 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(21) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 3 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(22) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 4 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(23) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 5 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}

.grid > a:nth-child(24) {
  --duration: calc(
    var(--base-duration) + var(--overall-delay) + 6 * var(--between-delay)
  );
  -webkit-animation: appear var(--duration) ease 0s forwards;
  -moz-animation: appear var(--duration) ease 0s forwards;
  -ms-animation: appear var(--duration) ease 0s forwards;
  animation: appear var(--duration) ease 0s forwards;
}