/* ----------- FONTS ------------ */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../font/HelveticaNeue-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../font/HelveticaNeue-Roman.ttf') format('truetype');
    font-weight: 300;
}

*{
    font-optical-sizing: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;  /* Chrome, Safari, newer Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    -webkit-tap-highlight-color: transparent;
}

/* ------ Z_INDEX ------- 
main__menu__shapeGroup: 150
main__menu__page__container: 140
main__footer__bar: 120
inventory__main__container: 115
filter__menu__list__container: 110
main__footer__bar__bg: 100
*/


:root {
    --colorBlack: black;
    --colorWhite: white;
    --colorMain: #0000F5;
    --colorGrey: rgb(141, 141, 141);

    /* MY TESTED VALUES */
    --webFont: clamp(1.037rem, calc(1.037rem + 0.5vw), 1.53rem); /* = 30pts at 1440px wide screen*/
    /* --webFontMenu: clamp(1.22rem, calc(1.22rem + 0.5vw), 1.67rem); */
    --webLineHeight: clamp(1.75rem, calc(1.75rem + 0.5vw), 2rem); /* = 35pts */
    --webLineHeightMenu: clamp(1.42rem, calc(1.42rem + 0.5vw), 1.92rem); /* = 17pts at 1206px wide screen*/
    --mobileFont: clamp(1.123rem, calc(1.123rem + 0.5vw), 1.5rem); /* = 17pts at 1206px wide screen*/
    /* --mobileFontMenu: clamp(1.123rem, calc(1.123rem + 0.5vw), 1.5rem); */
    --mobileLineHeight: clamp(1.4rem, calc(1.4rem + 0.5vw), 1.9rem);
    --mobileLineHeightMenu: clamp(1.5rem, calc(1.5rem + 0.5vw), 2rem);

    --animDuration: 0.3s;
    --borderOffset: 2rem;
    --linkTreeButtonShapeWidth: clamp(150px, 8%, 220px); /*216px*/
    --linkTreeButtonShapeWidthMobile: clamp(130px, 10%, 220px);
    --webLineHeightCovers: 1rem;
    --mobileLineHeightCovers: 0.75rem;
    --webFooterHeight: 10svh;
    --mobileFooterHeight: 11svh;
    --webMenuPointArrowSize: 22px;
    --mobileMenuPointArrowSize: 16px;
    --webOffsetLinktreeContainer: -1rem;
    --mobileOffsetLinktreeContainer: -0.5rem;
    --webOffsetCover: -2rem;
    --mobileOffsetCover: -0.5rem;
    /* --webOffsetFilterBar: 1rem; */
    --mobileOffsetFilterBar: -0.25rem;
    --webOffsetBlogEntry: -3rem;
    --mobileOffsetBlogEntry: -1rem;
    --soldOutIconWidth: clamp(150px, 12%, 240px);
    --soldOutIconHeight: clamp(65px, 5%, 110px);
}

html, body{
    font-family: "calling-code", sans-serif;
    font-weight: 700;
    font-style: normal;
    background-color: var(--colorWhite);
    color: var(--colorBlack);
    width: 100vw;
    height: 100vh;
    overscroll-behavior: none;
    margin: 0;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: all 0.3s ease-in-out;
}  

/*---------------------------- GENERAL CSS/ UTILITIES ----------------------*/
.base__container{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

.base__container.show{
    opacity: 1;
    pointer-events: auto;
}

.draggable{
    position: absolute;
}

.back__button__container{
    z-index: 150;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 var(--borderOffset);
    margin: 0;
    height: var(--webFooterHeight);
    /* height: 10dvh; */
    width: 20vw;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    transition: 
        opacity 0.3s ease-in-out,
        background-color 0.3s ease-in-out;
}

.back__button__container[data-state='menuFirst'].menu__button__second{
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
    z-index: 152;
}

.back__button__container[data-state='menuSecond'].menu__button__second{
    transition-delay: 0s;
    z-index: 151;
}

.back__button{
    z-index: 151;
    position: relative;
    width: var(--webMenuPointArrowSize);
    height: var(--webMenuPointArrowSize);
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(var(--mobileOffsetFilterBar));
}

.back__button img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.carousel__container{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: auto; 
    transition: transform 0.8s ease-in-out;
    will-change: transform;
    background-color: var(--colorWhite);
}

.carousel__item{
    position: relative;
    height: 100%;
    display: inline-flex;
    flex: 0 0 50vw; 
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: auto;
    font-size: var(--webFont);
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
    /* transform: translateX(25vw); */
    will-change: transform;
    transition: 
        transform 0.8s ease-in-out,
        opacity 0.2s ease-in-out 0.2s,
        max-width 0.1s ease-in-out 0s;
}

.carousel__item.active{
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
    /* transform: translateX(25vw); */
}

.carousel__item.hidden{
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    transition: 
        opacity 0.2s ease-in-out 0.2s,
        max-width 0.1s ease-in-out 0s;
}

.media-universal{
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-universal img,
.media-universal video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}





.media-portrait{
    width: 50%; 
    aspect-ratio: 4 / 5; 
    padding: 0;
    margin: 0;
}

/* .media-landscape{
    width: 70%; 
    aspect-ratio: 16 / 9; 
    padding: 0;
    margin: 0;
} */

.media-portrait img, .media-portrait video{
    width: 100%;
    height: 100%;
    object-fit: contain; 
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity 0.5s ease-in-out;
}

.media-landscape img, .media-landscape video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity 0.5s ease-in-out;
}

.media-portrait img.loaded, .media-portrait video.loaded,
.media-landscape img.loaded, .media-landscape video.loaded {
    opacity: 1;
    pointer-events: auto;
}


.media-landscape-img{
    width: 60%; 
    aspect-ratio: 4 / 2.75; 
    padding: 0;
    margin: 0;
}

.media-landscape-vid{
    width: 60%; 
    aspect-ratio: 16 / 9; 
    padding: 0;
    margin: 0;
}

.media-portrait-vid{
    width: 40%; 
    aspect-ratio: 9 / 16; 
    padding: 0;
    margin: 0;
}

.media-landscape-img img, .media-landscape-vid video, .media-portrait-vid video{
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity 0.5s ease-in-out;
}

.media-landscape-img img.loaded, .media-landscape-vid video.loaded, .media-portrait-vid video.loaded{
    opacity: 1;
    pointer-events: auto;
}

.roundedCorners{
    border-radius: 8px;
}

/* -----------  MAIN MENU & MAIN CANVAS ----------------*/
.main__menu__page__container{
    z-index: 140;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    font-size: var(--webFont);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.main__menu__page__container.active{
    opacity: 1;
    pointer-events: auto;
}

.main__menu__page__content{
    position: relative;
    height: 80%;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    ul{
        text-align: center;
        li{
            line-height: var(--webLineHeightMenu);
            list-style: none;
            margin: 0;
            padding: 0;
            a{
                color: var(--colorBlack);
                text-decoration: none;
                cursor: pointer;
                transition: color 0.2s ease-in-out;
            }
        }
    }
}

.main__menu__page__toggle{
    z-index: 141;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    li{
        white-space: nowrap;
    }
}

.main__menu__page__content ul:hover li a{
    color: var(--colorGrey);
}

.main__menu__page__content ul li:hover a{
    color: var(--colorBlack);
}

.main__menu__page__content[data-state="second"] .list__first{
    transition-delay: 0s;
    z-index: 141;
}

.main__menu__page__content[data-state="first"] .list__first{
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
    z-index: 142;
}

.main__menu__page__content[data-state="first"] .list__second{
    transition-delay: 0s;
}

.main__menu__page__content[data-state="second"] .list__second{
    opacity: 1;
    transition-delay: 0.3s;
    pointer-events: auto;
    z-index: 142;
}

.main__menu__page__content[data-state="third"] .list__third{
    opacity: 1;
    transition-delay: 0.3s;
    pointer-events: auto;
    z-index: 142;
}

.main__menu__page__content[data-state="first"] .list__third{
    transition-delay: 0s;
}


.main__menu__shapeGroup{
    z-index: 151;
    position: relative;
    width: var(--webMenuPointArrowSize);
    height: var(--webMenuPointArrowSize);
    fill: var(--colorBlack);
    cursor: pointer;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: 
        opacity 0.5s ease-in-out;
}

.main__menu__shapeGroup.show{
    opacity: 1;
}

.main__canvas__container{
    width: 100vw;
    height: calc(100vh - var(--webFooterHeight));
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 
        opacity 0.5s ease-in-out;
}

.main__canvas__container.show{
    opacity: 1;
}

.main__img__container{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 0.488;
    width: auto;
    height: 90vh;
    pointer-events: none;
}

.main__footer__bar{
    z-index: 120;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    height: var(--webFooterHeight);
    width: 100vw;
    opacity: 0;
    pointer-events: none;
    color: var(--colorBlack);
    font-size: var(--webFont);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: 
        opacity 0.5s ease-in-out,
        background-color 0.5s ease-in-out;
}

.main__footer__bar.show{
    opacity: 1;
    pointer-events: auto;
}

.main__menu__point__container{
    z-index: 150;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 var(--borderOffset);
    margin: 0;
    height: var(--webFooterHeight);
    width: 20vw;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    transition: 
        opacity 0.3s ease-in-out,
        background-color 0.3s ease-in-out;
}

.main__menu__point__container[data-state='menuFirst'].menu__button__first{
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s;
    z-index: 152;
}

.main__menu__point__container[data-state='menuSecond'].menu__button__first{
    transition-delay: 0.3s;
    z-index: 152;
}

.main__footer__bar__bg{
    z-index: 100;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    height: var(--webFooterHeight);
    width: 100vw;
    opacity: 0;
    background-color: var(--colorWhite);
    transition: 
        opacity 0.5s ease-in-out;
}

.main__footer__bar__bg.show{
    opacity: 1;
}

.main__footer__bar__bg.showInv{
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(1px);
}

.main__footer__bar__blurred{
    z-index: 117;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    height: 32svh;
    width: 100vw;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.1);
    mask-image: linear-gradient(to bottom, rgba(255,255,255,0) 60%,rgba(255,255,255,1) 79%, rgba(255,255,255,1) 100%);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(10px);
    transition: 
        opacity 0.5s ease-in-out;
}

.main__footer__bar__blurred.show{
    opacity: 1;
}

/* ------------------ FILTER STYLE -------------------- */
.filter__menu__button{
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;  
    align-items: center; 
    /* background-color: blue; */
    transition: opacity 0.5s ease-in-out;
}

.filter__menu__button.hidden{
    opacity: 0;
    pointer-events: none;
}

.filter__menu__list__container{
    z-index: 110;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.5);
    line-height: var(--webLineHeightMenu);
    font-size: var(--webFont);
    color: var(--colorBlack);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity 0.5s ease-in-out;
}

.filter__menu__list__container ul:hover li{
    color: var(--colorGrey);
    transition: color 0.2s ease-in-out;
}

.filter__menu__list__container ul li:hover{
    color: var(--colorBlack);
}

.filter__menu__list__container.active{
    opacity: 1;
    pointer-events: auto;
}

.filter__menu__list__element{
    list-style: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.filter__text__toggle{
    z-index: 121;
    position: absolute;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    /* background-color: red; */
    transition: opacity 0.2s ease-in-out;
}

/* FIRST */
.filter__menu__button[data-state="first"] .filter__first{
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.2s;
    z-index: 122;
}

.filter__menu__button[data-state="first"] .filter__second{
    transition-delay: 0s;
    z-index: 121;
}


/* SECOND */
.filter__menu__button[data-state="second"] .filter__first{
    transition-delay: 0s;
    z-index: 121;
}

.filter__menu__button[data-state="second"] .filter__second{
    opacity: 1;
    transition-delay: 0.2s;
    pointer-events: auto;
    z-index: 122;
}

/* NONE */
.filter__menu__button[data-state="none"] .filter__first{
    transition-delay: 0.2s;
    opacity: 0;
    pointer-events: none;
    z-index: 121;
}

.filter__menu__button[data-state="none"] .filter__second{
    transition-delay: 0.2s;
    opacity: 0;
    pointer-events: none;
    z-index: 121;
}


/* -----------  INVENTORY SECTION ----------------*/
.inventory__main__container{
    z-index: 115;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2rem;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity 0.5s ease-in-out;
}

.inventory__main__container.show{
    opacity: 1;
    pointer-events: auto;
}

.inventory__menu__button{
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;  
    align-items: center; 
}

.inventory__grid__layout{
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: repeat(8, 1fr);
    align-content: start;
    gap: 10px;
    padding: 10px;
    margin: 0 auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    place-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
}

.inventory__grid__layout > .inventory__grid__item__container:first-child img {
    transform: scale(0.6);
}

.inventory__grid__layout > .inventory__grid__item__container:last-child img {
    transform: scale(0.6);
}

/* .inventory__grid__layout > .inventory__grid__item__container:nth-child(2) img {
    transform: scale(1);
} */

/* .inventory__grid__item__container{
    aspect-ratio: 1/1.1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

@supports not (aspect-ratio: 1/1.3){
    .inventory__grid__item__container::before{
        content: '';
        display: block;
        padding-top: 100%;
    }

    .inventory__grid__item__container > .grid__img__wrapper{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.grid__img__wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 90%;
    overflow: hidden;
    cursor: pointer;
} */

.inventory__grid__item__container{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.grid__img__wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    padding: 10px 0;
    justify-content: center;
}

.grid__img__main__area{
    flex-grow: 1;
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.grid__img__main__area img{
    display: block;
    object-fit: contain;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    transform: scale(0.8);
}
/* .grid__img__wrapper img{
    transform: scale(0.8);
    max-height: 80%;
    max-width: 100%;
    object-fit: contain;
    display: block;
} */

/* .grid__img__wrapper img:nth-child(1){
    object-fit: contain;
    transform: scale(0.8);
    max-height: 80%;
    max-width: 100%;
    display: block;
} */

.inventory__add__icon{
    flex-shrink: 0;
    width: 2rem;
    height: 1.5rem;
    /* object-fit: contain; */
    /* margin: 0; */
    margin-top: auto;
    background-image: url('/assets/images/Icons/AddIcon_white.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    clip-path: inset(0);
    filter: invert(100%);
    transform: scale(0.7);
    transition: clip-path 0.5s ease-in-out;
}

.inventory__add__icon.active{
    clip-path: inset(43% 0);
}

.inv__item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: 
        translate(-50%, -50%)
        translate(var(--itemTX, 0), var(--itemTY, 0));
    width: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.inv__item img{
    width: 100%;
    height: 100%;
}

.inv__item.active{
    opacity: 1;
    pointer-events: auto;
}

/* --------------------- INVENTORY ITEM ENTRIES -------------------------------- */
.item__wrapper__main__canvas{
    position: absolute;
    width: auto;
    height: var(--itemHeight, 0);
    aspect-ratio: var(--itemAspectRatio, auto);
    top: 50%;
    left: 50%;
    transform: 
        translate(-50%, -50%)
        translate(var(--itemTX, 0), var(--itemTY, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.item__wrapper__main__canvas > img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.item__wrapper__main__canvas.active{
    opacity: 1;
    pointer-events: auto;
}

.item__wrapper__main__canvas.front{
    z-index: 1000;
}

.inventory__text__toggle{
    z-index: 121;
    position: absolute;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.inventory__menu__button[data-state="first"] .filter__first{
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.2s;
    z-index: 122;
}

.inventory__menu__button[data-state="first"] .filter__second{
    transition-delay: 0s;
}

.inventory__menu__button[data-state="second"] .filter__first{
    transition-delay: 0s;
    z-index: 121;
}

.inventory__menu__button[data-state="second"] .filter__second{
    opacity: 1;
    transition-delay: 0.2s;
    pointer-events: auto;
    z-index: 122;
}

#inv_item01{
    --itemTX: 0vw;
    --itemTY: -34vh;
    --itemHeight: 15.3%;
    /* --itemHeight: calc((calc(100vh - var(--webFooterHeight))) * 0.153);     */
    --itemAspectRatio: 0.676;
}

#iItem01{
    transform: scale(.75);
}

#inv_item02{
    --itemTX: -45vw;
    --itemTY: -25vh;
    --itemHeight: 16%;
    /* --itemHeight: calc((calc(100vh - var(--webFooterHeight)) * 0.16)); ; */
    --itemAspectRatio: 1.29;
}

#iItem02{
    transform: scale(1.3);
}

#inv_item03{
    --itemTX: -34vw;
    --itemTY: 26vh;
    --itemHeight: 39.2%;
    /* --itemHeight: calc((calc(100vh - var(--webFooterHeight)) * 0.392));  */
    --itemAspectRatio: 0.831;
}

#inv_item04{
    --itemTX: 29vw;
    --itemTY: -22vh;
    --itemHeight: 39%;
    --itemAspectRatio: 0.796;
}

#inv_item05{
    --itemTX: 16vw;
    --itemTY: 28vh;
    --itemHeight: 38.6%;
    --itemAspectRatio: 0.786;
}

#inv_item06{
    --itemTX: 14vw;
    --itemTY: -27vh;
    --itemHeight: 41%;
    --itemAspectRatio: 0.729;
}

#inv_item07{
    --itemTX: 29vw;
    --itemTY: 13vh;
    --itemHeight: 38%;
    --itemAspectRatio: 0.977;
}

#inv_item08{
    --itemTX: -20vw;
    --itemTY: -14vh;
    --itemHeight: 34.8%;
    --itemAspectRatio: 0.98;
}

#inv_item09{
    --itemTX: 0.3vw;
    --itemTY: 1vh;
    --itemHeight: 14.6%;
    /* --itemHeight: calc((calc(100vh - var(--webFooterHeight)) * 0.146)); */
    --itemAspectRatio: 1.23;
}

#inv_item10{
    --itemTX: 41vw;
    --itemTY: -22vh;
    --itemHeight: 47.1%;
    --itemAspectRatio: 0.473;
}

#inv_item11{
    --itemTX: -34vw;
    --itemTY: -20vh;
    --itemHeight: 48.3%;
    --itemAspectRatio: 0.44;
}

#inv_item12{
    --itemTX: 44vw;
    --itemTY: 30vh;
    --itemHeight: 48.2%;
    --itemAspectRatio: 0.456;
}

#inv_item13{
    --itemTX: -16vw;
    --itemTY: 21vh;
    --itemHeight: 23.7%;
    --itemAspectRatio: 0.931;
}

#inv_item14{
    --itemTX: 0.45vw;
    --itemTY: 6.75vh;
    --itemHeight: 10.1%;
    /* --itemHeight: calc(calc(100vh - var(--webFooterHeight)) * 0.101); */
    --itemAspectRatio: 2.78;
}

#inv_item15{
    --itemTX: -16vw;
    --itemTY: 42vh;
    --itemHeight: 14.7%;
    --itemAspectRatio: 1.64;
}

#inv_item16{
    --itemTX: -10vw;
    --itemTY: -35vh;
    --itemHeight: 9.4%;
    --itemAspectRatio: 2.52;
}

#inv_item17{
    --itemTX: -21vw;
    --itemTY: 5vh;
    --itemHeight: 6.8%;
    --itemAspectRatio: 3.59;
}

#inv_item18{
    --itemTX: -46vw;
    --itemTY: 13vh;
    --itemHeight: 21.4%;
    --itemAspectRatio: 0.533;
}

#inv_item19{
    --itemTX: -40vw;
    --itemTY: 24vh;
    --itemHeight: 18.2%;
    --itemAspectRatio: 0.773;
}

#iItem19{
    transform: scale(.85);
}

#inv_item20{
    --itemTX: 44vw;
    --itemTY: 13vh;
    --itemHeight: 15%;
    --itemAspectRatio: 0.836;
}

#iItem20{
    transform: scale(0.87);
}

#inv_item21{
    --itemTX: -36vw;
    --itemTY: -20vh;
    --itemHeight: 14.4%;
    --itemAspectRatio: 0.742;
}

#iItem21{
    transform: scale(0.78);
}

#inv_item22{
    --itemTX: -12vw;
    --itemTY: -26vh;
    --itemHeight: 16.3%;
    --itemAspectRatio: 0.795;
}

#iItem22{
    transform: scale(0.82);
}

#inv_item23{
    --itemTX: -16vw;
    --itemTY: 13vh;
    --itemHeight: 24%;
    --itemAspectRatio: 0.586;
}

#iItem23{
    transform: scale(0.8);
}

#inv_item24{
    --itemTX: 16vw;
    --itemTY: -18vh;
    --itemHeight: 14%;
    --itemAspectRatio: 0.744;
}

#iItem24{
    transform: scale(0.78);
}

#inv_item25{
    --itemTX: 20vw;
    --itemTY: 26vh;
    --itemHeight: 15.6%;
    --itemAspectRatio: 0.676;
}

#iItem25{
    transform: scale(0.77);
}

#inv_item26{
    --itemTX: 42vw;
    --itemTY: -26vh;
    --itemHeight: 16.3%;
    --itemAspectRatio: 0.785;
}

#iItem26{
    transform: scale(0.8);
}

#inv_item27{
    --itemTX: 39vw;
    --itemTY: -29vh;
    --itemHeight: 13.8%;
    --itemAspectRatio: 0.695;
}

#iItem27{
    transform: scale(0.75);
}

#inv_item28{
    --itemTX: 0vw;
    --itemTY: -34vh;
    --itemHeight: 16.5%;
    --itemAspectRatio: 0.626;
}

#iItem28{
    transform: scale(1.1);
}

.head{
    z-index: 30;
}

.top__small{
    z-index: 23;
}

.top__big{
    z-index: 25;
}

.gloves__small{
    z-index: 20;
}

.gloves__big{
    z-index: 23;
}

.pants__long{
    z-index: 15;
}

.pants__short{
    z-index: 18;
}

.pants__under{
    z-index: 10;
}

.shoes__small{
    z-index: 10;
}

.shoes__big{
    z-index: 10;
}

.luna{
    z-index: 30;
}

/* -----------  MUSIC SECTION REVAMPED ----------------*/
.music__scroll__container{
    display: flex;
    flex-direction: row;
    height: 100vh;
    /* height: calc(100vh - var(--webFooterHeight)); */
    width: auto; /* change this when adding new entries; how to calculate: (50vw * amount of entries) + 50vw  */
    transition: transform 0.8s ease-in-out;
    will-change: transform;
    background-color: var(--colorWhite);
}

.music__entry__container{
    position: relative;
    height: 100%;
    display: inline-flex;
    flex: 0 0 50vw; /* 50vw defines the width */
    /* border: 2px solid red; */
    justify-content: center;
    align-items: center;
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
    will-change: transform;
    transition: 
        transform 0.8s ease-in-out,
        opacity 0.3s ease-in-out 0.2s,
        max-width 0.3s ease-in-out 0s;
}

.music__entry__container.active{
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
}

.music__entry__container.hidden{
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    transition: 
        opacity 0.3s ease-in-out 0.2s,
        max-width 0.3s ease-in-out 0s;
}

.music__cover__container{
    position: relative;
    width: 50%;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    /* border: 2px solid red; */
}

.music__cover__image{
    position: relative;
    width: 60%;
    /* height: auto; */
    padding-bottom: 60%;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: var(--webLineHeightCovers);
    transition: 
        width 0.8s ease-in-out,
        padding-bottom 0.8s ease-in-out;
}

.music__cover__image img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music__cover__image.active{
    width: 120%;
    padding-bottom: 120%;
}

.music__cover__title{
    color: var(--colorBlack);
    text-align: center;
    font-size: calc(var(--webFont) * 0.75);
    line-height: calc(var(--webLineHeight) * 0.75);
    opacity: 0;
    white-space: nowrap;
    transition:  
        opacity 0.8s ease-in-out,
        line-height 0.8s ease-in-out,
        font-size 0.8s ease-in-out;
}

.music__cover__title.active{
    opacity: 1;
    font-size: var(--webFont);
    line-height: var(--webLineHeight);
}

/* ------------------- LIVE SECTION ----------------- */
.live__scroll__container{
    display: flex;
    flex-direction: row;
    /* height: calc(100vh - var(--webFooterHeight)); */
    height: 100vh;
    width: auto; /* change this when adding new entries; how to calculate: (50vw * amount of entries) + 50vw  */
    transition: transform 0.8s ease-in-out;
    will-change: transform;
    background-color: var(--colorWhite);
}

.live__entry__container{
    position: relative;
    height: 100%;
    display: inline-flex;
    flex: 0 0 50vw; /* 50vw defines the width */
    /* border: 2px solid red; */
    justify-content: center;
    align-items: center;
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
    will-change: transform;
    transition: 
        transform 0.8s ease-in-out,
        opacity 0.3s ease-in-out 0.2s,
        max-width 0.3s ease-in-out 0s;
}

.live__entry__container.active{
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
}

.live__entry__container.hidden{
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    transition: 
        opacity 0.3s ease-in-out 0.2s,
        max-width 0.3s ease-in-out 0s;
}

.live__cover__container{
    position: relative;
    width: 44.55%;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.live__cover__image{
    position: relative;
    width: 60%;
    padding-bottom: 74.1%;
    aspect-ratio: 1/1.235;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    /* background-color: green; */
    margin-bottom: var(--webLineHeightCovers);
    transition: 
        width 0.8s ease-in-out,
        padding-bottom 0.8s ease-in-out;
}

.live__cover__image img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.live__cover__image.active{
    width: 120%;
    padding-bottom: 148.2%;
}

.live__cover__title{
    color: var(--colorBlack);
    text-align: center;
    font-size: calc(var(--webFont) * 0.75);
    line-height: calc(var(--webLineHeight) * 0.75);
    opacity: 0;
    white-space: nowrap;
    transition:  
        opacity 0.8s ease-in-out,
        line-height 0.8s ease-in-out,
        font-size 0.8s ease-in-out;
}

.live__cover__title.active{
    opacity: 1;
    font-size: var(--webFont);
    line-height: var(--webLineHeight);
}

/* ----------LINKTREE CONTAINER -----------------*/
.linktree__content__container{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% + var(--webOffsetLinktreeContainer))) translateX(-50%);
    width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: orangered; */
}

.linktree__cover__container{
    position: relative;
    width: 28%;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.linktree__cover__image{
    position: relative;
    border-radius: 8px;
    width: 100%;
    padding-bottom: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.linktree__cover__image img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.linktree__cover__title{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--colorBlack);
    height: auto;
    width: 25%;
    text-align: center;
    margin: 1rem 0;
    white-space: nowrap;
    font-size: var(--webFont);
    line-height: var(--mobileLineHeight);
}

.linktree__buttons__shape{
    position: relative;
    width: var(--linkTreeButtonShapeWidth);
    padding-bottom: calc(var(--linkTreeButtonShapeWidth) * 0.268);
    background-color: #D3D4D6;
    margin: .35vh auto;
    border-radius: 30px;
}

.linktree__buttons__content{
    position: absolute;
    top: 2%;
    bottom: 2%;
    left: 2%;
    right: 2%;
    list-style: none;
    width: 96%;
    height: 96%;
    background-image: url('../images/Linktree/linktree_sprites.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
    cursor: pointer;
}

#appleMusic{
    background-position-y: 0%;
}

#spotify{
    background-position-y: 20%;
}

#youtubeMusic{
    background-position-y: 40%;
}

#amazonMusic{
    background-position-y: 60%;
}

#deezer{
    background-position-y: 80%;
}

#tidal{
    background-position-y: 100%;
}



/* ------------ BLOG NEW SECTION ------------- */
.blog__main__container{
    position: absolute;
    background-color: var(--colorWhite);
    min-height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
}

.blog__main__content__container{
    /* background-color: red; */
    opacity: 0;
    pointer-events: none;
}

.blog__main__content__container.active{
    opacity: 1;
    pointer-events: auto;
}

.blog__year__landing{
    z-index: 50;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--colorWhite);
    font-size: var(--webFont);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity 0.2s ease-in-out;
    ul{
        /* border: 2px solid red; */
        transform: translateY(var(--webOffsetCover));
        li{
            list-style: none;
            cursor: pointer;
            transition: 
                color 0.2s ease-in-out;
        }
    }
}

.blog__year__landing.show{
    opacity: 1;
    pointer-events: auto;
}

.blog__year__landing ul:hover li{
    color: var(--colorGrey);
}

.blog__year__landing ul li:hover{
    color: var(--colorBlack);
}

.blog__entry__footer__bar{
    z-index: 120;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    height: var(--webFooterHeight);
    width: 100vw;
    /* opacity: 1;
    pointer-events: auto; */
    color: var(--colorBlack);
    font-size: var(--webFont);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: 
        opacity 0.5s ease-in-out 0.2s;
}

.blog__entry__footer__bar.show{
    opacity: 1;
    pointer-events: auto;
    transition: 
        opacity 0.5s ease-in-out 0.2s;
}

.close__entry__blog__element{
    z-index: 121;
    position: absolute;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    /* background-color: blue; */
    transition: opacity 0.2s ease-in-out;
}

.blog__entry__footer__bar[data-state="first"] .close__entry__blog__element{
    transition-delay: 0s;
    z-index: 121;
}

.blog__entry__footer__bar[data-state="none"] .close__entry__blog__element{
    transition-delay: 0.2s;
    opacity: 1;
    pointer-events: auto;
    z-index: 122;
}

.blog__date{
    padding: 0;
    margin: 0;
    width: fit-content;
    height: auto;
    cursor: pointer;
}

/* .close__entry__blog__element.active{
    opacity: 1;
    pointer-events: auto;
} */

/* .blog__back__button__container{
    z-index: 150;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 var(--borderOffset);
    margin: 0;
    height: var(--webFooterHeight);
    width: 20vw;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    transition: 
        opacity 0.3s ease-in-out,
        background-color 0.3s ease-in-out;
}

.blog__back__button__container.active{
    opacity: 1;
    pointer-events: auto;
}

.blog__back__button{
    z-index: 151;
    position: relative;
    width: var(--webMenuPointArrowSize);
    height: var(--webMenuPointArrowSize);
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(var(--mobileOffsetFilterBar));
}

.blog__back__button img{
    object-fit: contain;
    width: 100%;
    height: 100%;
} */

.blog__popup__content__container{
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    background-color: var(--colorWhite);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out;
}

.blog__popup__content__container.active{
    opacity: 1;
    pointer-events: auto;
}

.blog__popup__content{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--colorWhite);
    display: grid;
    /* place-items: center; */
    padding: 0;
    margin: 0;
    opacity: 1;
}

.blog__text__style{
    display: grid;
    /* position: relative; */
    /* place-items: center; */
    width: 80%;
    max-width: 1000%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    align-self: center;
    /* justify-content: center; */
    /* align-items: center; */
    /* border: 2px solid red; */
    text-align: left;
    font-size: var(--webFont);
    line-height: var(--webLineHeight);
    transform: translateY(var(--webOffsetCover));
}

.blog__carousel__container{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: auto; 
    transition: transform 0.8s ease-in-out;
    will-change: transform;
    background-color: var(--colorWhite);
}

.blog__carousel__item{
    position: relative;
    height: 100%;
    display: inline-flex;
    flex: 0 0 50vw; /* 50vw defines the width */
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    /* transform: translateY(var(--webOffsetCover)); */
    transform: translateX(25vw) scale(0.55);
    will-change: transform;
    transition: 
        transform 0.8s ease-in-out,
        opacity 0.3s ease-in-out 0.2s,
        max-width 0.3s ease-in-out 0s;
}

.blog__carousel__item.active{
    transform: translateX(25vw) scale(1.2);
}

.blog__carousel__item.hidden{
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    transition: 
        opacity 0.3s ease-in-out 0.2s,
        max-width 0.3s ease-in-out 0s;
}

.blog__single__item__container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: auto; /* change this when adding new entries; how to calculate: (50vw * amount of entries) + 50vw  */
    background-color: var(--colorWhite);
}

.blog__single__item{
    position: relative;
    height: 100%;
    display: inline-flex;
    flex: 0 0 50vw;
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(var(--webOffsetBlogEntry)) scale(0.75);
}

.blog__single__item.active{
    transform: translateY(var(--webOffsetBlogEntry)) scale(1.2);
}

/* ------------ PRIVACY SECTION ------------- */
#privacy{
    padding: var(--borderOffset);
    background-color: var(--colorWhite);
    height: calc(100vh - var(--webFooterHeight));
    width: 100vw;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.privacy__content{
    position: relative;
    width: auto;
    color: var(--colorBlack);
    font-size: var(--webFont); 
    white-space: normal;
    ul{
        li{
            list-style: none;
        }
    }
}

.privacy__content a{
    color: var(--colorBlack);
    text-decoration: none;
}

/* ------------ IMPRINT SECTION ------------- */
#imprint{
    padding: var(--borderOffset);
    background-color: var(--colorWhite);
    height: calc(100vh - var(--webFooterHeight));
    width: 100vw;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.imprint__content{
    position: relative;
    width: auto;
    color: var(--colorBlack);
    font-size: var(--webFont); 
}

/* -----------  SHOP SECTION ----------------*/

.has_overlay{
    position: relative;
    text-align: center;
}

.shop_sold_out{
    opacity: 0.3;
}

.shop_sold_out_icon{
    z-index: 50;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--soldOutIconWidth);
    height: var(--soldOutIconHeight);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    font-size: var(--webFont);
    border: 5px solid black;
}

.coming__winter__content{
    font-size: var(--webFont); 
    position: relative;
    padding: 14rem 2.2rem;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--colorBlack);
    background-color: var(--colorWhite);
}

.shop__container{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
}

.shop__content{
    position: relative;
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    transform: translateY(var(--webOffsetCover));
    /* border: 2px solid red; */
    /* background-color: blue; */
}

.shop__image__container{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 60%;
    aspect-ratio: 1/0.511;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease-in-out;
    /* background-color: green; */
}

.shop__image__container.hidden{
    opacity: 0;
    pointer-events: none;
}

.shop__image__container img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop__text{
    position: absolute;
    top: 100%;
    margin-top: 0;
    text-align: center;
    width: 100%;
    /* border: 2px solid black; */
    font-size: var(--webFont);
    line-height: var(--webLineHeight);
}

.shop__text a{
    white-space: nowrap;
    /* cursor: pointer; */
    text-decoration: none;
    color: var(--colorBlack);
    /* background-color: green; */
}

@media only screen and (max-width: 1400px){
.inventory__grid__layout{
    grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 1100px){
.inventory__grid__layout{
    grid-template-columns: repeat(2, 1fr);
}
}

@media only screen and (max-width: 700px){
html, body{
    width: 100vw;
    height: 100vh;
    overscroll-behavior-x: none;
} 

.base__container{
    width: 100vw;
    height: 100vh;
}

.carousel__item{
    font-size: var(--mobileFont);
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
}

.carousel__item.active{
    transform: translateY(var(--webOffsetCover)) translateX(25vw);
}

.media-universal{
    width: 100%;
    height: 100%;
}

.media-portrait{
    width: 100%; 
    aspect-ratio: 4 / 5; 
    padding: 0;
    margin: 0;
}

/* .media-landscape{
    width: 100%; 
    aspect-ratio: 16 / 9; 
    padding: 0;
    margin: 0;
} */

.media-landscape-img{
    width: 100%; 
    aspect-ratio: 4 / 2.75; 
    padding: 0;
    margin: 0;
}

.media-landscape-vid{
    width: 100%; 
    aspect-ratio: 16 / 9; 
    padding: 0;
    margin: 0;
}

/*----------------- MAIN MENU ----------------------*/

.main__menu__page__container{
    font-size: var(--mobileFont);
}

.main__menu__page__content{
    ul{
        li{
            line-height: var(--mobileLineHeightMenu);
        }
    }
}

.main__menu__shapeGroup{
    width: var(--mobileMenuPointArrowSize);
    height: var(--mobileMenuPointArrowSize);
    transform: translateY(var(--mobileOffsetFilterBar));
}

.main__footer__bar{
    font-size: var(--mobileFont);
}

.main__menu__point__container{
    padding: 0 var(--borderOffset);
}

.back__button{
    width: var(--mobileMenuPointArrowSize);
    height: var(--mobileMenuPointArrowSize);;
}

/*-------------BLOG CONTAINER-----------*/
.blog__container{
    height: calc(100svh - var(--mobileFooterHeight));
}

.blog__year__landing{
    font-size: var(--mobileFont);
}

.blog__content__container{
    font-size: var(--mobileFont);
}

.blog__entry__footer__bar{
    height: var(--webFooterHeight);
    font-size: var(--mobileFont);
}

.close__entry__blog__element{
    transform: translateY(var(--mobileOffsetFilterBar));
}

.blog__text__style{
    width: 100%;
    max-width: 100%;
    height: 100%;
    /* height: auto; */
    padding: var(--borderOffset);
    font-size: var(--mobileFont);
    line-height: var(--mobileLineHeight);
    transform: translateY(var(--mobileOffsetBlogEntry));
}

.blog__single__item{
    transform: translateY(var(--mobileOffsetBlogEntry)) scale(0.5);
}

.blog__single__item.active{
    transform: translateY(var(--mobileOffsetBlogEntry)) scale(1.3);
}

.blog__carousel__item{
    transform: translate(25vw, var(--webOffsetCover)) scale(0.5);
}

.blog__carousel__item.active{
    transform: translate(25vw, var(--webOffsetCover)) scale(1.3);
}

/*-------------FILTER-----------*/
.filter__menu__button{
    font-size: var(--mobileFont);
}

.filter__menu__list__container{
    font-size: var(--mobileFont);
    line-height: var(--mobileLineHeightMenu);
}

.filter__text__toggle{
    transform: translateY(var(--mobileOffsetFilterBar));
}

/*-------------LIVE CONTAINER-----------*/
.live__scroll__container{
    height: 100svh;
}

.live__cover__container{
    width: 90.9%;
    height: 50%;
}

.live__entry__container{
    transform: translateY(var(--mobileOffsetCover)) translateX(25vw);
}

.live__entry__container.active{
    transform: translateY(var(--mobileOffsetCover)) translateX(25vw);
}

.live__cover__image{
    width: 60%;
    padding-bottom: 74.1%;
    margin-bottom: var(--mobileLineHeightCovers);
    transition: 
        width 0.8s ease-in-out,
        padding-bottom 0.8s ease-in-out;
}

.live__cover__image.active{
    width: 150%;
    padding-bottom: 185.25%;
}

.live__cover__title{
    font-size: calc(var(--mobileFont) * 0.6);
    line-height: calc(var(--mobileLineHeight) * 0.6);
}

.live__cover__title.active{
    transform: scale(1);
    font-size: var(--mobileFont);
    line-height: var(--mobileLineHeight);
}

/*-------------SHOP CONTAINER-----------*/

.shop_sold_out_icon{
    width: var(--soldOutIconWidth);
    height: var(--soldOutIconHeight);
    font-size: var(--mobileFont);
}

.coming__winter__content{
    line-height: var(--mobileLineHeight);
    font-size: var(--mobileFont); 
    transform: translateY(var(--webOffsetCover));
}

.shop__content{
    transform: translateY(-4.5rem);
}

.shop__image__container{
    position: relative;
    flex-direction: column;
    width: 120%;
    aspect-ratio: 1/0.511;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease-in-out;
}

.shop__text{
    margin-top: 0.75rem;
    font-size: calc(var(--mobileFont));
    line-height: var(--mobileLineHeight);
}

/*-------------PRIVACY CONTAINER-----------*/
#privacy{
    padding: var(--borderOffset);
    height: calc(100svh - var(--mobileFooterHeight));
}

.privacy__content{
    width: 100%;
    font-size: var(--mobileFont); 
    word-wrap: break-word;
}

/*-------------IMPRINT CONTAINER-----------*/
#imprint{
    padding: var(--borderOffset);
    height: calc(100svh - var(--mobileFooterHeight));
}

.imprint__content{
    width: 100%;
    font-size: var(--mobileFont); 
    word-wrap: break-word;
}

/* --------- MAIN MENU CONTAINER ----------*/
.main__canvas__container{
    /* height: 90vh; */
    height: calc(100svh - var(--mobileFooterHeight));
    background-color: white;
}

.main__img__container{
    height: 90vh; 
    height: 90svh; 
}

/*------------MUSIC ALBUM SWIPE-------------*/
.music__scroll__container{
    height: 100svh; 
}

.music__cover__container{
    width: 90.9%;
    height: 50%;
}

.music__entry__container{
    transform: translateY(var(--mobileOffsetCover)) translateX(25vw);
}

.music__entry__container.active{
    transform: translateY(var(--mobileOffsetCover)) translateX(25vw);
}

.music__cover__image{
    width: 60%;
    padding-bottom: 60%;
    margin-bottom: var(--mobileLineHeightCovers);
    transition: 
        width 0.8s ease-in-out,
        padding-bottom 0.8s ease-in-out;
}

.music__cover__image.active{
    width: 140%;
    padding-bottom: 140%;
}

.music__cover__title{
    font-size: calc(var(--mobileFont) * 0.6);
    line-height: calc(var(--mobileLineHeight) * 0.6);
}

.music__cover__title.active{
    transform: scale(1);
    font-size: var(--mobileFont);
    line-height: var(--mobileLineHeight);
}

/* --------------LINK TREE LOGIC ---------- */
.linktree__cover__container{
    width: 65%;
}

.linktree__content__container{
    height: 90svh;
    transform: translateY(calc(-50% + var(--mobileOffsetLinktreeContainer))) translateX(-50%);
    /* background-color: orangered; */
}

.linktree__cover__title{
    width: clamp(200px, 20vw, 300px);
    font-size: var(--mobileFont);
    margin: 0.5em 0;
}

.linktree__buttons__shape{
    width: var(--linkTreeButtonShapeWidthMobile);
    padding-bottom: calc(var(--linkTreeButtonShapeWidthMobile) * 0.268);
}

/* --------- INVENTORY MENU----------*/

.inventory__shapeGroup{
    z-index: 12;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 1vh;
    transform: scale(0.4);
    transition: transform 0.2s ease-in-out;
}

.inventory__grid__layout{
    grid-template-columns: repeat(1, 1fr);
    /* margin-bottom: 10svh; */
    /* height: 100%; */
    /* height: 95%; */
    /* border: 2px solid red; */
}

.grid__img__main__area{
    width: 100%;
    height: 100%;
}

.inventory__grid__layout > div:last-child{
    margin-bottom: 8svh;
    /* border: 2px solid red; */
}

.inventory__grid__item__container{
    width: 215.4px;
    height: 250px;
    /* border: 2px solid black; */
}

.inventory__text__toggle{
    transform: translateY(var(--mobileOffsetFilterBar));
}

#inv_item01{
    --itemTX: 0vw;
    --itemTY: -33vh;
    --itemTX: 0svw;
    --itemTY: -33svh;
}

#inv_item02{
    --itemTX: 38vw;
    --itemTY: 5vh;
    --itemTX: 38svw;
    --itemTY: 5svh;
}

#inv_item03{
    --itemTX: -31vw;
    --itemTY: 32vh;
    --itemTX: -31svw;
    --itemTY: 32svh;
}

#inv_item04{
    --itemTX: -32.5vw;
    --itemTY: -20vh;
    --itemTX: -32.5svw;
    --itemTY: -20svh;
}

#inv_item05{
    --itemTX: 32vw;
    --itemTY: 26vh;
    --itemTX: 32svw;
    --itemTY: 26svh;
}

#inv_item06{
    --itemTX: 31.5vw;
    --itemTY: 2vh;
    --itemTX: 31.5svw;
    --itemTY: 2svh;
}

#inv_item07{
    --itemTX: 33vw;
    --itemTY: 2vh;
    --itemTX: 33svw;
    --itemTY: 2svh;
}

#inv_item08{
    --itemTX: 32vw;
    --itemTY: 32vh;
    --itemTX: 32svw;
    --itemTY: 32svh;
}

#inv_item09{
    --itemTX: 1vw;
    --itemTY: 1vh;
    --itemTX: 1svw;
    --itemTY: 1svh;
}

#inv_item10{
    --itemTX: -34vw;
    --itemTY: 25vh;
    --itemTX: -34svw;
    --itemTY: 25svh;
}

#inv_item11{
    --itemTX:-34vw;
    --itemTY: 25vh;
    --itemTX: -34svw;
    --itemTY: 25svh;
}

#inv_item12{
    --itemTX: 32vw;
    --itemTY: -18vh;
    --itemTX: 32svw;
    --itemTY: -18svh;
}

#inv_item13{
    --itemTX: -28vw;
    --itemTY: -25vh;
    --itemTX: -28svw;
    --itemTY: -25svh;
}

#inv_item14{
    --itemTX: 1.25vw;
    --itemTY: 7.5vh;
    --itemTX: 1.25svw;
    --itemTY: 7.5svh;
}

#inv_item15{
    --itemTX: -25vw;
    --itemTY: 42vh;
    --itemTX: -25svw;
    --itemTY: 42svh;
}

#inv_item16{
    --itemTX: 36vw;
    --itemTY: 15vh;
    --itemTX: 36svw;
    --itemTY: 15svh;
}

#inv_item17{
    --itemTX: -28vw;
    --itemTY: -5vh;
    --itemTX: -28svw;
    --itemTY: 5svh;
}

#inv_item18{
    --itemTX: -40vw;
    --itemTY: 13vh;
    --itemTX: -40svw;
    --itemTY: 13svh;
}

#inv_item23{
    --itemHeight: 26%;
}

#inv_item28{
    --itemTX: 0vw;
    --itemTY: -33vh;
    --itemTX: 0svw;
    --itemTY: -33svh;
}

#iItem28{
    transform: scale(0.96);
}

}