[data-theme = "light"] {
    --last-page-bc: rgb(255, 255, 255);
    --last-page-border-color: #202020;
    --last-page-color: #202020;
    --last-page-hover-bc: #202020;
    --last-page-hover-color: rgb(255, 255, 255);
    --last-page-hover-border-color: rgb(32, 32, 32);

    --theme-view-top-color: rgb(32, 32, 32);

    --theme-title-bc: rgba(253, 119, 109, 0.85);
    --theme-title-color: rgb(26, 26, 26);

    --references-links-bc: rgba(245, 245, 245, 0.95);
    --references-links-c: rgb(68, 68, 68);
    --references-links-hover-back-color: rgb(255, 92, 80);
    --references-links-c-hover: rgb(241, 241, 241);
    --references-links-border: rgb(211, 211, 211);
    --credits-link-color: rgb(26, 26, 26);
    --credits-link-border-bottom-color: rgb(211, 211, 211);

    --section-title-container-border-color: rgb(52, 52, 52);
    --section-title-container-bc: rgb(255, 255, 255);
    --section-title-content-color: rgb(26, 26, 26);
    --section-first-letter-bc: rgb(255, 92, 80);
    --section-first-letter-color: rgb(255, 255, 255);
    --section-content-bc: rgb(255, 255, 255);
    --section-content-border-color: rgb(52, 52, 52);

    --toggle-container-back-color: rgb(255, 92, 80);
    --toggle-section-color: rgb(26, 26, 26);
    --toggle-section-hover-back-color: rgb(255, 92, 80);
    --toggle-section-hover-color: rgb(240, 240, 240);

    --container-row-border-color: rgb(211, 211, 211);
    
    --notion-title-block-h3-color: rgb(253, 104, 94);
    --notion-title-h2-color: rgb(32, 32, 32);
    --notion-description-color: rgb(78, 78, 78);

    --published-info-color: rgb(119, 119, 119);

    --display-order-info-back-color: rgba(32, 32, 32, 0.08);
    --display-order-info-color: rgb(26, 26, 26);
    --display-order-info-border-color: rgba(32, 32, 32, 0.15);

    --feature-button-color: rgb(240, 240, 240);
    --feature-button-bc: rgb(52, 52, 52);
    --feature-button-border-color: rgb(255, 255, 255);
    --feature-button-hover-shadow-color: rgb(253, 104, 94);
    --feature-button-hover-border-color: rgb(255, 255, 255);
    --feature-button-hover-color: rgb(240, 240, 240);

    --sources-link-color: rgb(32, 32, 32);

    --edit-link-bc: rgba(32, 32, 32, 0.031);
    --edit-link-border-color: rgba(32, 32, 32, 0.3);
    --edit-link-a-color: rgb(32, 32, 32);
    --edit-link-a-hover-color: rgb(32, 32, 32);
    --edit-link-a-hover-bc: rgba(32, 32, 32, 0.05);
    --edit-link-theme-bc: rgba(255, 255, 255, 0.8);
    --edit-link-theme-color: rgb(240, 240, 240);
    --edit-link-theme-border-color: rgb(42, 42, 42);

    --back-top-page-color: rgb(32, 32, 32);
    --back-top-page-bc: rgb(255, 255, 255);
    --back-top-page-border-color: rgb(32, 32, 32);
    --back-top-page-hover-bc: rgb(32, 32, 32);
    --back-top-page-hover-color: rgb(255, 255, 255);
    --back-top-page-hover-border-color: rgb(32, 32, 32);
    
    --urls-col-hover-back-color: rgb(255, 92, 80);
}

[data-theme = "dark"] {
    --last-page-bc: rgb(32, 32, 32);
    --last-page-color: rgb(252, 232, 216);
    --last-page-border-color: rgb(32, 32, 32);
    --last-page-hover-bc: rgb(32, 32, 32);
    --last-page-hover-color: rgb(47, 255, 141);
    --last-page-hover-border-color: rgb(47, 255, 141);

    --theme-view-top-color: rgb(252, 232, 216);
    --theme-title-bc: rgba(96, 249, 165, 0.85);
    --theme-title-color: rgb(26, 26, 26);

    --references-links-bc: rgba(47, 47, 47, 0.9);
    --references-links-c: rgb(197, 197, 197);
    --references-links-hover-back-color: rgb(47, 255, 141);
    --references-links-c-hover: rgb(27, 27, 27);
    --references-links-border: rgb(23, 23, 23);
    --credits-link-color: rgb(167, 167, 167);
    --credits-link-border-bottom-color: rgb(23, 23, 23);

    --section-title-container-border-color: rgb(32, 32, 32);
    --section-title-container-bc: rgb(36, 36, 36);
    --section-title-content-color: rgb(163, 163, 163);
    --section-first-letter-bc: rgb(124, 252, 181);
    --section-first-letter-color: rgb(26, 26, 26);
    --section-content-bc: rgb(36, 36, 36);
    --section-content-border-color: rgb(32, 32, 32);
    --container-row-border-color: rgb(18, 18, 18);

    --toggle-container-back-color: rgb(47, 255, 141);
    --toggle-section-color: rgb(26, 26, 26);
    --toggle-section-hover-back-color: rgb(47, 255, 141);
    --toggle-section-hover-color: rgb(112, 112, 112);
    
    --notion-title-block-h3-color: rgba(96, 249, 165, 0.85);
    --notion-title-h2-color: rgb(181, 181, 181);
    --notion-description-color: rgb(146, 146, 146);

    --published-info-color: rgb(168, 168, 168);

    --display-order-info-back-color: rgba(168, 168, 168);
    --display-order-info-color: rgb(26, 26, 26);
    --display-order-info-border-color: rgb(168, 168, 168);

    --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-hover-shadow-color: rgb(47, 255, 141);
    --feature-button-hover-border-color: rgb(47, 255, 141);
    --feature-button-hover-color: rgb(200, 200, 200);

    --sources-link-color: rgb(252, 232, 216);

    --edit-link-bc: rgb(31, 31, 31);
    --edit-link-border-color: rgb(32, 32, 32);
    --edit-link-a-color: rgb(152, 152, 152);
    --edit-link-a-hover-color: rgb(32, 32, 32);
    --edit-link-a-hover-bc: rgb(47, 255, 141);
    --edit-link-theme-bc: rgb(44, 44, 44);
    --edit-link-theme-color: rgb(168, 168, 168);
    --edit-link-theme-border-color: rgb(32, 32, 32);

    --back-top-page-bc: rgb(32, 32, 32);
    --back-top-page-color: rgb(252, 232, 216);
    --back-top-page-border-color: rgb(179, 178, 174);
    --back-top-page-hover-bc: rgb(32, 32, 32);
    --back-top-page-hover-color: rgb(47, 255, 141);
    --back-top-page-hover-border-color: rgb(47, 255, 141);
    --urls-col-hover-back-color: rgb(47, 255, 141);
}


.back-home
{
    display: flex;
    align-self: end;
    width: fit-content;
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.back-home img
{
    width: 3rem;
}

/*
.back-to-last-page
{
    display: flex;
    align-self: end;
    width: fit-content;
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    font-size: 0.9rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: var(--last-page-color);
    background-color: var(--last-page-bc);
    border: 2px solid var(--last-page-border-color);
    text-decoration: none;
}

.back-to-last-page:hover
{
    background-color: var(--last-page-hover-bc);
    color: var(--last-page-hover-color);
    border: 2px solid var(--last-page-hover-border-color);
}
    */

#theme-view-top
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#theme-view-top a
{
    color: var(--theme-view-top-color);
    padding-right: 0.5rem;
}

#theme_title
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 0.55rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: var(--theme-title-bc);
    width: fit-content;
    border-radius: 3px;
    padding: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--theme-title-color);
}

#theme_title h1
{
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: 3rem;
}

#theme_title h1 span
{
    font-size: 0.85rem;
    font-weight: normal;
    padding-left: 0.5rem;
    font-style: italic;
}

#theme_title .edit-link-box
{
    justify-content: start;
    width: 100px;
    font-size: 0.9rem;
    margin: 0;
    margin-top: 0.2rem;
    padding: 0;
}

#references-links
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--references-links-bc);
    border: 1px solid var(--references-links-border);
    color: var(--references-links-c);
    margin-bottom: 0.5rem;
    border-radius: 3px;
}

#references-links a
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    color: var(--references-links-c);
    font-weight: bold;
}

#references-links a:hover
{
    color: var(--references-links-c-hover);
    background-color: var(--references-links-hover-back-color);
}

#references-links div {
    display: flex;
    width: 100%;
}

#references-links .credits-link {
    border-bottom: 1px solid var(--credits-link-border-bottom-color);
}

.section-title-container
{
    display: flex;
    flex-direction: column;
    border: 6px solid var(--section-title-container-border-color);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    width: 100%;
    margin: auto;
    background-color: var(--section-title-container-bc);
}

.section-title-content
{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    font-size: 1.7rem;
}

.section-title-content h1
{
    display: flex;
    margin: 0;
    color: var(--section-title-content-color);
}

.section-title-content h1 .subsections-prefix
{
    font-size: 1rem;
    margin-right: 0.5rem;
}

.section-title-content h1 .section-first-letter
{
    display: flex;
    width: min-content;
  	height: min-content;
    border-radius: 3px;
    background-color: var(--section-first-letter-bc);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-right: 0.1rem;
    color: var(--section-first-letter-color);
}

.toggle-container {
    display: flex;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    background-color: var(--toggle-container-back-color);
}

.toggle-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    color: var(--toggle-section-color);
    padding-bottom: 0.5rem;
    font-size: 3rem;
    width: 100%;
    border-radius: 3px;
}

.toggle-section:hover {
    background-color: var(--toggle-section-hover-back-color);
    color: var(--toggle-section-hover-color);
}

.section-content-global-container
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 0 0 3px 3px;
    width: 100%;
    height: 100%;
    margin: auto;
    border: 6px solid var(--section-content-border-color);
    margin-bottom: 3rem;
    background-color: var(--section-content-bc);
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    opacity: 1;
}

.section-content-global-container-border-radius
{
    border-radius: 3px;
}

.admin-section-content-global-container {
    margin-bottom: 0.7rem;
}

.container-row
{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--container-row-border-color);
    flex: 1;
    padding: 0;
    margin: 0.15rem 0.2rem;
    border-radius: 3px;
}

.notion-container
{
    display: flex;
    flex-direction: column;
    max-width: 95%;
    min-width: 308px;
    padding: 1rem;
    padding-top: 0.5rem;
}

.published-info-box
{
    display: flex;
    justify-content:end;
    margin: 0;
    padding: 0.3rem 0.3rem 0 0.3rem;
    width: 99%;
}

.published-info, .display-order-info
{
    display: flex;
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    color: var(--display-order-info-color);
    cursor: default;
}

.published-info
{
    justify-content: center;
    font-style: italic;
    color: var(--published-info-color);
}

.display-order-info
{
    border-radius: 3px;
    padding: 0 0.4rem 0.2rem 0.4rem;
    background-color: var(--display-order-info-back-color);
    border: 1px solid var(--display-order-info-border-color);
    font-weight: 700;
}

.split-info
{
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.notion-img-block
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
}

.notion-img-block img
{
    height: 75%;
    border-radius: 3px;
}

.notion-title-block
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70px;
}

.notion-title-block h2, .notion-title-block h3
{
    margin: 0;
    text-align: center;
}

.notion-title-block h3
{
    color: var(--notion-title-block-h3-color);
    font-style: italic;
    font-size: 1.4rem;
}

.notion-title-h2
{
    display: flex;
    justify-content: center;
    font-size: 2.3rem;
    color: var(--notion-title-h2-color);
}



.notion-description
{
    line-height: 1.3rem;
    color: var(--notion-description-color);
    font-size: 1rem;
}

.external-link-container
{
    width: 90%;
    margin-bottom: 10px;
    border-radius: 3px;
}

.external-link
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.external-link a
{
    display: flex;
    flex: 1;
    border: 2px solid rgb(42, 42, 42);
    background-color: rgb(42, 42, 42);
    margin-right: 5px;
    border-radius: 3px;
}

.external-link-container .external-link img
{
    border: 2px solid transparent;
    height: 40px;
}

.external-link-container .external-link a:hover img
{
    border-radius: 3px;
    background-color: rgb(173, 47, 66);
}



/*
** Part admin_theme
*/

#features-buttons-container
{
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

#features-buttons-row
{
    display: flex;
    justify-content: space-between;
    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.6rem;
}

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

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


#features-buttons-row #sources-link
{
    display: flex;
    align-items: end;
    color: var(--sources-link-color);
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}

.edit-link-box
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    padding-bottom: 0.5rem;
}

.edit_link
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0.5;
    background-color: var(--edit-link-bc);
    border: 1px solid var(--edit-link-border-color);
    border-radius: 3px;
    min-width: 90px;
}

.edit-link-height
{
    height: 50px;
}

.edit_link:first-child
{
    margin-left: 6px;
    margin-right: 6px;
}

.edit_link:last-child
{
    margin-right: 6px;
}

.edit_link a
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0.4rem;
    text-decoration: none;
    color: var(--edit-link-a-color);
    border-radius: 3px;
}

.edit_link a:hover
{
    background-color: var(--edit-link-a-hover-bc);
    font-weight: bold;
    color: var(--edit-link-a-hover-color);
}

.edit-link-theme
{
    color: var(--edit-link-theme-color);
    background-color: var(--edit-link-theme-bc);
    border: 1px solid var(--edit-link-theme-border-color);
}

#back-top-page
{
    display: flex;
    text-decoration: none;
    color: var(--back-top-page-color);
    background-color: var(--back-top-page-bc);
    border: 2px solid var(--back-top-page-border-color);
    padding: 0.3rem;
    border-radius: 3px;
    width: fit-content;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

#back-top-page:hover
{
    background-color: var(--back-top-page-hover-bc);
    color: var(--back-top-page-hover-color);
    border: 2px solid var(--back-top-page-hover-border-color);
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*/////////////////////////// URLS PART \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// URLS PART \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// URLS PART \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// URLS PART \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// URLS PART \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV*/

.urls-container {
    display: flex;
    border-radius: 3px;
    margin: 0;
}

.urls-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.urls-col {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.urls-col .url-link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: rgb(26, 26, 26);
    border-radius: 3px;
    background-color: rgb(63, 63, 63);
    width : 50px;
    height : 50px;
}

.urls-col:hover {
    background-color: var(--urls-col-hover-back-color);
    border-radius: 3px;
    
}

.urls-col .url-link-btn-Image {
    background: url('/web/icons_images/camera_blue_white_icon_454654561.png') no-repeat center;
    background-size: cover;
}

.urls-col .url-link-btn-Video {
    background: url('/web/icons_images/white_blue_camera_video.png') no-repeat center;
    background-size: cover;
}

.urls-col .url-link-btn-Audio {
    background: url('/web/icons_images/white_blue_radio_two_parts_aerial.png') no-repeat center;
    background-size: cover;
}

.urls-col .url-link-btn-Text {
    background: url('/web/icons_images/document_stand_up_blue_white_with_border.png') no-repeat center;
    background-size: cover;
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*/////////////////////////// RESPONSIVE \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// RESPONSIVE \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// RESPONSIVE \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// RESPONSIVE \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*/////////////////////////// RESPONSIVE \\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV*/

@media screen and (max-width: 580px) {
    main {
        width: 95%;
    }

    .section-content-global-container
    {
        padding-top: 0;
        padding-bottom: 0;
    }

    #theme_title h1 {
        font-size: 2.2rem;
    }

    .section-title-content h1 {
        font-size: 1.3rem;
    }

    .section-title-content h1 .section-first-letter {
        display: inline;
    }

    .container-row
    {
        margin: 0;
        border-radius: 0px;
    }

    .notion-description
    {
        hyphens: auto;
    }
}

@media screen and (max-width: 350px) {
    .notion-container
    {
        min-width: 280px;
    }
}