Dino Winchester

- --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
+ --pseudo-offset: calc(0px - (var(--pseudo-size) / 2));

- --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
+ --pseudo-offset: -8px;

.leftS{
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftS{
    display: flex;
    justify-content: center;
}

.leftS * {
    position: relative;
    left: 30px;
}

.msgContainer {
- position: relative:
+ position: relative;
}

.description {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<td class='description'>
  <div class="textbox">
    <span> TEXT </span>
  </div>
</td>

.textbox {
  width: 100%;
  display: inline-grid;
}

.textbox span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<td class='description'>
  <div class="textbox"> TEXT </div>
</td>

.textbox {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.is-active {
     animation-name: shake;
     animation-direction: alternate;
     animation-duration: 1s;
     animation-iteration-count: 4;
}

@keyframes shake {
     from {
          transform: translateX(0px);
     }
     to {
          transform: translateX(150px);
     }
}

const button = document.querySelector(".button");

button.classList.add("is-active");

button.addEventListener("animationend", (event) => {
     event.stopPropagation();
     button.classList.remove("is-active");
}, { once: true });

<div class="container text-uppercase">
    <p class="text curley">Hello</p>
    <div class="group">
      <p class="text web">Hello</p>
      <p class="text dev">Hello</p>
    </div>
    <div class="hide-text"></div>
  </div>

.container {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

.text {
     --sw-1: drop-shadow(0 0 1px black);
     --sw-2: drop-shadow(0 0 2px red);
     font-family: "Orbitron", sans-serif;
     background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
     -webkit-text-stroke: 3px cyan;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 900;
     font-size: 4.1em;
     text-align: center;
     text-transform: uppercase;
     filter: var(--sw-1) var(--sw-1) var(--sw-2) var(--sw-2);
     opacity: 0;
     margin: 0;
}

.group {
     display: flex;
     gap: 10px;
     justify-content: center;
}

.curley {
     animation: bg-shift 1s infinite linear alternate, 
                scale 750ms ease-in forwards 3.5s, 
                jump 500ms ease-out forwards 5.7s, 
                blur-in 300ms linear 3.5s,
                zoom 4s ease-in-out 6.25s, 
                flip 500ms linear forwards 8s;
}

.web {
     animation: bg-shift 1s infinite linear alternate, 
                scale-angle1 3s ease-in-out forwards 2s, 
                blur-in 500ms linear 2s, 
                rotate-up1 250ms ease-out forwards 5.7s,
                zoom 1.5s ease-in-out 6.25s, 
                flip 500ms linear forwards 8.5s;
}

.dev {
     animation: bg-shift 1s infinite linear alternate, 
                scale-angle2 3s ease-in-out forwards 2s, 
                blur-in 500ms linear 2s, 
                rotate-up2 250ms ease-out forwards 5.7s,
                zoom 1.5s ease-in-out 6.25s, 
                flip 500ms linear forwards 8.5s;
}

/*  Код анимаций без изменений */

.ava:hover ~ #profiles_show .block {
   display:block;
}

.programs__name {
   min-width: 0;
}

.programs__name p {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

.flex {
   --gap: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}

.item {
   width: calc(50% - var(--gap) / 2);
   height: 100px;
   background-color: red;
}

<div class="inputbox">
   <input type="text">
</div>

.inputbox::after { 
  /* ...стили для псевдоэлемента */ 
}

.container{ 
  display: flex;
  justify-content: space-around;
}

.card { 
   width: fit-content; 
}

grid-template-columns: repeat(auto-fill, minmax(310px, 310px));

.title:hover ~ .title::after {
    transform: rotate(180deg);
}

.title:hover::after {
    transform: rotate(180deg);
}

new Swiper('.swiper', {
  navigation: {
    nextEl: '.my-awesome-slider-button-next',
    prevEl: '.my-awesome-slider-button-prev',
  },
});

.my-awesome-slider-button-prev { /* ...styles */ };
.my-awesome-slider-button-next { /* ...styles */ };