.click-bait {
    height: 10vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: white;
}

.click-bait::before,
.click-bait::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 30%;
    transition: 0.5s;
    background-color: #0d0e1b;
}

.click-bait::before {
    left: 5%;
    animation: alternate 1.5s infinite clickBait;
}

.click-bait::after {
    right: 5%;
    animation: alternate 1.5s infinite clickBait;
}

@keyframes clickBait {
    0% {
        width: 30%;
    }

    100% {
        width: 5%;
    }
}

.click-bait a {
    position: relative;
    color: #0d0e1b;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Sugo Pro Classic Trial';
    font-size: 40px;
}

.click-bait a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    opacity: 1;
    overflow: hidden;
    content: attr(text);
    color: #14F09D;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Sugo Pro Classic Trial';
    font-size: 40px;
    transition: 0.5s;
}

.click-bait a:hover::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    content: attr(text);
    color: rgba(20, 240, 157, 0.67);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Sugo Pro Classic Trial';
    font-size: 40px;
}

.text-container {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.styled-text {
    font-size: 5rem;
    letter-spacing: 5.5px;
    font-weight: bold;
    padding: 10px;
    color: #0d0e1b;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-shadow:
        0.5px 0.5px 0px rgba(20, 240, 157, 0.67),
        1px 1px 0px rgba(20, 240, 157, 0.67),
        1.5px 1.5px 0px rgba(20, 240, 157, 0.67),
        2px 2px 0px rgba(20, 240, 157, 0.67),
        2.5px 2.5px 0px rgba(20, 240, 157, 0.67),
        3px 3px 0px rgba(20, 240, 157, 0.67),
        3.5px 3.5px 0px rgba(20, 240, 157, 0.67),
        4px 4px 0px rgba(20, 240, 157, 0.67),
        4.5px 4.5px 0px rgba(20, 240, 157, 0.67),
        5px 5px 0px rgba(20, 240, 157, 0.67),
        5.5px 5.5px 0px rgba(20, 240, 157, 0.67),
        6px 6px 0px rgba(20, 240, 157, 0.67),



        8px 8px 0px rgb(255, 255, 255),


        8px 6px 0px rgb(255, 255, 255),
        8px 5.5px 0px rgb(255, 255, 255),
        7.5px 6px 0px rgb(255, 255, 255),
        7.5px 5.5px 0px rgb(255, 255, 255),
        7px 5.5px 0px rgb(255, 255, 255),
        7.5px 5px 0px rgb(255, 255, 255),
        7px 5px 0px rgb(255, 255, 255),
        7px 4.5px 0px rgb(255, 255, 255),
        6.5px 5px 0px rgb(255, 255, 255),
        6.5px 4.5px 0px rgb(255, 255, 255),
        6.5px 4px 0px rgb(255, 255, 255),
        6px 4.5px 0px rgb(255, 255, 255),
        6px 4px 0px rgb(255, 255, 255),
        6px 3.5px 0px rgb(255, 255, 255),
        5.5px 4px 0px rgb(255, 255, 255),
        5.5px 3.5px 0px rgb(255, 255, 255),
        5.5px 3px 0px rgb(255, 255, 255),
        5px 3.5px 0px rgb(255, 255, 255),
        5px 3px 0px rgb(255, 255, 255),
        5px 2.5px 0px rgb(255, 255, 255),
        4.5px 3px 0px rgb(255, 255, 255),
        4.5px 2.5px 0px rgb(255, 255, 255),
        4.5px 2px 0px rgb(255, 255, 255),
        4px 2.5px 0px rgb(255, 255, 255),
        4px 2px 0px rgb(255, 255, 255),
        4px 1.5px 0px rgb(255, 255, 255),
        3.5px 2px 0px rgb(255, 255, 255),
        3.5px 1.5px 0px rgb(255, 255, 255),
        3.5px 1px 0px rgb(255, 255, 255),
        3px 1.5px 0px rgb(255, 255, 255),
        3px 1px 0px rgb(255, 255, 255),
        3px 0.5px 0px rgb(255, 255, 255),
        2.5px 1px 0px rgb(255, 255, 255),
        2.5px 0.5px 0px rgb(255, 255, 255),
        2.5px 0px 0px rgb(255, 255, 255),
        2px 0.5px 0px rgb(255, 255, 255),
        2px 0px 0px rgb(255, 255, 255),
        2px -0.5px 0px rgb(255, 255, 255),
        1.5px 0px 0px rgb(255, 255, 255),
        1.5px -0.5px 0px rgb(255, 255, 255),
        1.5px -1px 0px rgb(255, 255, 255),
        1px -0.5px 0px rgb(255, 255, 255),
        1px -1px 0px rgb(255, 255, 255),
        1px -1.5px 0px rgb(255, 255, 255),
        0.5px -1px 0px rgb(255, 255, 255),
        0.5px -1.5px 0px rgb(255, 255, 255),
        0.5px -2px 0px rgb(255, 255, 255),
        0px -1.5px 0px rgb(255, 255, 255),
        0px -2px 0px rgb(255, 255, 255),
        -0.5px -2px 0px rgb(255, 255, 255),
        -1px -2px 0px rgb(255, 255, 255),
        -1.5px -2px 0px rgb(255, 255, 255),


        6px 8px 0px rgb(255, 255, 255),
        6px 7.5px 0px rgb(255, 255, 255),
        5.5px 8px 0px rgb(255, 255, 255),
        5.5px 7.5px 0px rgb(255, 255, 255),
        5px 7.5px 0px rgb(255, 255, 255),
        5.5px 7px 0px rgb(255, 255, 255),
        5px 7px 0px rgb(255, 255, 255),
        5px 6.5px 0px rgb(255, 255, 255),
        4.5px 7px 0px rgb(255, 255, 255),
        4.5px 6.5px 0px rgb(255, 255, 255),
        4.5px 6px 0px rgb(255, 255, 255),
        4px 6.5px 0px rgb(255, 255, 255),
        4px 6px 0px rgb(255, 255, 255),
        4px 5.5px 0px rgb(255, 255, 255),
        3.5px 6px 0px rgb(255, 255, 255),
        3.5px 5.5px 0px rgb(255, 255, 255),
        3.5px 5px 0px rgb(255, 255, 255),
        3px 5.5px 0px rgb(255, 255, 255),
        3px 5px 0px rgb(255, 255, 255),
        3px 4.5px 0px rgb(255, 255, 255),
        2.5px 5px 0px rgb(255, 255, 255),
        2.5px 4.5px 0px rgb(255, 255, 255),
        2.5px 4px 0px rgb(255, 255, 255),
        2px 4.5px 0px rgb(255, 255, 255),
        2px 4px 0px rgb(255, 255, 255),
        2px 3.5px 0px rgb(255, 255, 255),
        1.5px 4px 0px rgb(255, 255, 255),
        1.5px 3.5px 0px rgb(255, 255, 255),
        1.5px 3px 0px rgb(255, 255, 255),
        1px 3.5px 0px rgb(255, 255, 255),
        1px 3px 0px rgb(255, 255, 255),
        1px 2.5px 0px rgb(255, 255, 255),
        0.5px 3px 0px rgb(255, 255, 255),
        0.5px 2.5px 0px rgb(255, 255, 255),
        0.5px 2px 0px rgb(255, 255, 255),
        0px 2.5px 0px rgb(255, 255, 255),
        0px 2px 0px rgb(255, 255, 255),
        0px 1.5px 0px rgb(255, 255, 255),
        -0.5px 2px 0px rgb(255, 255, 255),
        -0.5px 1.5px 0px rgb(255, 255, 255),
        -0.5px 1px 0px rgb(255, 255, 255),
        -1px 1.5px 0px rgb(255, 255, 255),
        -1px 1px 0px rgb(255, 255, 255),
        -1px 0.5px 0px rgb(255, 255, 255),
        -1.5px 1px 0px rgb(255, 255, 255),
        -1.5px 0.5px 0px rgb(255, 255, 255),
        -1.5px 0px 0px rgb(255, 255, 255),
        -2px 0.5px 0px rgb(255, 255, 255),
        -2px 0px 0px rgb(255, 255, 255),
        -2px -0.5px 0px rgb(255, 255, 255),
        -2px -1px 0px rgb(255, 255, 255),
        -2px -1.5px 0px rgb(255, 255, 255),

        -2px -2px 0px rgb(255, 255, 255);

}

.styled-text::before,
.styled-text::after {
    content: '';
    height: 100%;
    width: 50%;
    position: absolute;
    background-color: #0d0e1b;
    transition: 2s;
}

.styled-text::before {
    left: 0px;
    border-right: 2px solid white;
}

.styled-text::after {
    right: 0px;
    border-left: 2px solid white;
}

.styled-text-active::before,
.styled-text-active::after {
    height: 1%;
    width: 100%;
    animation-delay: 2s;
    border: 0px;
    background-color: white;
}

.styled-text-active::before {
    animation: titleLoadLeft 2s;
    top: -2%;
}

.styled-text-active::after {
    animation: titleLoadRight 2s;
    bottom: -2%;
}

@keyframes titleLoadLeft {
    0% {
        background-color: #0d0e1b;
        border-right: 2px solid white;
        height: 100%;
        width: 50%;
    }

    45% {
        background-color: #0d0e1b;
        border-right: 2px solid white;
        height: 100%;
        width: 0%;
    }

    55% {
        border-right: 0px solid white;
        height: 0%;
        width: 0%;
        background-color: white;
    }

    100% {
        height: 1%;
        width: 100%;
    }
}

@keyframes titleLoadRight {
    0% {
        background-color: #0d0e1b;
        border-left: 2px solid white;
        height: 100%;
        width: 50%;
    }

    45% {
        background-color: #0d0e1b;
        border-left: 2px solid white;
        height: 100%;
        width: 0%;
    }

    55% {
        border-left: 0px solid white;
        height: 0%;
        width: 0%;
        background-color: white;
    }

    100% {
        height: 1%;
        width: 100%;
    }
}

@media (max-width: 930px) {
    .styled-text {
        font-size: 3rem;
    }

    #presentation {
        width: 100%;
    }
}

#presentation {
    padding: 15px;
    width: 60%;
    text-align: left;
    position: relative;
}

.top-letter {
    opacity: 0.7;
    font-style: italic;
    font-size: 20px;
    margin: 40px 0px;
    font-weight: 900;
}

.introduction-letter {
    text-align: center;
    font-weight: 900;
}

.message-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.message-even,
.message-odd {
    background-color: #16182d;
    width: 60%;
    min-height: 80px;
    border-radius: 25px;
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 20px;
}

.message-even::before,
.message-odd::before {
    z-index: -1;
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: #16182d;
    transform: rotate(45deg);
}

.message-even {
    justify-content: flex-start;
    padding-left: 80px;
}

.message-odd {
    justify-content: flex-end;
    padding-right: 80px;
    margin-left: calc(40% - 30px - 80px);
}

.message-odd:visible {
    background-color: black;
}

.message-even::before {
    left: -10px;
}

.message-odd::before {
    right: -10px;
}

.text {
    font-style: italic;
    opacity: 0.7;
    font-weight: 900;
    text-align: center;
}

.text-title {
    font-weight: bold;
    font-family: 'Sugo Pro Classic Trial';
    color: rgba(20, 240, 157, 0.67);
    margin: 50px auto;
    text-align: center;
    font-size: 24px;
    letter-spacing: 1px;
}

.footer-letter {
    font-weight: 600;
    text-align: justify;
    padding: 50px 0px;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.welcome-letter {
    font-size: 35px;
    text-align: center;
    margin: 50px;
}

.welcome-letter::after,
.welcome-letter::before {
    display: none;
}

@media (max-width: 930px) {
    #presentation {
        width: 90%;
        margin: auto;
    }
}