* {
    text-align: center;
}

body {
    background-color: black;
    overflow: hidden;
    user-select: none;
}

h1 {
    color: darkred;
    text-shadow: 0px 0px 10px darkred;
    opacity: 0%;
    user-select: none;
}

.quote {
    animation: text 5.5s forwards;
    position: absolute;
    right: 25%;
    left: 25%;
    top: 40%;
    opacity: 0%;
    user-select: none;
}

.table {
    display: flex;
    justify-content: center;
    gap: 3%;
    margin-top: 35%;
    position: relative;
    user-select: none;
}

.telegram {
    transition: transform 0.3s ease, filter 0.3s ease;
    width: 10%; 
    animation: float 3s infinite ease-in-out, store 11s forwards;
    position: relative;
    animation-play-state: running;
    user-select: none;
}

.telegram:hover {
    transform: scale(1.7);
    animation-play-state: paused;
}

.telegram.paused {
    animation-play-state: paused;
    transform: scale(1.7);
}

@keyframes float {
    0% {transform: translateY(0);}
    50% {transform: translateY(-20px);}
    100% {transform: translateY(0);}
}

.hover-text-container {
    position: absolute;
    right: 25%;
    left: 25%;
    top: 30%;
    color: darkred;
    font-size: 1.5rem;
    text-align: center;
    text-shadow: 0px 0px 10px darkred;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.telegram:hover ~ .hover-text-container {
    opacity: 1;
}

@keyframes text {
    0% {opacity: 0%;}
    20% {opacity: 100%;}
    90% {opacity: 100%;}
    100% {opacity: 0%;}
}

@keyframes store {
    0% {opacity: 0%; display: none;}
    50% {opacity: 0%; display: none;}
    60% {opacity: 100%; display: flex;}
    100% {opacity: 100%; display: flex;}
}