[data-theme = "light"]
{
    --global-wrapper-bc: rgba(255, 255, 255, 0.95);

    --title-themes-h1-bc: rgb(52, 52, 52);
    --title-themes-h1-color: rgb(240, 240, 240);

    --theme-global-container-border-color: rgb(52, 52, 52);
    --theme-global-container-bc: rgba(255, 255, 255, 0.6);
    --theme-global-container-admin-side-back-color: rgba(255, 255, 255, 0.7);
    --theme-container-bc: transparent;
    --theme-row-border-color: rgb(62, 62, 62);
    --theme-row-bc: rgba(255, 255, 255, 0);

    --h2-color: rgb(255, 255, 255);
    --theme-title-home-visitor-color: rgb(68, 68, 68);
    --theme-title-h2-bc: rgba(52, 52, 52, 0.95);
    --theme-title-h2-border-color: rgba(32, 32, 32, 0.15);

    --no-button-style-color: rgb(71, 65, 61);

    --theme-link-box-hover-bc: rgb(255, 255, 255);
    --theme-link-box-hover-h2-bc: rgba(255, 92, 80, 0.95);
    --theme-link-box-hover-h2-color: rgb(255, 243, 233);

    --userName-bc: rgb(255, 92, 80);
    --userName-color: rgb(255, 255, 255);

    --feature-button-color: rgb(236, 236, 236);
    --feature-button-bc: rgba(56, 56, 56, 0.95);
    --feature-button-border-color: rgba(169, 169, 169, 0.97);
    --feature-button-shadow: rgba(49, 49, 49, 0.95);
    --feature-button-hover-shadow: rgb(255, 92, 80, 0.9);
    --feature-button-hover-border-color: rgb(255, 92, 80);

    --display-order-link-back-color: rgba(52, 52, 52, 0.08);
    --display-order-link-color: rgb(52, 52, 52);
    --display-order-link-border-color: rgba(32, 32, 32, 0.15);
    --display-order-link-adjustment-color: rgb(255, 243, 233);

    --features-links-themesSet-only-bc: rgb(52, 52, 52);
    --theme-feature-link-box-a-bc: rgb(246, 246, 246);
    --theme-feature-link-box-a-color: rgb(26, 26, 26);
    --theme-feature-link-box-a-border-color: rgba(32, 32, 32, 0.15);
    --theme-feature-link-box-a-hover-bc: rgba(32, 32, 32, 0.08);
    --theme-feature-link-box-a-hover-color: rgb(26, 26, 26);
    --theme-feature-themesSet-bc: rgb(42, 42, 42);
    --theme-feature-themesSet-color: rgb(168, 168, 168);
    --theme-feature-themesSet-hover-bc: rgb(255, 92, 80);
    --theme-feature-themesSet-hover-color: rgb(255, 255, 255);
    --theme-feature-themesSet-border-color: rgb(32, 32, 32);

    --info-visibility-link-color: rgb(255, 92, 80);
    --info-visibility-link-hover-color: rgb(26, 26, 26);
    --info-visibility-themesSet-color: rgb(255, 243, 233);
}

[data-theme = "dark"]
{
    --title-themes-h1-bc: rgb(32, 32, 32);
    --title-themes-h1-color: rgb(197, 197, 197);
    --theme-global-container-border-color: rgb(32, 32, 32);
    --theme-global-container-bc: rgba(32, 32, 32, 0.95);
    --theme-global-container-admin-side-back-color: rgba(32, 32, 32, 0.95);
    --theme-container-bc: rgba(32, 32, 32, 0.95);
    --theme-row-border-color: rgb(28, 28, 28);
    --theme-row-bc: rgb(36, 36, 36);
    --h2-color: rgb(168, 168, 168);
    --theme-title-home-visitor-color: rgb(168, 168, 168);
    --theme-title-h2-bc: rgb(31, 31, 31);
    --theme-title-h2-border-color: rgb(32, 32, 32);
    --no-button-style-color: rgb(212, 212, 212);
    --theme-link-box-hover-bc: rgba(32, 32, 32, 0.2);
    --theme-link-box-hover-h2-bc: rgb(41, 222, 122);
    --theme-link-box-hover-h2-color: rgb(32, 32, 32);
    --userName-bc: rgba(47, 255, 141, 0.9);
    --userName-color: rgb(26, 26, 26);

    --feature-button-color: rgb(168, 168, 168);
    --feature-button-bc: rgba(49, 49, 49, 0.95);
    --feature-button-border-color: rgb(82, 82, 82);
    --feature-button-shadow: rgba(31, 31, 31, 0.95);
    --feature-button-hover-shadow: rgb(47, 255, 141);
    --feature-button-hover-border-color: rgb(47, 255, 141);

    --display-order-link-back-color: rgba(168, 168, 168, 0.8);
    --display-order-link-color: rgb(52, 52, 52);
    --display-order-link-border-color: rgb(52, 52, 52);
    --display-order-link-adjustment-color: rgb(152, 152, 152);
    --features-links-themesSet-only-bc: rgb(32, 32, 32);
    --theme-feature-link-box-a-bc: rgb(31, 31, 31);
    --theme-feature-link-box-a-color: rgb(162, 162, 162);
    --theme-feature-link-box-a-border-color: rgb(32, 32, 32);
    --theme-feature-link-box-a-hover-bc: rgb(47, 255, 141);
    --theme-feature-link-box-a-hover-color: rgb(32, 32, 32);
    --theme-feature-themesSet-bc: rgb(38, 38, 38);
    --theme-feature-themesSet-color: rgb(168, 168, 168);
    --theme-feature-themesSet-hover-bc: rgb(41, 222, 122);
    --theme-feature-themesSet-hover-color: rgb(42, 42, 42);
    --theme-feature-themesSet-border-color: rgb(32, 32, 32);
    --info-visibility-link-color: rgb(41, 222, 122);
    --info-visibility-link-hover-color: rgb(255, 255, 255);
    --info-visibility-themesSet-color: rgb(152, 152, 152);
}

main
{
    padding-top: 9rem;
}

#global_wrapper main .admin-link
{
    margin-top: -3rem;
}

.themes-title-container
{
    display: flex;
    align-items: center;
    border-radius: 3px 3px 0 0;
    width: 100%;
    margin: auto;
}

.title-themes-group-row
{
    display: flex;
    flex-direction: column;
    padding: 0;
    font-size: 1.1rem;
    flex: 1;
}

.title-themes-group-col
{
    padding-left: 0rem;
}

.title-themes-group-col h1
{
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 3.5rem;
    background-color: var(--title-themes-h1-bc);
    min-width: fit-content;
    width: 30%;
    color: var(--title-themes-h1-color);
    padding: 0.5rem 2rem 0.5rem 2rem;
    border-radius: 3px 3px 0 0 ;
}

.theme-global-container
{
    display: flex;
    margin: auto;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    border: 3px solid var(--theme-global-container-border-color);
    border-radius: 0 3px 3px 3px;
    width: 100%;
    padding: 0.3rem;
    background-color: var(--theme-global-container-bc);
}

.theme-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--theme-container-bc);
}

.theme-row
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 280px;
    flex: 1;
    height: fit-content;
    color: rgb(32, 32, 32);
    padding: 0.4rem;
    border: 1px solid var(--theme-row-border-color);
    border-radius: 3px;
    background-color: var(--theme-row-bc);
    margin: 0.1rem;
}

.theme-link-box
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    flex: 1;
    width: 100%;
    border-radius: 3px;
}

.display-order-link
{
    display: flex;
    align-self: end;
    font-size: 0.8rem;
    margin: 0;
    border-radius: 3px;
    padding: 0 0.4rem 0.2rem 0.4rem;
    background-color: var(--display-order-link-back-color);
    border: 1px solid var(--display-order-link-border-color);
    font-weight: 700;
    text-decoration: none;
    color: var(--display-order-link-color);
}

.theme-content-box
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 290px;
    max-width: 30%;
    
}

.theme-picture-box
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.theme-title-home-visitor
{
    font-size: 1.2rem;
    color: var(--theme-title-home-visitor-color);
}

.theme-picture-box img
{
    height: 82%;
    border-radius: 3px;
}

.theme-title
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

h2
{
    font-size: 1rem;
    letter-spacing: 0.03rem;
    word-spacing: 0.1rem;
    text-align: center;
    font-weight: 700;
}

.theme-title h2
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 3rem;
    margin: 0;
    padding: 0.3rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--h2-color);
    background-color: var(--theme-title-h2-bc);
    border: 1px solid var(--theme-title-h2-border-color);
    border-radius: 3px;
    transition: 0.3s;
}

.theme-title .no-button-style
{
    height: fit-content;
    background-color: transparent;
    color: var(--no-button-style-color);
    border: none;
}

.theme-link-box:hover
{
    background-color: var(--theme-link-box-hover-bc);
}

.theme-link-box:hover .theme-title h2
{
    background-color: var(--theme-link-box-hover-h2-bc);
    color: var(--theme-link-box-hover-h2-color);
}

.theme-link-box:hover .info-visibility-link {
    color: var(--info-visibility-link-hover-color);
}

/* BACKEND - ADMIN */

.features-buttons-container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#userName
{
    display: flex;
    font-size: 1.1rem;
    font-weight: normal;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--userName-color);
    background-color: var(--userName-bc);
    width: fit-content;
    padding: 0.2rem 0.8rem;
    border-radius: 3px;
}

.features-buttons-row
{
    display: flex;
    flex: 1;
    padding: 0;
}

.features-buttons-col
{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-button-box
{
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 0.3rem;
    margin-bottom: 0.2rem;
}

.feature-button
{
    text-decoration: none;
    color: var(--feature-button-color);
    background-color: var(--feature-button-bc);
    border: 1px solid var(--feature-button-border-color);
    box-shadow: 3px 5px var(--feature-button-shadow);
    border-radius: 3px;
    padding: 0.5rem;
    text-align: center;
}

.feature-button span
{
    font-size: 0.8rem;
    font-style: italic;
}

.feature-button:hover
{
    box-shadow: 3px 5px var(--feature-button-hover-shadow);
    border: 1px solid var(--feature-button-hover-border-color);
}

.theme-global-container-admin-side
{
    border-radius: 0 3px 3px 3px;
    background-color: var(--theme-global-container-admin-side-back-color);
}

.info-visibility-link
{
    display: flex;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: bold;
    padding-top: 0.2rem;
    color: var(--info-visibility-link-color);
    text-decoration: none;
}

.info-visibility-link:hover
{
    font-weight: 700;
    color: var(--info-visibility-link-hover-color);
}

.title-themes-group-col .title-themes-group-admin-side
{
    min-width: 13rem;
    width: 40%;
    padding-bottom: 0;
    padding-left: 0.7rem;
    padding-right: 0.5rem;
    font-size: 1.5rem;
    justify-content: space-between;
    align-items: center;
    color: rgb(219, 219, 219);
}

.title-themes-group-admin-side {
    color: rgb(201, 13, 13);
}

.title-themes-group-col .title-themes-group-admin-side div
{
    display: flex;
    padding-right: 0.5rem;
}

.display-order-link-adjustment
{
    background-color: rgba(252, 232, 216, 0.08);
    color: var(--display-order-link-adjustment-color);
    margin-bottom: 0.5rem;
}

.theme-features-links-container
{
    display: flex;
    width: 100%;
}

.theme-features-links-container-row
{
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.features-links-themesSet-only
{
    background-color: var(--features-links-themesSet-only-bc);
    padding: 0.5rem;
    padding-top: 0;
    min-width: 13rem;
    width: 40%;
}

.theme-feature-link-box
{
    display: flex;
    justify-content: space-around;
    flex: 1;
    margin-top: 0.5rem;
}

.theme-feature-link-box a
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0.98;
    text-decoration: none;
    border-radius: 3px;
    height: 50px;
    color: var(--theme-feature-link-box-a-color);
    background-color: var(--theme-feature-link-box-a-bc);
    border: 1px solid var(--theme-feature-link-box-a-border-color);
}

.features-links-themesSet-only a
{
    height: 2rem;
    flex: 0.995;
}

.theme-feature-link-box a:hover
{
    background-color: var(--theme-feature-link-box-a-hover-bc);
    color: var(--theme-feature-link-box-a-hover-color);
    font-weight: bold;
}

.theme-feature-themesSet a
{
    background-color: var(--theme-feature-themesSet-bc);
    color: var(--theme-feature-themesSet-color);
    border-radius: 3px;
    border: 1px solid var(--theme-feature-themesSet-border-color);
}

.theme-feature-themesSet a:hover
{
    background-color: var(--theme-feature-themesSet-hover-bc);
    color: var(--theme-feature-themesSet-hover-color);
}

.info-visibility-themesSet
{
    color: var(--info-visibility-themesSet-color);
    padding-top: 0;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 770px) {
    main 
    {
        width: 95%;
    }
    .title-themes-group-col .title-themes-group-admin-side
    {
        padding-left: 0.5rem;
        font-size: 1rem;
    }
    .features-links-themesSet-only
    {
        font-size: 1rem;
    }
}

@media screen and (max-width: 500px) {
    .title-themes-group-col h1 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 300px) {
    .title-themes-group-col h1 {
        font-size: 1.7rem;
    }
}

/*
@media (prefers-color-scheme: dark) {
    .title-themes-group-col h1
    {
        background-color: rgb(40, 40, 40);
        color: rgb(252, 232, 216);
    }
    .theme-global-container
    {
        border: 3px solid rgb(42, 42, 42);
        background-color: rgba(42, 42, 42, 0.95);
    }
    .theme-container
    {
        background-color: rgba(42, 42, 42, 0.95);
    }
    .theme-row
    {
        border: 1px solid rgb(22, 22, 22);
        background-color: rgb(158, 153, 149);
    }
    h2
    {
        color: rgb(32, 32, 32);
    }
    .theme-title h2
    {
        background-color: rgb(52, 52, 52);
        border: 1px solid rgba(162, 162, 162, 0.15);
    }
    .theme-title .no-button-style
    {
        color: rgb(52, 52, 52);
    }
    .theme-link-box:hover
    {
        background-color: rgba(32, 32, 32, 0.2);
    }
    .theme-link-box:hover .theme-title h2
    {
        background-color: rgb(92, 92, 92);
    }
    #userName
    {
        background-color: rgba(32, 32, 32, 0.9);
        color: rgb(252, 232, 216);
    }
    .feature-button
    {
        color: rgb(22, 22, 22);
        background-color: rgb(158, 153, 149);
        border: 2px solid rgb(221, 212, 203);
    }
    .feature-button:hover
    {
        border: 2px solid rgb(47, 255, 141);
        box-shadow: 3px 5px rgb(47, 255, 141);
    }
    .display-order-link-adjustment
    {
        color: rgb(152, 152, 152);
    }
    .features-links-themesSet-only
    {
        background-color: rgb(42, 42, 42);
    }
    .theme-feature-link-box a
    {
        color: rgb(152, 152, 152);
        background-color: rgba(55, 55, 55);
        border: 1px solid rgba(32, 32, 32, 0.8);
    }
    .theme-feature-link-box a:hover
    {
        background-color: rgb(47, 255, 141);
        color: rgb(32, 32, 32);
    }
    .info-visibility-themesSet
    {
        color: rgb(152, 152, 152);
    }
}
*/