.title-card {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

body {
  font-family: sans-serif;
  color: white;
}

.extrabig {
    font-size: 80px;
}


.credit-positioner {
  position: absolute;
  bottom: 30px;
  display: flex;
  justify-content: space-evenly;

  width: 100%;
}

.pink {
  color: pink;
}

.blue {
  color: skyblue;
}
/* Tooltip container */
  .credit {
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;  /* If you want dots under the hoverable text */
  }
  

  a {
    text-decoration: none;
  }







  body {
    background: black;
    min-height: 100vh;
    margin: 0;
  }
  
  .container {
    position: fixed;
    width: 910px;
    height: 158px;
    top: 50%;
    left: 50%;
    transform-origin: center top;
    transform: translate(-50%, -50%);
  }
  
  .triangle {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    width: 182px;
    height: 158px;
    overflow: hidden;
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  }
  
  .color {
    background: linear-gradient(#43c0ac, transparent 70%),
      linear-gradient(31deg, #d195f9, transparent 70%),
      linear-gradient(-31deg, #fa0559, transparent 70%);
    transform-origin: right bottom;
    animation: rotate 9s infinite ease-out;
  }
  
  .gray {
    background: lightgrey;
  }
  
  @keyframes rotate {
    10% {
      transform-origin: right bottom;
      transform: rotate(120deg);
      left: 0;
      top: 0;
    }
    11% {
      transform-origin: center top;
      transform: rotate(120deg);
      left: 273px;
      top: 158px;
    }
    20% {
      transform-origin: center top;
      transform: rotate(240deg);
      left: 273px;
      top: 158px;
    }
    21% {
      transform-origin: left bottom;
      transform: rotate(240deg);
      left: 546px;
      top: 0;
    }
    30% {
      transform-origin: left bottom;
      transform: rotate(360deg);
      left: 546px;
      top: 0;
    }
    31% {
      transform-origin: right bottom;
      transform: rotate(360deg);
      left: 546px;
      top: 0;
    }
    40% {
      transform-origin: right bottom;
      transform: rotate(480deg);
      left: 546px;
      top: 0;
    }
    41% {
      transform-origin: center top;
      transform: rotate(480deg);
      left: 819px;
      top: 158px;
    }
    60% {
      transform-origin: center top;
      transform: rotate(780deg);
      left: 819px;
      top: 158px;
    }
    61% {
      transform-origin: left bottom;
      transform: rotate(780deg);
      left: 637px;
      top: 0;
    }
    80% {
      transform-origin: left bottom;
      transform: rotate(780deg);
      left: 0;
      top: 0;
    }
    81% {
      transform-origin: left bottom;
      transform: rotate(780deg);
      left: 0;
      top: 0;
    }
    100% {
      transform-origin: left bottom;
      transform: rotate(1080deg);
      left: 0;
      top: 0;
    }
  }
  
  .tr-1 {
    left: 182px;
  }
  .tr-2 {
    left: 364px;
  }
  .tr-3 {
    left: 546px;
  }
  .tr-4 {
    left: 728px;
  }
  
  @media only screen and (max-width: 1200px) {
    .container {
      transform: translate(-50%, -50%) scale(0.7);
    }
  }
  @media only screen and (max-width: 800px) {
    .container {
      transform: translate(-50%, -50%) scale(0.4);
    }
  }
  @media only screen and (max-width: 520px) {
    .container {
      transform: translate(-50%, -50%) scale(0.28);
    }
  }