html, body {
  font-family:"Archivo Black", Tahoma, Geneva, Verdana, sans-serif;
  color:#222;
}

.para-font{
  font-family: 'Times New Roman', Times, serif;
}

.tiny-icon{
  width: 30px;
  height: 30px;
}


.nice-blue{
  background: linear-gradient(135deg, #4f8cff, #6bc1ff);
  color: white;
}

.card-container{
  perspective: 1000px;
}

.podium{
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  /*transform: translateY(80px);*/
  transition: all 0.6s cubic-bezier(.2,.8,.2,1);
}

.gold{
  background: linear-gradient(
    145deg,
    #fff6b7,
    #fdd76b,
    #fbc531,
    #e1ad01,
    #c99700
  );
  color: #222;
  /*translate: 0px -50px;*/
}

.silver {
  background:
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0)),
    linear-gradient(145deg, #f5f7fa, #e4e7eb, #cfd4da, #b0b8c1, #8f9aa7);
  color: #222;
  /*translate: 0px -25px;*/
}

.bronze {
  background:
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0)),
    linear-gradient(145deg, #f6c7a1, #e0a96d, #cd7f32, #a65e2e, #7a431d);
  color: white;
}

.play-gradient {
  background:
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0)),
    linear-gradient(145deg, #e6f0ff, #cfe0ff, #e8e6ff);
  color: #333;
}

.pastel-catch {
  background:
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0)),
    linear-gradient(145deg, #ffd6e5, #ffb3d1, #ffc9a9);
  color: #333;
}

.gummy-gradient {
  background:
    linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0)),
    linear-gradient(145deg, #d9f7f8, #bfecee, #a8e0e6);
  color: #333;
}

.fish-gradient {
  background:
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0)),
    linear-gradient(145deg, #f4d6c6, #f2a7a0, #cfd8ff, #7fb3ff);
  color: #333;
}

.devlogs-gradient {
  background:
    linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0)),
    linear-gradient(145deg, #ff4ecb, #ff9a3c, #ffe44d, #3cffb5, #4d9cff);
  color: #222;
}

.button-grow{
  transition: all 0.3s ease;
}

.button-grow:hover {
  transform: scale(1.2);
}

.name-effect{
  transition: all 0.6s ease;
}

.name-effect:hover{
  letter-spacing: 5px;
}

a {
  text-decoration: none;
  color: inherit;
}

.first-card{
  height: 500px;
  width: 200px;
}

.podium-images{
  height: 20px;
  width: auto;
}

.podium-card {
  overflow: hidden;              /* IMPORTANT: clips image to rounded corners */
  background-blend-mode: overlay;
}

.podium-img-wrap {
  height: 325px;                 /* controls how much of the card is image */
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.podium-img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* fills container, crops nicely */
  display: block;                /* removes tiny gaps under images */
}

.gradient-bg{
  background: linear-gradient(
    120deg,
    #e6f7ff,
    #bfe9ff,
    #ffffff,
    #bfe9ff,
    #e6f7ff
  );

  background-size: 300% 300%;
  animation: gradientFlow 10s linear infinite;
}

@keyframes gradientFlow{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}