@import "/styles/root.css";

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ////////////////////////////////////////////////////////////HTML-ROOT */
html {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    color: var(--color-font-main);
    font-family: var(--font-family_main);
    scrollbar-color: #00000040 #00000000;
    scrollbar-width: thin;
}
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}


/* ////////////////////////////////////////////////////////////ERROR */
.p-error-1 {
    width: fit-content;
    margin: auto;
    font-size: calc(var(--root) * 3);

}
.p-error-2 {
    width: fit-content;
    margin: auto;
    font-size: calc(var(--root) / 3);
}


/* ////////////////////////////////////////////////////////////LAYOUT */
/* ///////////////////////////////CONTENT */
.content-frame {
    position: relative;
    margin-left: var(--margin-left);
    margin-right: var(--margin-right);
    margin-bottom: var(--margin-bottom);
    padding: var(--spacing2-root);
    height: fit-content;
}
.frame {
    position: absolute;
    width: var(--root);
    height: var(--root);
}
.c1 {
    left: 0;
    top: 0;
}
.c2 {
    right: 0;
    bottom: 0;
}
.content {
    padding: calc(var(--spacing-root) * 2);
    width: 100%;
    font: var(--font_body);
}


/* ///////////////////////////////OVERLAY*/
.overlay {
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vw;
}
.version {
    float: right;
    margin-right: calc(var(--spacing-root) * 2);
    margin-top: var(--spacing-root);
    width: fit-content;
    height: fit-content;
    font-size: calc(var(--root) / 8);
    opacity: 0.4;
}


/* ///////////////////////////////NAVIGATION */
.navigation {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: stretch;
    gap: var(--spacing-root);
    
    margin-top: var(--spacing4-root);
    margin-bottom: var(--spacing2-root);
    margin-left: var(--margin-left);
    width: fit-content;
    height: fit-content;
}
.navigation-toggle {
    cursor: pointer;
    height: var(--spacing2-root);
    object-fit: contain;
}
.navigation-item {
    padding: .2rem;
    font: var(--font_navigation);
    color: var(--color-font_navigation);
    text-decoration: inherit;
    text-align: center;
    transition: background-color var(--animation-duration_fast);
    transition: opacity var(--animation-duration_fast);
}
.navigation-item:hover {
    color: rgb(255, 255, 255);
    background-color: var(--color-font_navigation);
    background-origin: border-box;
    background-size: 100% 100%;
}
.navigation-item.active {
    color: rgb(255, 255, 255);
    background-color: var(--color-font_navigation);
    background-origin: border-box;
    background-size: 100% 100%;
}
.navigation-bold {
    font-weight: bold;
}
.navigation-item.search {
    max-width: 10rem;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: calc(var(--root) / 64) solid;
}
.navigation-item.search:hover {
    color: var(--color-font_navigation);
    background-color: rgb(255, 255, 255);
}
.search-icon {
    margin-left: calc(var(--font-size_navigation) / 2);
    height: calc(var(--font-size_navigation) * 4 / 5);
    object-fit: contain;
}

.mobile {
    display: none;
    pointer-events: none;
}



@media only screen and (max-width: 32rem) {
    .content-frame {
        position: relative;
        margin-left: var(--margin-left_mobile);
        margin-right: var(--margin-right_mobile);
        margin-bottom: var(--margin-bottom);
        padding: var(--spacing2-root_mobile);
        height: fit-content;
    }
    .content {
        padding: var(--spacing2-root_mobile);
        width: 100%;
    }

    .navigation {
        margin-left: var(--margin-left_mobile);
    }
    .navigation-item {
        display: none;
    }
    .mobile {
        display: block;
        opacity: 0;
        transition: opacity .2s;
        pointer-events: all;
    }
    .mobile-background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffffd8;
        display: flex;
        justify-content: center;
    }
    .mobile-navigation {
        width: fit-content;
        height: fit-content;
        margin-top: 30%;
    }
    .mobile-item {
        display: block;
        margin-bottom: var(--spacing2-root);
    }
    /* .navigation-item.search {
        display: inline-block;
    } */
    
}


/* ////////////////////////////////////////////////////////////CONTENT */
/* ///////////////////////////////LAYOUT */
/* //////////////DYNAMIC */
.align {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    gap: var(--spacing2-root);
}
.align-left {
    justify-content: flex-start;
}
.align-right {
    justify-content: flex-end;
}
.align-center {
    justify-content: center;
}

.orient {
    display: flex;
}
.orient.orient-text {
    flex-flow: row wrap;
    gap: var(--spacing4-root);
    align-items: flex-end;
}
.orient-left.orient-text {
    flex-flow: row-reverse wrap;
}
.orient-right.orient-text {
    flex-flow: row wrap;
}
.orient.orient-caption {
    flex-flow: column nowrap;
    gap: var(--spacing-root);
}
.orient-left.orient-caption > .caption {
    align-self: flex-start;
    text-align: left;
}
.orient-right.orient-caption > .caption {
    align-self: flex-end;
    text-align: right;
}

/* //////////////STATIC */
.spacer1 {
    height: var(--spacing-root);
}

.spacer2 {
    height: var(--spacing2-root);
}

/* ///////////////////////////////MEDIA */
/* //////////////TEXT */
.text {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.text.body {
    width: 18rem;
    text-align: justify;
    text-justify: inter-word;
    
    font: var(--font-body);
    color: var(--color-font_body);
    text-decoration: none;
}
.text.caption {
    font: var(--font_caption);
    max-width: 10rem;
}

.text.legend {
    font: var(--font_legend);
    color: var(--color-font_info);
}

/* //////////////IMAGE */
.image {
    display: block;
    min-width: 0;
    max-width: 100%;
    object-fit: scale-down;
}

/* //////////////VIDEO */
.video-container {
    display: flex;
    flex-flow: column nowrap;
    align-self: start;
    max-width: 100%;
}
.video {
    max-width: 100%;
}
.video-control {
    margin: calc(var(--spacing-root) / 2);
    width: calc(var(--root) / 4);
    height: calc(var(--root) / 4);
    z-index: 1;
    cursor: pointer;
}
.video-reload {
    margin-left: 0;
}

/* ///////////////////////////////FUNCTIONS */
/* //////////////ENLARGE */
.enlarge {
}
.enlargeable {
    cursor: zoom-in;
}
.enlarge-background {
    cursor: zoom-out;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffffd8;
    opacity: 0;
    transition: opacity .2s;

    display: flex;
    flex-direction: row;
    gap: var(--spacing-root);
    align-items: center;
    justify-content: center;
}
.enlarged-object {
    align-self: start;
    margin-top: var(--spacing2-root);
    margin-bottom: var(--spacing2-root);
    max-width: calc(100vw - var(--spacing4-root));
    max-height: calc(100vh - var(--spacing4-root));
}