body {
  overflow: hidden;
}
:root {
  font-size: 10px;
  --white: rgb(232, 239, 243);
  --black: rgb(15, 15, 15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Franklin Gothic Medium';
}

body {
  background: var(--black);
  color: var(--white);
}

#wrapper {
  width: 100%;
  height: 95vh;
  position: relative;
  overflow: hidden;
}

.text {
  font-family: 'Franklin Gothic Medium';
  font-size: 24rem;
  font-weight: bold;
  color: var(--white);
  user-select: none;
  text-transform: uppercase;

  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) translateY(-50px);
  rotate: -15deg;
}

.base-anim {
  animation: up-down 2.5s ease-in-out infinite alternate,
    rotate 5s ease-in-out infinite alternate;
}

#alek {
  background: linear-gradient(
    90deg,
    rgb(194, 11, 11),
    rgb(197, 9, 244),
    rgb(0, 64, 255)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: max-content;
}

@keyframes up-down {
  0% {
    transform: translate(-50%, -50%) translateY(-50px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(50px);
  }
}

@keyframes rotate {
  0% {
    rotate: -15deg;
  }
  100% {
    rotate: 15deg;
  }
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
}

.card-outer {
  padding: 20px;
  overflow: hidden;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
  position: relative;
}

.card-inner {
  width: 100%;
  height: 100%;
  background: rgb(14, 14, 14);
  position: relative;
  z-index: 3;
}

.spinning-border {
  background: linear-gradient(
    90deg,
    rgb(194, 11, 11),
    rgb(197, 9, 244),
    rgb(0, 204, 255)
  );

  position: absolute;
  z-index: 2;
  inset: 0;
  scale: 2.5;

  animation: spin 5s linear infinite;
}
  
@keyframes spin {
    from {
      rotate: 0deg;
    }
    to {
      rotate: 360deg;
    }
}