body {
}




@media (max-width: 950px) {
    .first-part {
        margin-bottom: 70px;
    }

    .mobile-custom-text {
        text-align: justify !important;
        margin-left: 10px !important;
        margin-right: 10px !important; 
    }
}

@media (max-width: 465px) {
    .first-part {
        margin-bottom: 70px;
    }

    .mobile-custom-text {
        text-align: justify !important;
        margin-top: 20px !important; 
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-bottom: 25px !important; 
    }

    .logo {
        width: 5em !important;
        height: auto !important;
        margin: auto !important;
    }
}

.second-part {
    border-radius: 20px;
}

.index-second {
    border-radius: 20px;
    background-color: var(--redwood);
}

.typewriting-one, .typewriting-two {
    display: inline-block;
}

.text-animation-one {
    letter-spacing: 8px;
    font-weight: 400;
    border-right: 5px solid transparent;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 0.3s steps(3), blink-caret 2s step-start;
}

.text-animation-two {
    letter-spacing: 7px;
    font-weight: 400;
    border-right: 5px solid transparent;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1s steps(10), cursor .4s step-start infinite alternate;
    animation-delay: 1.5s;
    animation-fill-mode: both;
}

@keyframes blink-caret {
    50% {
        border-color: black;
    }
}

@keyframes cursor {
    50% {
        border-color: black;
    }
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.klee-one-regular {
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
}

.profile-picture {
    border-radius: 100%;
    display: block;
    margin: 0 auto; /* Centers the image */
    max-width: 75%; /* Reduced max-width for a smaller size on larger screens */
    height: auto; /* Maintains the aspect ratio */
}

@media (max-width: 300px) {
    .picture {
        width: 50%; /* Adjusted for common mobile screen widths */
    }
}

.button {
    display: flex;
    gap: 20px;
}

    .buttons:hover {
        transform: scale(1.05);
    }

.margin-bottom-custom {
    margin-bottom: 100px;
}

.center-vertically {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally if needed */
    height: 100%; /* Ensure the container takes the full height */
}

.logo {
    filter: grayscale(40%) brightness(100%) contrast(100%);
    height: 100px;
    transition: transform 0.3s ease, filter 0.3s ease; /* Add transition for both transform and filter */
    position: relative; /* Ensure z-index works */
    display: inline-block;
    vertical-align: middle;
}

    .logo:hover { /* Not working, I do not know why */
        transform: scale(1.05);
        filter: saturate(1);
        display: inline-block;
        vertical-align: middle;
    }


.description {
    visibility: hidden;
    background-color: #212529;
    color: white; 
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 140%; /* Position above the logo */
    left: 100%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    display: inline-block;
}

a:hover .description {
    visibility: visible;
    opacity: 1; 
}