@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

        /* var */
        :root {
            --radius_s: 5px;
            --radius_curvature_s: 10px;
            --radius_curvature_m: 20px;
            --color_main-background-light: #F0F0F0;
            --color_main-background-dark: #1A171C;
            --scrollbar-width: 13;
            --overview-grid-width: calc(100vw + 50px);
        }

        html {
            font-family: "Inter", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 0.02rem;
            font-size: 15px;
            background-color: var(--color_main-background-dark);

        }

        /* Standard Elements */
        body {
            margin: 0;
            padding: 0;

        }


        h1 {
            margin: 2px 0 2px 0;
            font-weight: 400;
            font-size: 2.9rem;
        }

        h2 {
            margin: 2px 0 2px 0;
            font-weight: 400;
            font-size: 2.4rem;
        }

        h3 {
            margin: 2px 0 2px 0;
            font-weight: 400;
            font-size: 1.7rem;
        }

        h4 {
            margin: 2px 0 2px 0;
            font-weight: 400;
            font-size: 1.5rem;
        }

        h5 {
            margin: 2px 0 2px 0;
            font-weight: 400;
            font-size: 1.2rem;
        }

        h6 {
            margin: 2px 0 2px 0;
            font-weight: 400;
            font-size: 0.9rem;
        }

        p {
            margin: 2px 0 2px 0;
            font-weight: 400;
        }





        /* perspective */
        .perspective {
            perspective: 2000px;
            transform-style: preserve-3d;
        }

        /* structure */
        #layer1 {
            visibility: hidden;
            opacity: 0;
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: center;
            align-items: start;
            z-index: 2000;
            overflow: scroll;
            scrollbar-gutter: stable both-edges;
            overscroll-behavior: none;
        }

        #layer1.show {
            visibility: visible;
            opacity: 1;
        }

        .container.closebutton {
            position: fixed;
            padding: 5px;
            top: 70px;
            left: 70px;
            width: 40px;
            height: 40px;
            background-color: white;
            z-index: 1;
        }

        .container.notice {
            position: fixed;
            top: 30px;
            width: 400px;
            min-height: 70px;
            z-index: 3;
            background-color: black;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .container.sticker {
            position: absolute;
            top: 50px;
            right: 50px;
            width: 80px;
            height: 80px;
            background-color: white;
            z-index: 1;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(15deg);
        }

        .container.main-view {
            margin: 60px 60px 0 60px;
        }

        .main-view {
            background-color: var(--color_main-background-light);
            width: calc(100vw - 100px);
            min-height: calc(100vh - 120px);
        }

        #layer2 {
            position: absolute;
            transform: translateY(100vh);
            width: 100%;
            z-index: 1000;
            margin: 0 0 50px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
        }

        .container.overview {
            width: var(--overview-grid-width);
        }

        .container_archive {
            background-color: darkslategray;
            width: 100%;
            height: 200px;
        }

        .container_pages {
            background-color: cadetblue;
        }


        #layer3 {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: var(--color_main-background-dark);
            display: flex;
            flex-direction: column;
            align-content: stretch;
            justify-content: space-between;
            color: white;
        }


        .container.header {
            height: 100px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .container.myname {}

        .container.menu {}

        #layer3.body {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: start;
            overflow-x: scroll;
            flex-wrap: nowrap;
        }

        .container.about {
            height: 100%;
            width: 3000px;
        }

        .container.footer {
            height: 100px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .hflex {
            display: flex;
            flex-direction: row;
        }

        .vflex {
            display: flex;
            flex-direction: column;
        }

        .hspace-100 {
            height: 100px;
        }

        .page {
            position: absolute;
            transform-style: preserve-3d;
            transform-origin: 50% 50%;
            width: 25%;
            height: auto;


        }


        /* design */
        .radius_s {
            border-radius: var(--radius_s);
        }

        .radius_curvature_s {
            clip-path: shape(from var(--radius_curvature_s) 0,
                    line to calc(100% - var(--radius_curvature_s)) 0,
                    curve to 100% var(--radius_curvature_s) with 100% 0,
                    line to 100% calc(100% - var(--radius_curvature_s)),
                    curve to calc(100% - var(--radius_curvature_s)) 100% with 100% 100%,
                    line to var(--radius_curvature_s) 100%,
                    curve to 0 calc(100% - var(--radius_curvature_s)) with 0 100%,
                    line to 0 var(--radius_curvature_s),
                    curve to var(--radius_curvature_s) 0 with 0 0);
        }


        .radius_curvature_m {
            clip-path: shape(from var(--radius_curvature_m) 0,
                    line to calc(100% - var(--radius_curvature_m)) 0,
                    curve to 100% var(--radius_curvature_m) with 100% 0,
                    line to 100% calc(100% - var(--radius_curvature_m)),
                    curve to calc(100% - var(--radius_curvature_m)) 100% with 100% 100%,
                    line to var(--radius_curvature_m) 100%,
                    curve to 0 calc(100% - var(--radius_curvature_m)) with 0 100%,
                    line to 0 var(--radius_curvature_m),
                    curve to var(--radius_curvature_m) 0 with 0 0);
        }

        .shadow {
            filter: drop-shadow(0 2.8px 2.2px rgba(0, 0, 0, 0.434)) drop-shadow(0 6.7px 5.3px rgba(0, 0, 0, 0.248)) drop-shadow(0 22.3px 17.9px rgba(0, 0, 0, 0.072)) drop-shadow(0 100px 80px rgba(0, 0, 0, 0.12));
        }



        /* Scrollbar */
        /* Hide scrollbar for Chrome, Safari and Opera */
        *::-webkit-scrollbar {
            display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        * {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }




        /* spaces */
        .space-100 {
            height: 100px;
        }


        .content {
            width: 100%;
            height: 100%;
            min-height: 100px;
            background-color: bisque;
        }

        .background {
            width: 100%;
            min-height: 500px;
            height: 100%;
            background-color: red;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            box-shadow:
                0 2.8px 2.2px rgba(0, 0, 0, 0.034),
                0 6.7px 5.3px rgba(0, 0, 0, 0.048),
                0 12.5px 10px rgba(0, 0, 0, 0.06),
                0 22.3px 17.9px rgba(0, 0, 0, 0.072),
                0 41.8px 33.4px rgba(0, 0, 0, 0.086),
                0 100px 80px rgba(0, 0, 0, 0.12)
        }

        .archive {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            background-color: beige;
            transform-style: preserve-3d;
        }



        .archive.element {
            width: 100%;
            height: 100%;
            background-color: rgba(192, 124, 159, 0.35);
            transform: translate3d(0, 0, 10px);
        }


        .archive.element-floating.size {
            width: 200px;
            height: 300px;
            transition: all 2s;
        }

        .archive.element-floating.position {
            position: absolute;
            top: 100px;
            left: 1000px;
            transform: translate3d(0, 0, 100px);
            transition: all 2s;

        }


        .p1 {
            background-color: blue;
            width: 210px;
            height: 297px;
        }

        .main-view .p1 {
            background-color: blue;
            width: 600px;
            height: 800px;
        }

        .p2 {
            background-color: red;
            width: 210px;
            height: 297px;
        }

        .p3 {}




        /* grid */
        .grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(9, calc(var(--overview-grid-width) / 6));
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            width: 100%;
        }

        .container.overview .container.project {
            margin: 1px;
            background-color: var(--color_main-background-light);
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .grid-section-1 {
            grid-area: 1 / 1 / 3 / 4;
        }

        .grid-section-2 {
            grid-area: 1 / 4 / 5 / 7;
        }

        .grid-section-3 {
            grid-area: 3 / 1 / 8 / 4;
        }

        .grid-section-4 {
            grid-area: 5 / 4 / 9 / 7;
        }

        .grid-section-5 {
            grid-area: 8 / 1 / 10 / 4;
        }

        .grid-section-6 {
            grid-area: 9 / 4 / 10 / 7;
            background-color: black;
        }