/*Corelient*/
@import 'normalize.css';
@import 'cscroll.css';

body
{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;

    &:has(nav:popover-open)
    {
        button.nav
        {
            background: rgba(var(--red), 0.75);
        }
    }

    & header
    {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: flex-start;
        width: calc(var(--step) * 1.5);
        height: 100dvh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 3;

        @media all and (width < 1000px)
        {
            margin: 0;
            background: rgba(var(--black), 0.1);
            width: 100vw;
            height: 60px;
            backdrop-filter: blur(10px);
        }

        & a
        {
            margin: calc(var(--indent) * 3) auto 0;

            @media all and (width < 1000px)
            {
                margin: 11px 0 0 8px;
                width: 40px;
            }

            & img
            {
                width: 100%;

                @media all and (width < 1000px)
                {
                    margin: 0;
                }
            }
        }

        & button.nav
        {
            background: none;
            padding: 0;
            margin: 0 0 0 auto;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            position: relative;
            z-index: 10;
            cursor: pointer;
            transition: all 0.3s;

            @media all and (width > 999px)
            {
                display: none;
            }

            &:hover
            {
                opacity: 0.5;
            }

            & img
            {
                width: 32px;
            }

        }
    }

    & nav
    {
        background: none;
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 75dvh;
        max-height: 100dvh;
        position: fixed;
        left: calc(100vw - 75dvh);
        top: 0;
        z-index: 3;
        overflow: visible;
        transition: all 0.3s;

        @media all and (width < 1000px)
        {
            max-height: calc(100dvh - 60px);
            width: 280px;
            left: 100vw;
            top: 60px;
            overflow-y: auto;

            &:popover-open
            {
                left: calc(100vw - 280px);
            }
        }

        & a
        {
            font-family: var(--hfont);
            font-size: calc(var(--fontsize) * 0.25);
            background: rgba(var(--green), 0.5);
            padding: 0 0 var(--indent);
            height: 25dvh;
            display: flex;
            align-items: flex-start;
            align-content: flex-start;
            justify-content: flex-start;
            flex-direction: column;
            aspect-ratio: 1 / 1;
            backdrop-filter: blur(10px);

            @media all and (width < 1000px)
            {
                font-size: 14pt;
                margin: 0;
                padding: 0 0 16px;
                align-items: center;
                align-content: center;
                width: 100%;
                height: unset;
                aspect-ratio: unset;
                flex-direction: row;

                &:nth-of-type(odd)
                {
                    background: rgba(var(--green), 0.25);
                }
            }

            &:hover
            {
                background: rgba(var(--green), 0.75);
            }

            &.selected,
            &.current
            {
                background: rgba(var(--red), 0.5);
                text-decoration: none !important;
            }

            &:nth-of-type(1)
            {
                margin-right: 50dvh;

                @media all and (width < 1000px)
                {
                    margin: 0;
                }

                @media all and (aspect-ratio >= 1/1) and (aspect-ratio <= 4/3), (orientation: portrait) and (width >= 1000px)
                {
                    margin-left: 25dvh;
                    margin-right: 25dvh;
                }
            }

            &:nth-of-type(2),
            &:nth-of-type(4)
            {
                background: rgba(var(--green), 0.4);

                &:hover
                {
                    background: rgba(var(--green), 0.75);
                }

                &.selected,
                &.current
                {
                    background: rgba(var(--red), 0.5);
                }
            }

            &:nth-of-type(2)
            {
                @media all and (aspect-ratio >= 1/1) and (aspect-ratio <= 4/3), (orientation: portrait) and (width >= 1000px)
                {
                    margin-left: 50vh;
                }
            }

            &:nth-of-type(3)
            {
                @media all and (aspect-ratio >= 1/1) and (aspect-ratio <= 4/3), (orientation: portrait) and (width >= 1000px)
                {
                    margin-left: 25dvh;
                }
            }

            &:nth-of-type(4)
            {
                margin-left: 50dvh;

                @media all and (aspect-ratio >= 1/1) and (aspect-ratio <= 4/3), (orientation: portrait) and (width >= 1000px)
                {
                    margin-left: 0;
                }

                @media all and (width < 1000px)
                {
                    margin: 0;
                }
            }

            &:nth-of-type(5)
            {
                margin-right: 25dvh;

                @media all and (width < 1000px)
                {
                    margin: 0;
                }
            }

            & strong
            {
                font-weight: normal;
                padding: calc(var(--indent) * 0.75) var(--indent) 0;
                width: 100%;

                @media all and (aspect-ratio > 5/2)
                {
                    font-size: calc(var(--fontsize) * 0.15);
                }

                @media all and (width < 1000px)
                {
                    padding: 16px 20px 0;
                }
            }

            & img
            {
                width: calc(var(--step) / 1.777);
                margin: auto;

                @media all and (aspect-ratio > 70/27)
                {
                    width: calc(var(--step) / 3);
                }

                @media all and (width < 1000px)
                {
                    margin: 16px 20px 0 8px;
                    min-width: 32px;
                }
            }
        }
    }

    & main
    {
        margin: 0;
        width: calc(var(--step) * 12);

        & article
        {
            background-attachment: fixed;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 24.3dvh calc(var(--step) * 4.5) calc(var(--indent) * 4) calc(var(--step) * 1.5);
            width: 100%;
            min-height: 100dvh;
            z-index: 1;
            position: relative;
            overflow: hidden;

            @media all and (width < 1000px)
            {
                padding: 80px;
            }

            @media all and (width < 641px)
            {
                padding: 80px 20px;
            }

            &:before
            {
                content: '';
                background: rgba(var(--black), 0.5);
                width: 100vw;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }

            &.intro
            {
                background-image: url('../img/intro.webp');

                & > img
                {
                    margin: var(--indent) auto calc(var(--step) * 0.75);
                    width: calc(var(--step) * 3);
                    position: relative;
                    z-index: 3;
                    display: block;

                    @media all and (width > 999px)
                    {
                        display: none;
                    }
                }

                & section
                {
                    flex-direction: column;
                }
            }

            &.who_we
            {
                background-image: url('../img/who_we.webp');
            }

            &.services
            {
                background-image: url('../img/services.webp');

                & section
                {
                    & > ol
                    {
                        & > li
                        {
                            margin-bottom: calc(var(--indent) * 3);

                            @media all and (width < 1000px)
                            {
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
            }

            &.philosophy
            {
                background-image: url('../img/philosophy.webp');
            }

            &.contacts
            {
                background-image: url('../img/contacts.webp');

                & a
                {
                    text-decoration: underline;

                    &:hover
                    {
                        text-decoration: none;
                    }
                }
            }

            &.why
            {
                background-image: url('../img/why.webp');

                & dl
                {
                    display: flex;
                    align-items: flex-start;
                    align-content: flex-start;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    position: relative;

                    &:before,
                    &:after
                    {
                        font-family: var(--hfont);
                        font-size: calc(var(--fontsize) * 0.25);
                        text-transform: uppercase;
                        writing-mode: vertical-rl;
                        transform: rotate(180deg);
                        position: absolute;
                        top: calc(var(--indent) / 3);
                    }

                    @media all and (width < 1000px)
                    {
                        &:before,
                        &:after
                        {
                            display: none;
                        }
                    }

                    &:before
                    {
                        content: attr(data-dt);
                        left: 0;
                    }

                    &:after
                    {
                        content: attr(data-dd);
                        left: calc((var(--step) * 2) - var(--indent));
                    }

                    & dt
                    {
                        font-size: calc(var(--fontsize) * 0.35);
                        font-weight: 700;
                        margin: 0 calc(var(--indent) * 2) var(--indent);
                        width: calc((var(--step) * 1.5));

                        @media all and (width < 1000px)
                        {
                            font-size: 16pt;
                            width: 100%;
                            margin: 0;
                        }
                    }

                    & dd
                    {
                        margin: 0 0 var(--indent) var(--indent);
                        width: calc(var(--step) * 3);

                        @media all and (width < 1000px)
                        {
                            width: 100%;
                            margin: 0 0 20px;
                        }
                    }
                }
            }

            & h1,
            & section
            {
                position: relative;
                z-index: 3;

                & .readmore
                {
                    margin: 0 0 0 calc(var(--indent) * -1);
                }
            }

            & h1
            {
                margin: 0 0 var(--indent);
                width: 100%;
            }

            & h2
            {
                width: calc(var(--step) * 5);

                @media all and (width < 1000px)
                {
                    width: 100%;
                }
            }

            & section
            {
                display: flex;
                align-items: flex-start;
                align-content: flex-start;
                justify-content: flex-start;
                flex-wrap: wrap;

                & ol,
                & ul,
                & li
                {
                    margin-bottom: var(--indent);

                    @media all and (width < 1000px)
                    {
                        margin-bottom: 20px;
                    }

                }
            }

            & p
            {
                width: calc(var(--step) * 4);

                @media all and (width < 1000px)
                {
                    width: 100%;
                }
            }

            & aside
            {
                &.bg
                {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;

                    & div
                    {
                        background: rgb(var(--red));
                        mix-blend-mode: multiply;
                        aspect-ratio: 1 / 1;
                        position: absolute;

                        &:nth-of-type(1)
                        {
                            height: 50dvh;
                            left: 0;
                            top: 0;

                            @media all and (width < 1000px)
                            {
                                height: 50vw;
                            }
                        }

                        &:nth-of-type(2)
                        {
                            height: 25dvh;
                            left: 50dvh;
                            top: 50dvh;

                            @media all and (width < 1000px)
                            {
                                height: 25vw;
                                left: 50vw;
                                top: 50vw;
                            }
                        }

                        &:nth-of-type(3)
                        {
                            height: 12.5dvh;
                            left: 37.5dvh;
                            top: 75dvh;

                            @media all and (width < 1000px)
                            {
                                height: 12.5vw;
                                left: 37.5vw;
                                top: 75vw;
                            }
                        }
                    }
                }
            }
        }
    }
}