.flex-container {
    display: flex;
    width: 97%;
    margin-left: 25px;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
}

.table-container {
    width: 65%;
    overflow-x: auto;
    padding-bottom: 10px;
    margin: 0;
}

.imgFINALF {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.imgFINALF img {
    max-width: 100%;
    height: 1200px;
    max-height: 800px;
    object-fit: contain;
}

.primero{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #5f5f5f, #3a3a3a, #585858, #3f3f3f, #585858, #4a4a4a, #2e2e2e);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.segundo{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #e6e6e6, #999999, #d9d9d9, #999999, #999999, #e0e0e0, #999999);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.tercero{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #74c365, #3b8f3a, #5ca04b, #2f6f31, #4d9e50, #6fbf73, #1e4d21);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.cuarto{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #5a9bd5, #2165a6, #3a86c4, #1b4e80, #4a90e2, #2b6db8, #102d5c);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.quinto{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #8a2be2, #5d1a99, #7a3bbf, #3e1475, #9d50dd, #6c2fa7, #2a0e52);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.sexto{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #ff4c4c, #d63e3e, #e06c6c, #b12e2e, #ff6666, #b53c3c, #8b1f1f);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.septimo{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #ffd700, #b8860b, #ffcc00, #a97101, #e6b800, #c29300, #8b6c00);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}

.octavo{
    font-size: 23px;
    font-family: "Garamond";
    background-image: linear-gradient(45deg, #fffbd1, #fff066, #fffb9c, #fff33a, #fffecb, #fff700, #fffac0);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowAnimation1 4s infinite linear;
}



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


@media (max-width: 900px) {
    
    .flex-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0px;
    }

    .table-container{
        width: 97%;
    }

    .imgFINALF {
        width: 100%;
    }

    .imgFINALF img {
        max-height: 500px;
    }
}

.linkP{
    color: #e6b800;
    text-decoration: none;
}

.linkP:hover{
    text-decoration: underline;
}