body {
    position: relative;
    height: 100vh; 
    margin: 0;
    background-image: url("../img/tetya-compress-min.jpg");
    background-color: #0b122e;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 2%; /* Установите высоту размытия */
  width: 100%;
  background: linear-gradient(to top, rgba(11,18,46,0.5), transparent);
  backdrop-filter: blur(8px); /* Установите радиус размытия */
  z-index: -99999;
}
.chern {
    background-color: #0b122e;
    opacity: 90%;
}

@keyframes colorchange {
  0% {color: red;}
  14% {color: orange;}
  28% {color: yellow;}
  42% {color: green;}
  57% {color: blue;}
  71% {color: indigo;}
  85% {color: violet;}
  100% {color: red;}
}

.letter {
    animation: colorchange 10s infinite;
    display: inline-block;
}

.letter2 {
    animation: colorchange 2s infinite;
    display: inline-block;
}

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

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

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

    .btn-danger2 {
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        background-size: 200% 100%;
        color: white;
        animation: gradientLR 5s linear infinite;
    }

    .btn-success2 {
        background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
        background-size: 200% 100%;
        color: white;
        animation: gradientRL 5s linear infinite;
    }