main {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 32);
    flex-direction: column;
    width: 100%;
    display: flex;
    padding: 40px;
    border-radius: 25px;
    position: relative;
    /* background: linear-gradient(291deg, #fd4fd026, #49c8ff66, #f500000d); */
}

/* .spectrum-softwarex {
    width: 400px;
    height: 400px;
    background: pink;
    font-size: 3.125rem;
} */

@media screen and (max-width: 1100px) {
    main {
        gap: calc(var(--spacing, 0.25rem) * 12);
    }
}

.spectrum-leftside {
    font-size: 1.125rem;
    /* min-width: 400px; */
    gap: calc(var(--spacing, 0.25rem) * 4);
    flex-direction: column;
    max-width: 400px;
    display: flex;

    p {
        margin-top: 0;
    }

    .spectrum-header {
        font-size: 3rem;
        line-height: 4rem;
        padding: 0;
        margin: 0;
    }

    .green-download-button {
        padding: 10px 50px;
        border-radius: var(--radius-sm, 0.25rem);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-green-600, #417e38);
        background-color: var(--color-green-600, #417e38);
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-size: 16px;
    }

    .green-download-button:hover {
        background-color: #469c38;
    }

    div {
        gap: calc(var(--spacing, 0.25rem) * 4);
        flex-direction: column;
        max-width: 400px;
        display: flex;
    }

    div small {
        text-align: center;
        font-size: 14px;
        line-height: 20px;
    }
}

.spectrum-rightside {
    min-width: calc(var(--spacing, 0.25rem) * 0);
    max-width: 720px;
    display: block;
    /* width: 720px; */
    /* width: 100%; */
}

.tabs-bar {
    margin-bottom: 10px;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    overflow: auto;
    min-height: 530px;
    max-height: 530px;
}

#tab-content-home {
    font-size: 16px;
    line-height: 26px;
}

#tab-content-screen-shots {
    /* display: flex;
            align-items: stretch; */

    div {
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
    }
}

#tab-content-modules {
    .spectrum-module-section {
        .module-block {
            display: flex;
            padding: 0px 0 15px 0;
            align-items: center;
            font-size: 16px;
        }

        .module-icon {
            display: inline-block;
            margin-right: 15px;
        }

        .module-title {
            display: inline-block;
        }

        .module-title h3 {
            font-size: 20px;
            margin-top: 0;
            padding-bottom: 0;
            margin-bottom: 0;
        }

        .module-subtitle {
            font-style: italic;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 0;
        }
    }
}

#tab-content-aim-releases {
    .aim-releases-table {
        max-width: 600px;
        font-weight: bold;
        min-width: 225px;
        font-size: 0.75rem;

        td:nth-child(2),
        td:nth-child(3) {
            width: 75px;
            text-align: center;
        }
    }

    .spectrum-link-title {
        font-weight: bold;
        /* font-size: 14px; */
        min-width: 225px;
        font-size: 0.75rem;
    }

    .downloadBtn-16x16,
    .onlineBtn-16x16 {
        padding: 0;
    }

    .downloadBtn-16x16:before,
    .onlineBtn-16x16:before {
        margin: 0;
    }
}

#tab-content-documents {
    .documents-container {
        padding-top: 15px;
    }

    b {
        font-size: 1.25rem;
    }

    p {
        font-size: 1.125rem;
    }
}

#tab-content-legacy {
    a {
        font-size: 0.75rem;
    }

    b {
        font-size: 1.25rem;
    }

    p {
        font-size: 1.125rem;
    }

    .legacy-releases-table-1 {
        max-width: 600px;
        font-weight: bold;
        min-width: 225px;
        font-size: 0.75rem;

        td:nth-child(1) {
        }

        td:nth-child(2) {
            width: 150px;
            text-align: center;
        }

        td:nth-child(3) {
            width: 110px;
            text-align: center;
        }

        td:nth-child(4) {
            width: 75px;
            text-align: center;
        }

        .downloadBtn-16x16:before {
            margin-right: 0;
        }
    }

    .legacy-releases-table-2 {
        max-width: 600px;
        font-weight: bold;
        min-width: 225px;
        font-size: 0.75rem;

        td:nth-child(1) {
        }

        td:nth-child(2) {
            width: 110px;
            text-align: center;
        }

        td:nth-child(3) {
            width: 225px;
            text-align: center;
        }

        td:nth-child(4) {
            width: 75px;
            text-align: center;
        }

        .downloadBtn-16x16:before {
            margin-right: 0;
        }
    }
}

#animations-example .column td {
    animation: jumping-bars 3s linear infinite;
}

#animations-example .column tr:nth-of-type(even) td {
    animation-delay: 2300ms;
}

#animations-example tbody {
    aspect-ratio: var(--aspect-ratio, 15 / 9);
}

@keyframes jumping-bars {
    0% {
        transform: translateY(0px);
    }

    12% {
        transform: translateY(-20px);
    }

    24% {
        transform: translateY(0px);
    }
}

.animation-download-button {
    .btn {
        /* width: 400px; */
        /* height: 58px; */
        /* margin: 10px 0; */
        background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
        background-size: 100%;
        font-size: 16px;
        font-weight: 600;
        color: white;
        border: none;
        cursor: pointer;
        transition: all 500ms ease;
        box-shadow:
            0 4px 6px -1px hsla(0, 0%, 0%, 0.1),
            0 2px 4px -2px hsla(0, 0%, 0%, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10%;
    }

    .btn img {
        margin: 0 10px;
    }

    .five {
        /* background: linear-gradient(to right, #3a47d5, #FCEE21, #00A8C5, #D9E021); */
        background: linear-gradient(to right, #1f8900, #1f8900, #00a8c5, #d9e021);
        background-size: 350% 100%;
        transition: all 0.4s ease-in-out;
    }

    .five:hover {
        background-position: 100% 0;
    }

    .btn:hover {
        animation-name: flow;
        animation-duration: 500ms;
        animation-timing-function: linear;
    }

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

        100% {
            background-position: 100%;
        }
    }
}

@media (width >=48rem) {
    main {
        gap: calc(var(--spacing, 0.25rem) * 14);
        flex-direction: row;
    }
}

@media (width <850px) {
    .spectrum-header {
        font-size: 2rem !important;
    }
}

/* @media screen and (max-width: 767px) { */
@media (width <48rem) {
    main {
        padding: 15px;
    }

    p {
        line-height: 2rem;
    }

    .btn {
        font-size: 3rem;
    }

    .btn img {
        margin: 0 10px;
    }

    .aim-releases-table {
        width: 100%;
    }
}

/* @media screen and (max-width: 1000px) { */
@media screen and (max-width: 767px) {
    .spectrum-leftside {
        width: 100%;
        max-width: none;
    }

    .spectrum-rightside {
        width: 100%;
        max-width: none;
    }

    .spectrum-leftside .btn {
        /* width: 100%;
                display: block;
                text-align: center; */
    }

    .spectrum-leftside div {
        max-width: none;
    }

    .animation-download-button .btn {
        height: auto;
    }

    #tab-content-modules {
        & .spectrum-module-section {
            /* .module-block {
                        margin: 60px 0 30px 0;
                    } */

            /* .module-title h3 {
                        font-size: 2rem;
                        margin-bottom: 20px;
                    }

                    & .module-subtitle {
                        font-size: 1.8rem;
                        line-height: 30px;
                    }

                    & img {
                        height: 100px;
                        width: 100px;
                        margin-right: 30px;
                    } */
        }
    }
}

#tab-content-screen-shots .screenshot {
    width: 343px;
    height: 219px;
}