/*theme colors*/

:root {
    /* Light theme colors */
    --color-sidebar-bg: #ffeb7a;
    --color-sidebar-tab: #fff2a7;
    --color-sidebar-border: #cf8d1c;
    --color-sidebar-link: #ffe137;
    --color-sidebar-link-hr: #f9c700;
    --color-sidebar-link-selected: #daa520;
    --color-primary-text: #a80000;
    --color-secondary-text: #a80000;
    --color-text-tertiary: #800000;
    --color-book-select: #a80000;
    --color-slider-thumb-bg: #f5f5f5;
    --color-slider-thumb-txt: #636363;
    --color-slider-thumb-br: #c3c8c8;
    --color-slider-primary: #b3b7b8;
    --color-slider-secondary: #dbe0e1;
    --color-content-bg: #ffffff;
}

body.dark-theme {
    /* Dark theme colors */
    --color-sidebar-bg: #1f2873;
    --color-sidebar-tab: #0d134c;
    --color-sidebar-border: #4169e1;
    --color-sidebar-link: #000067;
    --color-sidebar-link-hr: #000086;
    --color-sidebar-link-selected: #0b0ba8;
    --color-primary-text: #4169e1;
    --color-secondary-text: #7d9dfc;
    --color-text-tertiary: #4169e1;
    --color-book-select: #4970e6;
    --color-slider-thumb-bg: #254b6f;
    --color-slider-thumb-txt: #020c15;
    --color-slider-thumb-br: #0a1d2e;
    --color-slider-primary: #0c243a;
    --color-slider-secondary: #18344f;
    --color-content-bg: #020c15;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::-webkit-scrollbar {
    width: 0;
}

body {
    overflow: hidden;
}

#img-container {
    overflow-y: scroll;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 80px 40px 20px 40px;

    height: 100vh;
}

img {
    align-self: center;
    max-height: 300px;

    &:hover {
        cursor: pointer;
    }

    /* note: prevent img from being selected when incedentaly double clicked */
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

/* modal */

#modal {
    display: none;
}

body.display-modal #modal {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    background: var(--color-content-bg);
    opacity: .85;
}

#modal-content {
    z-index: 5;
    overflow-y: scroll;

    height: 100vh;
}

#modal-img-box {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;

    

    
}

#modal-img {
    max-height: 75vh;

    &:hover {
        cursor: default;
    }

}


#desc {
    margin: 80px auto 40px auto;

    max-width: 50vw;

    font-family: rubik;
    font-weight: 600;
    font-size: 20px;
    color: var(--color-book-select);
    
    @media (height >=800px) {
        margin-top: 120px;
    }
}

i::before {
    display: none;
}

body.display-modal i {
    z-index: 6;
    position: fixed;
    top: 50%;
    display: block;

    font-size: 130px;
    color: var(--color-book-select);
    opacity: .3;


    &::before {
        display: block;
    }

    &:hover {
        opacity: .8;
    }


    &.fa-arrow-circle-o-left {
        left: 100px;

        @media (width <=1365px) {
            left: 65px;
        }

    }

    &.fa-arrow-circle-o-right {
        right: 100px;

        @media (width <=1365px) {
            right: 65px;
        }

    }

}