@property --rotate
{
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

@property --left
{
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0;
}

@property --top
{
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0;
}

@property --t
{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --delay
{
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@property --floatAmount
{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --visibility
{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}


@keyframes item-visibility 
{
    0%   { --visibility: 0; animation-timing-function: cubic-bezier(0, 0.5, 0, 1); }
    50%  { --visibility: 1; }
    100% { --visibility: 1; }
}

.pagination input.picker
{
    cursor: pointer;
}

section#portfolio
{
    margin-top: 15vh;
    position: relative;
}

section#portfolio h2.section
{
    margin-bottom: -12vh;
    margin-left: 55%;
    padding: 0rem 7rem 0.5rem 3rem;
    background-image: url(../images/headings/medium_single2.svg);
}

section#portfolio div.pagination
{
    width: 100vw;
    height: 100vh;
    position: relative;
}

section#portfolio
{
    --pageSwitchDuration: 1.25s;
    --cigaretteDelay: 0.075s;

    --screen1MinDepthLow: 0.25px;
    --screen1MaxDepthLow: 1px;
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
    --screen2MinDepthLow: 1.5px;
    --screen2MaxDepthLow: 2.5px;
    --screen2MinDepthHigh: 20px;
    --screen2MaxDepthHigh: 40px;
    --screen3MinDepthLow: 0.75px;
    --screen3MaxDepthLow: 1.5px;
    --screen3MinDepthHigh: 20px;
    --screen3MaxDepthHigh: 40px;
    --bcardMinDepthLow: 1.5px;
    --bcardMaxDepthLow: 3px;
    --bcardMinDepthHigh: 50px;
    --bcardMaxDepthHigh: 65px;
    --bcardOuterShadowMinDepthLow: 1.75px;
    --bcardOuterShadowMaxDepthLow: 2.5px;
    --bcardInnerShadowMinOffsetLow: 0px;
    --bcardInnerShadowMaxOffsetLow: 1.25px;
    --bcardInnerShadowMinDepthLow: 0px;
    --bcardInnerShadowMaxDepthLow: 1px;
    --bcardOuterShadowMinDepthHigh: 45px;
    --bcardOuterShadowMaxDepthHigh: 60px;
    --bcardInnerShadowMinOffsetHigh: 13px;
    --bcardInnerShadowMaxOffsetHigh: 33px;
    --bcardInnerShadowMinDepthHigh: 0px;
    --bcardInnerShadowMaxDepthHigh: 17px;
    --screen1OuterShadowMinDepthLow: 1.75px;
    --screen1OuterShadowMaxDepthLow: 2.5px;
    --screen1InnerShadowMinOffsetLow: 0px;
    --screen1InnerShadowMaxOffsetLow: 1.25px;
    --screen1InnerShadowMinDepthLow: 0px;
    --screen1InnerShadowMaxDepthLow: 1.5px;
    --screen1OuterShadowMinDepthHigh: 45px;
    --screen1OuterShadowMaxDepthHigh: 60px;
    --screen1InnerShadowMinOffsetHigh: 22px;
    --screen1InnerShadowMaxOffsetHigh: 35px;
    --screen1InnerShadowMinDepthHigh: 0px;
    --screen1InnerShadowMaxDepthHigh: 7px;
    --screen2OuterShadowMinDepthLow: 1.75px;
    --screen2OuterShadowMaxDepthLow: 2.5px;
    --screen2InnerShadowMinOffsetLow: 0px;
    --screen2InnerShadowMaxOffsetLow: 1.25px;
    --screen2InnerShadowMinDepthLow: 0px;
    --screen2InnerShadowMaxDepthLow: 0.75px;
    --screen2OuterShadowMinDepthHigh: 45px;
    --screen2OuterShadowMaxDepthHigh: 60px;
    --screen2InnerShadowMinOffsetHigh: 22px;
    --screen2InnerShadowMaxOffsetHigh: 35px;
    --screen2InnerShadowMinDepthHigh: 0px;
    --screen2InnerShadowMaxDepthHigh: 7px;
    --screen3OuterShadowMinDepthLow: 1.75px;
    --screen3OuterShadowMaxDepthLow: 2.5px;
    --screen3InnerShadowMinOffsetLow: 0px;
    --screen3InnerShadowMaxOffsetLow: 1.25px;
    --screen3InnerShadowMinDepthLow: 0px;
    --screen3InnerShadowMaxDepthLow: 1px;
    --screen3OuterShadowMinDepthHigh: 45px;
    --screen3OuterShadowMaxDepthHigh: 60px;
    --screen3InnerShadowMinOffsetHigh: 22px;
    --screen3InnerShadowMaxOffsetHigh: 35px;
    --screen3InnerShadowMinDepthHigh: 0px;
    --screen3InnerShadowMaxDepthHigh: 7px;
    --screen1OffsetHighX: 0px;
    --screen1OffsetHighY: 0px;
    --screen1RotationX: -0.25;
    --screen1RotationY: 1;
    --screen1RotationZ: 0;
    --screen1RotationDegLow: 0deg;
    --screen1RotationDegHigh: 5deg;
    --screen1PivotPointX: 50%;
    --screen1PivotPointY: 50%;
    --screen2OffsetHighX: 0px;
    --screen2OffsetHighY: 0px;
    --screen2RotationX: -0.25;
    --screen2RotationY: 1;
    --screen2RotationZ: 0;
    --screen2RotationDegLow: 0deg;
    --screen2RotationDegHigh: 5deg;
    --screen2PivotPointX: 50%;
    --screen2PivotPointY: 50%;
    --screen3OffsetHighX: 0px;
    --screen3OffsetHighY: 0px;
    --screen3RotationX: -0.25;
    --screen3RotationY: 1;
    --screen3RotationZ: 0;
    --screen3RotationDegLow: 0deg;
    --screen3RotationDegHigh: 5deg;
    --screen3PivotPointX: 50%;
    --screen3PivotPointY: 50%;
    --bCardOffsetHighX: 0px;
    --bCardOffsetHighY: 0px;
    --bCardRotationX: 0.15;
    --bCardRotationY: 0.5;
    --bCardRotationZ: -1;
    --bCardRotationDegLow: 0deg;
    --bCardRotationDegHigh: -15deg;
    --bCardPivotPointX: 0%;
    --bCardPivotPointY: 0%;
    --shadowPerspectiveFov: 500px;
    --viewPerspectiveFov: 1200px;
}

section#portfolio .case
{
    position: absolute;
    display: inline-block;
    transform: translateX(-50%) rotate(var(--rotate)) translate(var(--left), var(--top));
    transition-property: --floatAmount, --rotate, --left, --top;
    transition-duration: 1s, var(--pageSwitchDuration), var(--pageSwitchDuration), var(--pageSwitchDuration);
    transition-timing-function: ease, cubic-bezier(0.25, 0, 0, 1), cubic-bezier(0.25, 0, 0, 1), cubic-bezier(0.25, 0, 0, 1);
    --timing: 0turn;
    --t: calc(sin(var(--timing) + var(--delay)) * 0.5 + 0.5);
}

section#portfolio .case .contentContainer.viewPerspective > picture
{
    inset: 0;
    position: absolute;
    transform-style: preserve-3d;
}

section#portfolio .case.duckmatter
{
    transition-delay: 0s;
    --top: 1vh;
    --left: 22vw;
}

section#portfolio .case.emarsys
{
    transition-delay: 0s;
    --left: 68vw;
    --top: 19vh;

    --bcardOuterShadowMinDepthHigh: 45px;
    --bcardOuterShadowMaxDepthHigh: 70px;
    --bcardInnerShadowMinOffsetHigh: 0px;
    --bcardInnerShadowMaxOffsetHigh: 20px;
    --bcardInnerShadowMinDepthHigh: 15px;
    --bcardInnerShadowMaxDepthHigh: 35px;
    --screen1RotationX: 0.25;
    --screen1RotationY: 1;
    --screen1RotationZ: 0;
    --screen1RotationDegLow: 0deg;
    --screen1RotationDegHigh: -8deg;
    --screen1PivotPointX: -50%;
    --screen1PivotPointY: -50%;
    --bCardRotationX: -1;
    --bCardRotationY: 1;
    --bCardRotationZ: -0.25;
    --bCardRotationDegLow: 0deg;
    --bCardRotationDegHigh: 7deg;
    --bCardPivotPointX: 50%;
    --bCardPivotPointY: 50%;
    --bCardOffsetHighX: -15vh;
    --bCardOffsetHighY: 2vh;
    --bcardMinDepthHigh: 75px;
    --bcardMaxDepthHigh: 95px;
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
}

section#portfolio .case.lotteries
{
    transition-delay: 0s;
    --top: 42vh;
    --left: calc(65vw - 60vh);

    --screen1MinDepthHigh: 40px;
    --screen1MaxDepthHigh: 60px;
    --bcardOuterShadowMinDepthHigh: 45px;
    --bcardOuterShadowMaxDepthHigh: 70px;
    --bcardInnerShadowMinOffsetHigh: 35px;
    --bcardInnerShadowMaxOffsetHigh: 55px;
    --bcardInnerShadowMinDepthHigh: 0px;
    --bcardInnerShadowMaxDepthHigh: 12px;
    --screen1RotationX: 0.35;
    --screen1RotationY: 1;
    --screen1RotationZ: 0;
    --screen1RotationDegLow: 0deg;
    --screen1RotationDegHigh: 7deg;
    --screen1PivotPointX: 50%;
    --screen1PivotPointY: -50%;
    --bCardRotationX: -1;
    --bCardRotationY: 1;
    --bCardRotationZ: -0.5;
    --bCardRotationDegLow: 0deg;
    --bCardRotationDegHigh: -5deg;
    --bCardPivotPointX: -50%;
    --bCardPivotPointY: -50%;
    --bCardOffsetHighX: 11vh;
    --bCardOffsetHighY: -4vh;
}

section#portfolio .case.damit
{
    --bcardInnerShadowMinOffsetHigh: 40px;
    --bcardInnerShadowMaxOffsetHigh: 60px;
    --bcardInnerShadowMinDepthHigh: 0px;
    --bcardInnerShadowMaxDepthHigh: 0px;
    --screen3InnerShadowMinOffsetHigh: 5px;
    --screen3InnerShadowMaxOffsetHigh: 25px;
    --screen3InnerShadowMinDepthHigh: 0px;
    --screen3InnerShadowMaxDepthHigh: 10px;
    --bcardMinDepthHigh: 40px;
    --bcardMaxDepthHigh: 60px;
    --screen1MinDepthHigh: 10px;
    --screen1MaxDepthHigh: 30px;
    --screen2MinDepthHigh: 50px;
    --screen2MaxDepthHigh: 70px;
    --screen3MinDepthHigh: 30px;
    --screen3MaxDepthHigh: 50px;
    --screen1OffsetHighX: -0.5vh;
    --screen1OffsetHighY: 1.5vh;
    --screen1RotationX: -0.25;
    --screen1RotationY: 1;
    --screen1RotationZ: -0.25;
    --screen1RotationDegLow: 0deg;
    --screen1RotationDegHigh: 12deg;
    --screen1PivotPointX: 50%;
    --screen1PivotPointY: 50%;
    --screen2OffsetHighX: 2vh;
    --screen2OffsetHighY: 3vh;
    --screen2RotationX: -0.25;
    --screen2RotationY: -0.1;
    --screen2RotationZ: 0;
    --screen2RotationDegLow: 0deg;
    --screen2RotationDegHigh: 3deg;
    --screen2PivotPointX: 0%;
    --screen2PivotPointY: 50%;
    --screen3OffsetHighX: 5.5vh;
    --screen3OffsetHighY: 0px;
    --screen3RotationX: 0.25;
    --screen3RotationY: 1;
    --screen3RotationZ: -0.5;
    --screen3RotationDegLow: 0deg;
    --screen3RotationDegHigh: -10deg;
    --screen3PivotPointX: -50%;
    --screen3PivotPointY: -50%;
    --bCardRotationX: 0.5;
    --bCardRotationY: 1;
    --bCardRotationZ: -0.75;
    --bCardRotationDegLow: 0deg;
    --bCardRotationDegHigh: -22deg;
    --bCardPivotPointX: -50%;
    --bCardPivotPointY: 50%;
    --bCardOffsetHighX: 4.5vh;
    --bCardOffsetHighY: 8vh;
}

section#portfolio .case.rotable
{
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
    --bcardMinDepthHigh: 60px;
    --bcardMaxDepthHigh: 80px;
    --bcardInnerShadowMinOffsetHigh: -10px;
    --bcardInnerShadowMaxOffsetHigh: 10px;
    --bcardInnerShadowMinDepthHigh: 25px;
    --bcardInnerShadowMaxDepthHigh: 35px;
    --screen1OffsetHighX: 0px;
    --screen1OffsetHighY: 0px;
    --screen1RotationX: -0.35;
    --screen1RotationY: 1;
    --screen1RotationZ: 0;
    --screen1RotationDegHigh: -5deg;
    --screen1PivotPointX: -50%;
    --screen1PivotPointY: -50%;
    --bCardOffsetHighX: -15vh;
    --bCardOffsetHighY: -3.5vh;
    --bCardRotationX: 1;
    --bCardRotationY: 0.1;
    --bCardRotationZ: -0.5;
    --bCardRotationDegHigh: 35deg;
    --bCardPivotPointX: 50%;
    --bCardPivotPointY: -50%;
}

section#portfolio .case.cityriddler
{
    --screen1MinDepthLow: 0.25px;
    --screen1MaxDepthLow: 1px;
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
    --screen2MinDepthLow: 1.5px;
    --screen2MaxDepthLow: 2.5px;
    --screen2MinDepthHigh: 30px;
    --screen2MaxDepthHigh: 50px;
    --screen3MinDepthLow: 0.75px;
    --screen3MaxDepthLow: 1.5px;
    --screen3MinDepthHigh: 0px;
    --screen3MaxDepthHigh: 20px;
    --bcardMinDepthLow: 1.5px;
    --bcardMaxDepthLow: 3px;
    --bcardMinDepthHigh: 40px;
    --bcardMaxDepthHigh: 55px;
    --bcardOuterShadowMinDepthHigh: 45px;
    --bcardOuterShadowMaxDepthHigh: 60px;
    --bcardInnerShadowMinOffsetHigh: 5px;
    --bcardInnerShadowMaxOffsetHigh: 20px;
    --bcardInnerShadowMinDepthHigh: 0px;
    --bcardInnerShadowMaxDepthHigh: 10px;
    --screen1OuterShadowMinDepthHigh: 45px;
    --screen1OuterShadowMaxDepthHigh: 60px;
    --screen1InnerShadowMinOffsetHigh: 0px;
    --screen1InnerShadowMaxOffsetHigh: 0px;
    --screen1InnerShadowMinDepthHigh: 0px;
    --screen1InnerShadowMaxDepthHigh: 0px;
    --screen2OuterShadowMinDepthHigh: 45px;
    --screen2OuterShadowMaxDepthHigh: 60px;
    --screen2InnerShadowMinOffsetHigh: 22px;
    --screen2InnerShadowMaxOffsetHigh: 35px;
    --screen2InnerShadowMinDepthHigh: 0px;
    --screen2InnerShadowMaxDepthHigh: 7px;
    --screen3OuterShadowMinDepthHigh: 45px;
    --screen3OuterShadowMaxDepthHigh: 60px;
    --screen3InnerShadowMinOffsetHigh: 0px;
    --screen3InnerShadowMaxOffsetHigh: 20px;
    --screen3InnerShadowMinDepthHigh: 0px;
    --screen3InnerShadowMaxDepthHigh: 11px;
    --screen1OffsetHighX: -2vh;
    --screen1OffsetHighY: 1vh;
    --screen1RotationX: -0.25;
    --screen1RotationY: 1;
    --screen1RotationZ: -1;
    --screen1RotationDegLow: 0deg;
    --screen1RotationDegHigh: 12deg;
    --screen1PivotPointX: 50%;
    --screen1PivotPointY: -50%;
    --screen2OffsetHighX: 6vh;
    --screen2OffsetHighY: -3vh;
    --screen2RotationX: 0.25;
    --screen2RotationY: -0.75;
    --screen2RotationZ: 1;
    --screen2RotationDegLow: 0deg;
    --screen2RotationDegHigh: -6deg;
    --screen2PivotPointX: 50%;
    --screen2PivotPointY: 50%;
    --screen3OffsetHighX: 8vh;
    --screen3OffsetHighY: -2vh;
    --screen3RotationX: 0.15;
    --screen3RotationY: -1;
    --screen3RotationZ: 0;
    --screen3RotationDegLow: 0deg;
    --screen3RotationDegHigh: 14deg;
    --screen3PivotPointX: -50%;
    --screen3PivotPointY: -50%;
    --bCardOffsetHighX: 9vh;
    --bCardOffsetHighY: 2vh;
    --bCardRotationX: 0.1;
    --bCardRotationY: -1;
    --bCardRotationZ: 0.5;
    --bCardRotationDegLow: 0deg;
    --bCardRotationDegHigh: 20deg;
    --bCardPivotPointX: -50%;
    --bCardPivotPointY: -50%;
}

section#portfolio .case.purplelamp
{
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
    --bcardMinDepthHigh: 50px;
    --bcardMaxDepthHigh: 70px;
    --bcardInnerShadowMinOffsetHigh: 20px;
    --bcardInnerShadowMaxOffsetHigh: 40px;
    --bcardInnerShadowMinDepthHigh: 5px;
    --bcardInnerShadowMaxDepthHigh: 25px;
    --screen1OffsetHighX: 0px;
    --screen1OffsetHighY: 0px;
    --screen1RotationX: 1;
    --screen1RotationY: -1;
    --screen1RotationZ: 0;
    --screen1RotationDegHigh: -6deg;
    --screen1PivotPointX: 50%;
    --screen1PivotPointY: 50%;
    --bCardOffsetHighX: 18vh;
    --bCardOffsetHighY: 2.5vh;
    --bCardRotationX: 1;
    --bCardRotationY: 1;
    --bCardRotationZ: 0;
    --bCardRotationDegHigh: -7deg;
    --bCardPivotPointX: -50%;
    --bCardPivotPointY: -50%;
}

section#portfolio .case.tricentis
{
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
    --bcardMinDepthHigh: 60px;
    --bcardMaxDepthHigh: 80px;
    --bcardInnerShadowMinOffsetHigh: 0px;
    --bcardInnerShadowMaxOffsetHigh: 20px;
    --bcardInnerShadowMinDepthHigh: 15px;
    --bcardInnerShadowMaxDepthHigh: 35px;
    --screen1OffsetHighX: 0px;
    --screen1OffsetHighY: 0px;
    --screen1RotationX: -0.35;
    --screen1RotationY: 1;
    --screen1RotationZ: 0;
    --screen1RotationDegHigh: -5deg;
    --screen1PivotPointX: -50%;
    --screen1PivotPointY: -50%;
    --bCardOffsetHighX: -9vh;
    --bCardOffsetHighY: -4.5vh;
    --bCardRotationX: 1;
    --bCardRotationY: 0.25;
    --bCardRotationZ: -0.25;
    --bCardRotationDegHigh: 11deg;
    --bCardPivotPointX: 50%;
    --bCardPivotPointY: -50%;
}


section#portfolio .case.tubics
{
    --screen1MinDepthHigh: 20px;
    --screen1MaxDepthHigh: 40px;
    --bcardMinDepthHigh: 60px;
    --bcardMaxDepthHigh: 80px;
    --bcardInnerShadowMinOffsetHigh: -10px;
    --bcardInnerShadowMaxOffsetHigh: 10px;
    --bcardInnerShadowMinDepthHigh: 25px;
    --bcardInnerShadowMaxDepthHigh: 45px;
    --screen1OffsetHighX: 0px;
    --screen1OffsetHighY: 0px;
    --screen1RotationX: -0.5;
    --screen1RotationY: 1;
    --screen1RotationZ: 0;
    --screen1RotationDegHigh: -5deg;
    --screen1PivotPointX: -50%;
    --screen1PivotPointY: -50%;
    --bCardOffsetHighX: -6vh;
    --bCardOffsetHighY: -2vh;
    --bCardRotationX: -0.25;
    --bCardRotationY: 1;
    --bCardRotationZ: 1;
    --bCardRotationDegHigh: 8deg;
    --bCardPivotPointX: 50%;
    --bCardPivotPointY: 50%;
}

section#portfolio .case div.shadowcontainer,
section#portfolio .case div.contentcontainer
{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

section#portfolio.withinViewport div.shadowcontainer
{
    transition-property: opacity;
    transition-duration: var(--pageSwitchDuration);
}

section#portfolio.withinViewport div.shadowcontainer .screen
{
    transform-style: preserve-3d;
}

section#portfolio.withinViewport .shadowPerspective
{
    perspective: var(--shadowPerspectiveFov);
    perspective-origin: -30vh -30vh;
}

section#portfolio.withinViewport .viewPerspective
{
    perspective: var(--viewPerspectiveFov);
    perspective-origin: center;
}

section#portfolio.withinViewport .case.duckmatter .viewPerspective
{
    perspective-origin: 50vh 50vh;
}

section#portfolio.withinViewport .case.emarsys .viewPerspective
{
    perspective-origin: -10vh 37vh;
}

section#portfolio.withinViewport .case.lotteries .viewPerspective
{
    perspective-origin: 50vh -9vh;
}

section#portfolio.withinViewport .case.damit .viewPerspective
{
    perspective-origin: 50vh 50vh;
}

section#portfolio.withinViewport .case.cityriddler .viewPerspective
{
    perspective-origin: 50vh -5vh
}

section#portfolio.withinViewport .case.rotable .viewPerspective
{
    perspective-origin: -10vh 20vh;
}

section#portfolio.withinViewport .case.purplelamp .viewPerspective
{
    perspective-origin: 50vh 50vh;
}

section#portfolio.withinViewport .case.tricentis .viewPerspective
{
    perspective-origin: -10vh 37vh;
}

section#portfolio.withinViewport .case.tubics .viewPerspective
{
    perspective-origin: 50vh -9vh;
}

section#portfolio .case.cityriddler .display.three .two .shadowfill
{
    transform: rotate3d(0, 1, 0, calc(var(--floatAmount) * 32deg));
}

section#portfolio .case.emarsys .display .bCard .shadowfill
{
    transform: rotate3d(0, 0, -1, calc(var(--floatAmount) * 8deg));
}

section#portfolio .case.rotable .display .bCard .shadowfill
{
    transform: rotate3d(0, -1, 0, calc(var(--floatAmount) * 4deg));
}

section#portfolio .case.purplelamp .display .bCard .shadowfill
{
    transform: rotate3d(0, 1, -0.5, calc(0deg - var(--floatAmount) * 7deg));
}

section#portfolio .case.tricentis .display .bCard .shadowfill
{
    transform: rotate3d(0, -1, -0.5, calc(var(--floatAmount) * 5deg));
}

section#portfolio.withinViewport .case .display div.bCard
{
    transform-style: preserve-3d;
}

section#portfolio .case div.screen.display
{
    width: 100%;
    height: 100%;
    position: relative;
    background-size: 100%;
    overflow: hidden;
}

section#portfolio.withinViewport .case div.screen.display,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen.display
{
    transform:
        translate3d(var(--left), var(--top), var(--screen1MaxDepthLow))
        rotate(var(--rotate));
    transform-style: preserve-3d;
}

section#portfolio.withinViewport .case div.screen.two.display,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen.two.display
{
    transform:
        translate3d(var(--left), var(--top), var(--screen2MaxDepthLow))
        rotate(var(--rotate));
    transform-style: preserve-3d;
}

section#portfolio.withinViewport .case div.screen.three.display,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen.three.display
{
    transform:
        translate3d(var(--left), var(--top), var(--screen3MaxDepthLow))
        rotate(var(--rotate));
    transform-style: preserve-3d;
}

section#portfolio .case div.screen.mobile
{
    height: 97%;
    aspect-ratio: 0.5;
    width: auto;
    position: absolute;
    --left: 0;
    --top: 0;
    --t: calc(sin(var(--timing) + var(--delay)) * 0.5 + 0.5);
}

section#portfolio .case div.screen.mobile.one
{
    --delay: 0.24turn;
}

section#portfolio .case div.screen.mobile.two
{
    --delay: 0.85turn;
}

section#portfolio .case div.screen.mobile.three
{
    --delay: 0.67turn;
}

section#portfolio .case .one div.screen.mobile.inner
{
    --left: 77.75%;
    --top: -0.25%;
    --rotate: 6deg;
    height: 100%;
}

section#portfolio .case .three div.screen.mobile.inner
{
    --left: -78%;
    --top: -3.35%;
    --rotate: -4deg;
    height: 100%;
}

section#portfolio .case div.screen .inverse,
section#portfolio .case div.screen .inverse2
{
    position: absolute;
    width: 100%;
    height: 100%;
}

section#portfolio.withinViewport .case div.screen .inverse,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen .inverse
{
    opacity: 0.75;
    transform:
        rotate(var(--rotate))
        translate3d(var(--left), var(--top), var(--screen1MaxDepthLow));
}

section#portfolio.withinViewport .case div.screen.two .inverse,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen.two .inverse
{
    opacity: 0.75;
    transform:
        rotate(var(--rotate))
        translate3d(var(--left), var(--top), var(--screen2MaxDepthLow));
}

section#portfolio.withinViewport .case div.screen.three .inverse,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen.three .inverse
{
    opacity: 0.75;
    transform:
        rotate(var(--rotate))
        translate3d(var(--left), var(--top), var(--screen3MaxDepthLow));
}

section#portfolio.withinViewport .case div.screen .inverse2,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen .inverse2
{
    transform: translate3d(0, 0, var(--bcardInnerShadowMaxOffsetLow));
    transform-style: preserve-3d;
}

section#portfolio.withinViewport .case div.screen .inverse2.one,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen .inverse2.one
{
    transform: translate3d(0, 0, var(--screen1InnerShadowMaxOffsetLow));
    transform-style: preserve-3d;
}

section#portfolio.withinViewport .case div.screen .inverse2.three,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 div.screen .inverse2.three
{
    transform: translate3d(0, 0, var(--screen3InnerShadowMaxOffsetLow));
    transform-style: preserve-3d;
}

section#portfolio .case .bCard,
section#portfolio .case .note
{
    pointer-events: none;
}

section#portfolio.withinViewport .case .screen,
section#portfolio.withinViewport .case .bCard,
section#portfolio.withinViewport .case .note
{
    transition-property: --rotate, --left, --top, opacity;
    transition-duration: var(--pageSwitchDuration);
}

section#portfolio input#page2toggle:checked ~ .case.lotteries .note
{
    --left: 14.6vh;
    --top: 37.9vh;
    --rotate: 33deg;
}

section#portfolio.withinViewport .case img.bCard
{
    transition-property: --rotate, --left, --top, filter, opacity;
}

section#portfolio.withinViewport .case .screen.display img.main
{
    transition-property: filter;
    transition-duration: var(--pageSwitchDuration);
}

section#portfolio.withinViewport .case div.inverse
{
    --left: 0;
    --top: 0;
    --rotate: 0deg;
    transition-property: --rotate, --left, --top, opacity;
    transition-duration: var(--pageSwitchDuration);
}

section#portfolio .case.duckmatter
{
    height: 37.5vh;
    aspect-ratio: 1.69;
}

section#portfolio .case.duckmatter .screen.desktop
{
    --rotate: 1deg;
}

section#portfolio .case.duckmatter div.inverse
{
    --rotate: -1deg;
}

section#portfolio .case.emarsys
{
    height: 37.5vh;
    aspect-ratio: 1.49;
}

section#portfolio .case.emarsys .screen.desktop
{
    --rotate: -1deg;
}

section#portfolio .case.emarsys div.inverse
{
    --rotate: 1deg;
}

section#portfolio .case.lotteries
{
    height: 37.5vh;
    aspect-ratio: 1.7;
}

section#portfolio .case.lotteries .screen.desktop
{
    --rotate: -3deg;
}

section#portfolio .case.lotteries div.inverse 
{
    --rotate: 3deg;
}

section#portfolio .case.damit
{
    height: 37.5vh;
    aspect-ratio: 0.5;
}

section#portfolio .case.damit,
section#portfolio .case.cityriddler
{
    height: 37.5vh;
    aspect-ratio: 1.25;
}

section#portfolio .case.rotable
{
    height: 37.5vh;
    aspect-ratio: 1.545;
}

section#portfolio .case.tubics
{
    height: 37.5vh;
    aspect-ratio: 1.68;
}

section#portfolio .case.tubics .screen.desktop
{
    --rotate: -2deg;
}

section#portfolio .case.tubics div.inverse
{
    --rotate: 2deg;
}

section#portfolio .case.tricentis
{
    height: 37.5vh;
    aspect-ratio: 1.69;
}

section#portfolio .case.tricentis .screen.desktop
{
    --rotate: -4deg;
}

section#portfolio .case.tricentis div.inverse
{
    --rotate: 4deg;
}

section#portfolio .case.purplelamp
{
    height: 37.5vh;
    aspect-ratio: 1.545;
}

section#portfolio .case.purplelamp .screen.desktop
{
    --rotate: 3deg;
}

section#portfolio .case.purplelamp div.inverse
{
    --rotate: -3deg;
}

section#portfolio .case .shadow
{
    position: absolute;
    pointer-events: none;
}

section#portfolio.withinViewport .case .shadow.inner.bcard,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .shadow.inner.bcard
{
    transform:
        translate3d(var(--left), var(--top), var(--bcardInnerShadowMaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case .screen.one .shadow.inner.screen,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .screen.one .shadow.inner.screen
{
    transform:
        translate3d(var(--left), var(--top), var(--screen1InnerShadowMaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case .screen.two .shadow.inner.screen,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .screen.two .shadow.inner.screen
{
    transform:
        translate3d(var(--left), var(--top), var(--screen2InnerShadowMaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case .screen.three .shadow.inner.screen,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .screen.three .shadow.inner.screen
{
    transform:
        translate3d(var(--left), var(--top), var(--screen3InnerShadowMaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case div.shadow.inner.note
{
    transform: translate3d(var(--left), var(--top), var(--bcardInnerShadowMaxDepthLow)) rotate(var(--rotate));
}

section#portfolio.withinViewport .case .shadow.outer.bcard,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .shadow.outer.bcard
{
    transform:
        translate3d(var(--left), var(--top), var(--bcardMaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case .shadow.outer.note
{
    transform: translate3d(var(--left), var(--top), var(--bcardOuterShadowMaxDepthLow)) rotate(var(--rotate));
}

section#portfolio .case .shadow.outer div.shadowfill
{
    background-color: var(--primary);
}

section#portfolio .case .shadow.inner div.shadowfill
{
    background-color: var(--dark100);
}

section#portfolio.withinViewport .case .shadow.outer.screen,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .shadow.outer.screen
{
    transform:
        translate3d(var(--left), var(--top), var(--screen1MaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case .shadow.outer.screen.two,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .shadow.outer.screen.two
{
    transform:
        translate3d(var(--left), var(--top), var(--screen2MaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case .shadow.outer.screen.three,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 .shadow.outer.screen.three
{
    transform:
        translate3d(var(--left), var(--top), var(--screen3MaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio .case .shadow.outer.screen.desktop
{
    width: 100%;
    height: 100%;
    --left: 0;
    --top: 0;
}

section#portfolio.withinViewport .case img.bcard,
section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1 img.bcard
{
    transform:
        translate3d(var(--left), var(--top), var(--bcardMaxDepthLow))
        rotate(var(--rotate));
}

section#portfolio.withinViewport .case img.note
{
    position: absolute;
    transform: translate3d(var(--left), var(--top), var(--bcardMaxDepthLow)) rotate(var(--rotate));
}

section#portfolio .case .bcard
{
    aspect-ratio: 1.82;
    height: 13vh;
}

section#portfolio .case .bcard.vertical
{
    height: auto;
    aspect-ratio: 0.55;
    width: 13vh;
}

section#portfolio .case.duckmatter .bcard
{
    --rotate: -5deg;
    --left: 56.5vh;
    --top: 8.25vh;
}

section#portfolio .case.emarsys .bcard
{
    --rotate: 8deg;
    --left: 31.3vh;
    --top: -10.5vh;
}

section#portfolio .case.lotteries .bcard
{
    --rotate: 6deg;
    --left: 22.5vh;
    --top: 33.4vh;
}

section#portfolio .case .note
{
    height: 15vh;
    aspect-ratio: 1;
}

section#portfolio .case.duckmatter .note
{
    --left: 5.05vh;
    --top: 24.4vh;
    --rotate: 1deg;
}

section#portfolio .case.emarsys .note
{
    --left: 38vh;
    --top: 33.4vh;
    --rotate: -6deg;
}

section#portfolio .case.lotteries .note
{
   --left: 3vh;
   --top: 33.75vh;
   --rotate: 0deg;
}

section#portfolio .shadowfill
{
    width: 100%;
    height: 100%;
    pointer-events: none;
}

section#portfolio .case .bcard
{
    --delay: 0.19turn;
    --t: calc(sin(var(--timing) + var(--delay)) * 0.5 + 0.5);
}

section#portfolio div.folder
{
    position: absolute;
    width: 100%;
    height: 100%;
}

section#portfolio.withinViewport div.folder.solid
{
    perspective: var(--viewPerspectiveFov);
    perspective-origin: calc(-50vh + 50%) 50%;
}

section#portfolio.withinViewport div.folder.shadow.next
{
    perspective: var(--shadowPerspectiveFov);
    perspective-origin: 70vh -20vh;
}

section#portfolio.withinViewport div.folder.next
{
    transform: translate(calc((1 - var(--visibility)) * 35vw), 0) rotate(calc((1 - var(--visibility)) * 35deg));
}

section#portfolio.withinViewport div.folder.shadow.prev
{
    perspective: var(--shadowPerspectiveFov);
    perspective-origin: -30vh -20vh;
}

section#portfolio.withinViewport div.folder.prev
{
    transform: translate(calc((1 - var(--visibility)) * -35vw), 0) rotate(calc((1 - var(--visibility)) * -35deg));
}

section#portfolio div.folder
{
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    --t: calc(sin(var(--timing)) * 0.5 + 0.5);
    --floatAmount: 0;
}

section#portfolio.withinViewport div.folder
{
    transition-property: --floatAmount, opacity;
    transition-duration: 0.75s;
}

section#portfolio.withinViewport div.folder.bottom.shadow img,
section#portfolio.withinViewport div.folder.bottom.solid img
{
    transform: 
        translate(var(--left), var(--top))
        rotateZ(var(--rotZ)) 
        translate3d(0px, 0px, calc(var(--floatAmount) * (5px + var(--t) * 10px) + (1 - var(--floatAmount)) * (1px + 4px * var(--t))));
}

section#portfolio.withinViewport div.folder.top.shadow img,
section#portfolio.withinViewport div.folder.top.solid img
{
    transform: 
        translate(var(--left), var(--top))
        translateX(50%) 
        rotateZ(var(--rotZ)) 
        rotateY(calc(6deg * var(--floatAmount) + 1deg * (1 - var(--floatAmount)))) 
        translateX(-50%) 
        translate3d(0px, 0px, calc(var(--floatAmount) * (5px + var(--t) * 10px) + (1 - var(--floatAmount)) * (1px + 4px * var(--t))));
}

section#portfolio.withinViewport div.folder.top.shadow img.three,
section#portfolio.withinViewport div.folder.top.solid img.three
{
    transform: 
        translate(var(--left), var(--top))
        rotateZ(var(--rotZ)) 
        translate3d(0px, 0px, calc(var(--floatAmount) * (5px + var(--t) * 10px) + (1 - var(--floatAmount)) * (1px + 4px * var(--t))));
}

section#portfolio div.folder.top.shadow
{
    opacity: 0.85;
}

section#portfolio div.folder img
{
    position: absolute;
    height: 72vh;
}

section#portfolio div.folder.next img.one
{
    --left: calc(75vw + 72vh - 100%);
    --top: 10vh;
    --rotZ: 5deg;
}

section#portfolio div.folder.next img.two
{
    --left: calc(100vw + 72vh - 100%);
    --top: 0vh;
    --rotZ: -7deg;
}

section#portfolio div.folder.next img.three
{    
    --left: calc(100vw + 66.5vh - 100%);
    --top: 26vh;
    --rotZ: 23.5deg;
    height: 80vh;
    display: inline-block;
}

section#portfolio div.folder.prev img,
section#portfolio div.folder.next img
{
    transition-property: --left;
    transition-duration: var(--pageSwitchDuration);
    transition-timing-function: cubic-bezier(0.25, 0, 0, 1);
}

section#portfolio div.folder.prev img.one
{
    --top: 14vh;
    --left: calc(-68vh - 100%);
    --rotZ: -176deg;
}

section#portfolio div.folder.prev img.two 
{
    --top: 2vh;
    --left: calc(-68vh - 100%);
    --rotZ: -176deg;
}

section#portfolio .case.damit .screen.mobile.one
{
    --rotate: -26deg;
    --top: 10vh;
}

section#portfolio .case.damit .one div.inverse
{
    --rotate: 26deg;
    --top: -10vh;
}

section#portfolio .case.damit .screen.mobile.two
{    
    --rotate: -66deg;
    --left: 13vh;
}

section#portfolio .case.damit .screen.mobile.three
{    
    --rotate: -120deg;
    --left: 11vh;
}

section#portfolio .case.damit .three div.inverse
{    
    --rotate: 120deg;
    --left: -11vh;
}

section#portfolio .case.damit
{    
    --left: calc(54vh + 75vw);
    --top: 10vh;
    pointer-events: none;
}

section#portfolio .case.damit .bcard
{    
    --rotate: -75deg;
    --left: 7vh;
    --top: -3vh;
}

section#portfolio .case.damit .note
{    
    --rotate: -15deg;
    --left: -6.6vh;
    --top: 15.75vh;
}

section#portfolio .case.cityriddler .screen.mobile.one
{
    --rotate: -100deg;
    --top: 14vh;
}

section#portfolio .case.cityriddler .one div.inverse
{
    --rotate: 100deg;
    --top: -14vh;
}

section#portfolio .case.cityriddler .screen.mobile.two
{
    --rotate: 14deg;
    --left: 4vh;
}

section#portfolio .case.cityriddler .screen.mobile.three
{
    --rotate: -6deg;
    --top: -6vh;
    --left: 6vh;
}

section#portfolio .case.cityriddler .three div.inverse
{
    --rotate: 6deg;
    --top: 6vh;
    --left: -6vh;
}

section#portfolio .case.cityriddler
{
    --left: calc(75vw + 54vh);
    --top: 38vh;
    pointer-events: none;
}

section#portfolio .case.cityriddler .bcard
{        
    --rotate: -65deg;
    --left: 11.7vh;
    --top: 0.75vh;
}

section#portfolio .case.cityriddler .note
{    
    --rotate: 5deg;
    --left: 30.5vh;
    --top: 9.4vh;
}

section#portfolio .case.rotable .screen.desktop
{
    --rotate: -93deg;
}

section#portfolio .case.rotable div.inverse
{
    --rotate: 93deg;
}

section#portfolio .case.rotable
{    
    --left: calc(43vh + 75vw);
    --top: 25vh;
    pointer-events: none;
}

section#portfolio .case.rotable .bcard
{    
    --rotate: -105deg;
    --left: 19.69vh;
    --top: 23.25vh;
}

section#portfolio .case.rotable .note
{
    --left: 22.6vh;
    --top: 9vh;
    --rotate: 33deg;
}

section#portfolio .case.purplelamp .screen.desktop
{
    --rotate: 82deg;
}

section#portfolio .case.purplelamp div.inverse
{
    --rotate: -82deg;
}

section#portfolio .case.purplelamp
{    
    --left: calc(75vw + 45vh);
    --top: 13vh;
    pointer-events: none;
}

section#portfolio .case.purplelamp .bcard
{    
    --rotate: -105deg;
    --left: 34%;
    --top: 62%;
}

section#portfolio .case.purplelamp .note
{
    --left: 22.6vh;
    --top: 36vh;
    --rotate: 33deg;
}

section#portfolio .case.tricentis .screen.desktop
{
    --rotate: -93deg;
}

section#portfolio .case.tricentis div.inverse
{
    --rotate: 93deg;
}

section#portfolio .case.tricentis
{
    --left: calc(43vh + 75vw);
    --top: 22vh;
    pointer-events: none;
}

section#portfolio .case.tricentis .bcard
{    
    --rotate: -105deg;
    --left: 21.5vh;
    --top: 23.25vh;
}

section#portfolio .case.tricentis .note
{
    --left: 24.7vh;
    --top: 36vh;
    --rotate: 33deg;
}

section#portfolio .case.tubics .screen.desktop
{
    --rotate: -98deg;
}

section#portfolio .case.tubics div.inverse
{
    --rotate: 98deg;
}

section#portfolio .case.tubics
{    
    --left: calc(75vw + 43vh);
    --top: 13vh;
    pointer-events: none;
}

section#portfolio .case.tubics .bcard
{    
    --rotate: -105deg;
    --left: 21.42vh;
    --top: 23.25vh;
}

section#portfolio .case.tubics .note
{
    --left: 24.6vh;
    --top: 36vh;
    --rotate: 33deg;
}

section#portfolio .case .screen.display img.main
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

section#portfolio .case.duckmatter .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.2);
}

section#portfolio .case.emarsys .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.1);
}

section#portfolio .case.lotteries .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.125);
}

section#portfolio .case.lotteries img.bCard
{
    filter: contrast(1.0) brightness(1.0);
}

section#portfolio .case.damit .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.125);
}

section#portfolio .case.cityriddler .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.1);
}

section#portfolio .case.rotable .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.075);
}

section#portfolio .case.tricentis .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.125);
}

section#portfolio .case.tubics .screen.display img.main
{
    filter: contrast(1) brightness(1) grayscale(0.925) sepia(0.1);
}

section#portfolio .case.purplelamp .screen.display img.main
{
    filter: contrast(0.65) brightness(1.25) grayscale(0.925) sepia(0.175)
}

section#portfolio .case .screen.display img.overlay
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: calc(1 - var(--floatAmount));
}

section#portfolio .cigarette
{
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    transition: none;
    visibility: hidden;
}

section#portfolio .cigarette.one
{
    transition-property: visibility;
    transition-delay: calc(var(--cigaretteDelay) + var(--pageSwitchDuration));
    visibility: visible;
}

section#portfolio svg.cigarette.one
{
    transform: translate(54vw, 34vh);
    height: 40vh;
    width: auto;
}

.withinViewport .stopmotion.cigarette .frame 
{
    animation-name: StopMotionCigarette;
    animation-duration: 2.5s;
}

.stopmotion.cigarette .frame.two
{
    animation-delay: 0.5s;
}

.stopmotion.cigarette .frame.three
{
    animation-delay: 1s;
}

.stopmotion.cigarette .frame.four
{
    animation-delay: 1.5s;
}

.stopmotion.cigarette .frame.five
{
    animation-delay: 2s;
}

section#portfolio img.burn
{
    mix-blend-mode: color-burn;
}

section#portfolio img.burn.one
{
    transform: translate(calc(54vw + 20vh), 59vh);
    height: 4vh;
}

section#portfolio img.random
{
    position: absolute;
    display: inline-block;
    height: 16vh;
    transform: translate(calc(var(--left)), var(--top)) rotate(var(--rotate)) translateX(-50%);
    transition-property: --left, --top, --rotate;
    transition-duration: var(--pageSwitchDuration);
    transition-timing-function: cubic-bezier(0.25, 0, 0, 1);
}

section#portfolio img.random.one
{
    display: inline-block;
    --left: calc(14vh + 63vw);
    --top: 73vh;
    --rotate: 8deg;
}

section#portfolio .case picture
{
    display: inline-block;
}

section#portfolio svg.cigarette.two
{    
    transform: translate(calc(56vw - 20vh), 15vh);
    height: 26rem;
    width: auto;
}

section#portfolio img.burn.two
{
    transform: translate(calc(56vw - 13.5vh), 28.5vh);
    height: 4vh;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ img.random.two
{
    display: inline-block;
    --left: calc(19vh + 65vw);
    --top: 4vh;
    --rotate: -14deg;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ img.random.four
{
    display: inline-block;
    --left: 54vw;
    --top: 11vh;
    --rotate: 23deg;
}

section#portfolio .case.purplelamp picture.foreground img
{
    height: 47vh;
}

section#portfolio .case.tricentis picture.foreground img
{
    height: 51vh;
}

section#portfolio .case.tubics picture.foreground img
{
    height: 45vh;
}

section#portfolio svg.cigarette.three
{
    transform: translate(69.7vw, 59vh);
    height: 16rem;
    width: auto;
}

section#portfolio img.burn.three
{
    transform: translate(calc(69.7vw + 10.5vh), 64vh);
    height: 3rem;
}

section#portfolio input#page3toggle:checked ~ img.random.three
{
    display: inline-block;
    --left: calc(1vh + 60vw);
    --top: 63vh;
    --rotate: 8deg;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ img.random.one
{
    --left: calc(20vw + -37vh);
    --top: 60vh;
    --rotate: 50deg;
}

section#portfolio input#page3toggle:checked ~ img.random.one
{
    --left: calc(0vh);
    --top: 60vh;
    --rotate: 50deg;
}

section#portfolio img.random.two
{
    --left: calc(75vw + 30vh);
    --top: 32vh;
    --rotate: -60deg;
}

section#portfolio input#page3toggle:checked ~ img.random.two
{
    --left: calc(20vw - 30vh);
    --top: 30vh;
    --rotate: -30deg;
}

section#portfolio img.random.four
{
    --left: calc(75vw + 28vh);
    --top: 10vh;
    --rotate: -70deg;
}

section#portfolio input#page3toggle:checked ~ img.random.four
{
    --left: calc(20vw - 30vh);
    --top: 3vh;
    --rotate: -30deg;
}

section#portfolio img.random.three
{    
    --left: calc(100vw + 20vh);
    --top: 12vh;
    --rotate: 120deg;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ img.random.three
{
    --left: calc(75vw + 20vh);
    --top: 12vh;
    --rotate: 120deg;
}

section#portfolio div.nda
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    background-color: #44444499;
}

div.nda img.folder
{
    position: absolute;
    height: 96vh;
    right: 6%;
    top: 4vh;
}

div.nda img.folder.hover
{
    display: none;
}

div.stocker
{
    display: none;
    position: fixed;
    right: 5.5vw;
    height: 81.35vh;
    aspect-ratio: 0.76;
    background-image: url(../images/portfolio/portfolio_nda_paper.svg?v=3);
    background-repeat: no-repeat;
    background-size: cover;
    top: 8vh;
    rotate: 2deg;
    z-index: 2;
}

div.stocker a.link
{
    display: inline-block;
    position: relative;
    left: 29%;
    top: -1.2%;
    rotate: -2deg;
}

input#ndatoggle:checked ~ div.stocker a.link
{
    transition-property: transform;
    transition-duration: var(--pageSwitchDuration);
    animation-name: ItemFloat;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

div.stocker a.link img.foreground
{
    position: relative;
    width: 40vh;
}

div.stocker a.link img.background
{
    position: absolute;
    width: 100%;
}

input#ndatoggle:checked ~ div.stocker a.link img.background
{
    animation-name: ShadowFloatLow;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transition-property: transform, opacity;
    transition-duration: var(--pageSwitchDuration);
}

div.stocker h3.title
{
    margin: 10% 7% 4% 7%;
    font-family: Neucha;
    font-size: 2.4vh;
    font-weight: 100;
    color: var(--dark200);
}

div.stocker p.desc
{
    margin: 3% 8% 0% 7%;
    font-family: Neucha;
    letter-spacing: 0.06vh;
    font-size: 1.4vh;
    color: var(--dark200);
}

section#portfolio input.picker
{
    position: absolute;
    appearance: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

section#portfolio input#page3toggle,
section#portfolio input#ndatoggle
{
    display: none;
    z-index: 2;
}

section#portfolio input#page2toggle
{
    right: calc(-68vh + 25vw);
    top: 12vh;
    rotate: 2.5deg;
    height: 72vh;
    aspect-ratio: 0.6;
}

section#portfolio input#page2toggle:checked
{
    left: calc(-71vh + 25vw);
    rotate: 0deg;
    top: 11vh;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle:checked
{
    left: calc(-71vh + 25vw);
    rotate: 0deg;
    top: 11vh;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .cigarette.two,
section#portfolio input#page3toggle:checked ~ .cigarette.three
{
    visibility: visible;
    transition-property: visibility;
    transition-delay: calc(var(--cigaretteDelay) + var(--pageSwitchDuration));
}

section#portfolio input#page2toggle:checked ~ .cigarette.one
{
    visibility: hidden;
    transition-delay: unset;
}

section#portfolio input#page2toggle:checked ~ input#page3toggle
{    
    display: inline-block;
    right: calc(-67.5vh + 25vw);
    top: 2vh;
    rotate: -8.5deg;
    aspect-ratio: 0.6;
    height: 72vh;
}

section#portfolio input#page3toggle:checked ~ input#ndatoggle
{
    right: calc(-66.5vh + 25vw);
    top: 26vh;
    rotate: 23.5deg;
    aspect-ratio: 0.6;
    height: 72vh;
    display: inline-block;
}

section#portfolio input#ndatoggle:checked ~ div.nda,
section#portfolio input#ndatoggle:checked ~ div.stocker,
section#portfolio input#ndatoggle:checked:hover ~ div.nda .folder.hover
{
    display: block;
}

section#portfolio input#page3toggle:checked ~ input#ndatoggle:checked
{
    top: 0;
    right: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    rotate: 0deg;
}

@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 5 / 4)
{
    section#portfolio.withinViewport
    {
        view-timeline-name: --item;
        view-timeline-axis: block;

        animation-name: item-visibility;
        animation-timeline: --item;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    section#portfolio.withinViewport .case.page1 div.screen.display,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen.display,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen.display
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen1OffsetHighX) * var(--floatAmount)), calc(var(--screen1OffsetHighY) * var(--floatAmount)), calc(
                var(--screen1MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1MinDepthHigh) + (1.0 - var(--t)) * var(--screen1MaxDepthHigh)) * var(--floatAmount)
            ))
            translate(var(--screen1PivotPointX), var(--screen1PivotPointY)) 
            rotate3d(var(--screen1RotationX), var(--screen1RotationY), var(--screen1RotationZ), calc(var(--floatAmount) * var(--screen1RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen1RotationDegLow))) 
            translate(calc(-1 * var(--screen1PivotPointX)), calc(-1 * var(--screen1PivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 div.screen.two.display,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen.two.display,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen.two.display
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                var(--screen2MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen2MinDepthHigh) + (1.0 - var(--t)) * var(--screen2MaxDepthHigh)) * var(--floatAmount)
            ))
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow))) 
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 div.screen.three.display,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen.three.display,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen.three.display
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen3OffsetHighX) * var(--floatAmount)), calc(var(--screen3OffsetHighY) * var(--floatAmount)), calc(
                var(--screen3MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3MinDepthHigh) + (1.0 - var(--t)) * var(--screen3MaxDepthHigh)) * var(--floatAmount)
            ))
            translate(var(--screen3PivotPointX), var(--screen3PivotPointY)) 
            rotate3d(var(--screen3RotationX), var(--screen3RotationY), var(--screen3RotationZ), calc(var(--floatAmount) * var(--screen3RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen3RotationDegLow))) 
            translate(calc(-1 * var(--screen3PivotPointX)), calc(-1 * var(--screen3PivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 div.screen .inverse,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen .inverse,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen .inverse
    {
        transform: 
            translate(var(--screen1PivotPointX), var(--screen1PivotPointY)) 
            rotate3d(var(--screen1RotationX), var(--screen1RotationY), var(--screen1RotationZ), calc(0deg - var(--floatAmount) * var(--screen1RotationDegHigh) - (1 - var(--floatAmount)) * var(--screen1RotationDegLow))) 
            translate(calc(-1 * var(--screen1PivotPointX)), calc(-1 * var(--screen1PivotPointY))) 
            translate3d(calc(0px - var(--screen1OffsetHighX) * var(--floatAmount)), calc(0px - var(--screen1OffsetHighY) * var(--floatAmount)), calc(0px - (
                var(--screen1MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1MinDepthHigh) + (1.0 - var(--t)) * var(--screen1MaxDepthHigh)) * var(--floatAmount)
            )))
            rotate(var(--rotate)) 
            translate(var(--left), var(--top));
    }

    section#portfolio.withinViewport .case.page1 div.screen.two .inverse,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen.two .inverse,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen.two .inverse
    {
        transform: 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY))
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY))
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(0deg - var(--floatAmount) * var(--screen2RotationDegHigh) - (1 - var(--floatAmount)) * var(--screen2RotationDegLow))) 
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY))) 
            translate3d(calc(0px - var(--screen2OffsetHighX) * var(--floatAmount)), calc(0px - var(--screen2OffsetHighY) * var(--floatAmount)), calc(0px - (
                var(--screen2MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen2MinDepthHigh) + (1.0 - var(--t)) * var(--screen2MaxDepthHigh)) * var(--floatAmount)
            )))
            rotate(var(--rotate)) 
            translate(var(--left), var(--top));
    }

    section#portfolio.withinViewport .case.page1 div.screen.three .inverse,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen.three .inverse,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen.three .inverse
    {
        transform: 
            translate(var(--screen3PivotPointX), var(--screen3PivotPointY))
            rotate3d(var(--screen3RotationX), var(--screen3RotationY), var(--screen3RotationZ), calc(0deg - var(--floatAmount) * var(--screen3RotationDegHigh) - (1 - var(--floatAmount)) * var(--screen3RotationDegLow))) 
            translate(calc(-1 * var(--screen3PivotPointX)), calc(-1 * var(--screen3PivotPointY))) 
            translate3d(calc(0px - var(--screen3OffsetHighX) * var(--floatAmount)), calc(0px - var(--screen3OffsetHighY) * var(--floatAmount)), calc(0px - (
                var(--screen3MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3MinDepthHigh) + (1.0 - var(--t)) * var(--screen3MaxDepthHigh)) * var(--floatAmount)
            )))
            rotate(var(--rotate)) 
            translate(var(--left), var(--top));
    }

    section#portfolio.withinViewport .case.page1 div.screen .inverse2,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen .inverse2,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen .inverse2
    {
        transform: 
            translate3d(0, 0, calc(
                (var(--t) * var(--bcardInnerShadowMaxOffsetLow) + (1.0 - var(--t)) * var(--bcardInnerShadowMinOffsetLow)) * (1 - var(--floatAmount)) +
                (var(--t) * var(--bcardInnerShadowMaxOffsetHigh) + (1.0 - var(--t)) * var(--bcardInnerShadowMinOffsetHigh)) * var(--floatAmount)
            ));
        transform-style: preserve-3d;
    }

    section#portfolio.withinViewport .case.page1 div.screen .inverse2.one,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen .inverse2.one,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen .inverse2.one
    {
        transform: 
            translate3d(0, 0, calc(
                (var(--t) * var(--screen1InnerShadowMaxOffsetLow) + (1.0 - var(--t)) * var(--screen1InnerShadowMinOffsetLow)) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1InnerShadowMaxOffsetHigh) + (1.0 - var(--t)) * var(--screen1InnerShadowMinOffsetHigh)) * var(--floatAmount)
            ));
        transform-style: preserve-3d;
    }


    section#portfolio.withinViewport .case.page1 div.screen .inverse2.three,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 div.screen .inverse2.three,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 div.screen .inverse2.three
    {
        transform: 
            translate3d(0, 0, calc(
                (var(--t) * var(--screen3InnerShadowMaxOffsetLow) + (1.0 - var(--t)) * var(--screen3InnerShadowMinOffsetLow)) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3InnerShadowMaxOffsetHigh) + (1.0 - var(--t)) * var(--screen3InnerShadowMinOffsetHigh)) * var(--floatAmount)
            ));
        transform-style: preserve-3d;
    }

    section#portfolio.withinViewport .case.page1 .shadow.inner.bcard,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .shadow.inner.bcard,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .shadow.inner.bcard
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--bCardOffsetHighX) * var(--floatAmount)), calc(var(--bCardOffsetHighY) * var(--floatAmount)), calc(
                    var(--bcardInnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--bcardInnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--bcardInnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--bCardPivotPointX), var(--bCardPivotPointY)) 
            rotate3d(var(--bCardRotationX), var(--bCardRotationY), var(--bCardRotationZ), calc(var(--floatAmount) * var(--bCardRotationDegHigh) + (1 - var(--floatAmount)) * var(--bCardRotationDegLow)))
            translate(calc(-1 * var(--bCardPivotPointX)), calc(-1 * var(--bCardPivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 .screen.one .shadow.inner.screen,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .screen.one .shadow.inner.screen,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .screen.one .shadow.inner.screen
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                    var(--screen1InnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--screen1InnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--screen1InnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow)))
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 .screen.two .shadow.inner.screen,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .screen.two .shadow.inner.screen,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .screen.two .shadow.inner.screen
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                    var(--screen2InnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--screen2InnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--screen2InnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow)))
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 .screen.three .shadow.inner.screen,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .screen.three .shadow.inner.screen,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .screen.three .shadow.inner.screen
    {
        transform:
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                    var(--screen3InnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--screen3InnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--screen3InnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow)))
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 .shadow.outer.bcard,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .shadow.outer.bcard,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .shadow.outer.bcard
    {
        transform: 
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--bCardOffsetHighX) * var(--floatAmount)), calc(var(--bCardOffsetHighY) * var(--floatAmount)), calc(
                var(--bcardMaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--bcardMinDepthHigh) + (1.0 - var(--t)) * var(--bcardMaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--bCardPivotPointX), var(--bCardPivotPointY)) 
            rotate3d(var(--bCardRotationX), var(--bCardRotationY), var(--bCardRotationZ), calc(var(--floatAmount) * var(--bCardRotationDegHigh) + (1 - var(--floatAmount)) * var(--bCardRotationDegLow)))
            translate(calc(-1 * var(--bCardPivotPointX)), calc(-1 * var(--bCardPivotPointY)));
    }

    section#portfolio.withinViewport .case.page1 .shadow.outer.screen,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .shadow.outer.screen,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .shadow.outer.screen
    {
        transform: 
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen1OffsetHighX) * var(--floatAmount)), calc(var(--screen1OffsetHighY) * var(--floatAmount)), calc(
                var(--screen1MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1MinDepthHigh) + (1.0 - var(--t)) * var(--screen1MaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--screen1PivotPointX), var(--screen1PivotPointY)) 
            rotate3d(var(--screen1RotationX), var(--screen1RotationY), var(--screen1RotationZ), calc(var(--floatAmount) * var(--screen1RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen1RotationDegLow))) 
            translate(calc(-1 * var(--screen1PivotPointX)), calc(-1 * var(--screen1PivotPointY)))
    }

    section#portfolio.withinViewport .case.page1 .shadow.outer.screen.two,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .shadow.outer.screen.two,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .shadow.outer.screen.two
    {
        transform: 
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                var(--screen2MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen2MinDepthHigh) + (1.0 - var(--t)) * var(--screen2MaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow))) 
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)))
    }

    section#portfolio.withinViewport .case.page1 .shadow.outer.screen.three,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 .shadow.outer.screen.three,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 .shadow.outer.screen.three
    {
        transform: 
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--screen3OffsetHighX) * var(--floatAmount)), calc(var(--screen3OffsetHighY) * var(--floatAmount)), calc(
                var(--screen3MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3MinDepthHigh) + (1.0 - var(--t)) * var(--screen3MaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--screen3PivotPointX), var(--screen3PivotPointY)) 
            rotate3d(var(--screen3RotationX), var(--screen3RotationY), var(--screen3RotationZ), calc(var(--floatAmount) * var(--screen3RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen3RotationDegLow))) 
            translate(calc(-1 * var(--screen3PivotPointX)), calc(-1 * var(--screen3PivotPointY)))
    }

    section#portfolio.withinViewport .case.page1 img.bcard,
    section#portfolio.withinViewport input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.page2 img.bcard,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page3 img.bcard
    {
        position: absolute;
        transform: 
            translate(var(--left), var(--top))
            rotate(var(--rotate))
            translate3d(calc(var(--bCardOffsetHighX) * var(--floatAmount)), calc(var(--bCardOffsetHighY) * var(--floatAmount)), calc(
                var(--bcardMaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--bcardMinDepthHigh) + (1.0 - var(--t)) * var(--bcardMaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--bCardPivotPointX), var(--bCardPivotPointY)) 
            rotate3d(var(--bCardRotationX), var(--bCardRotationY), var(--bCardRotationZ), calc(var(--floatAmount) * var(--bCardRotationDegHigh) + (1 - var(--floatAmount)) * var(--bCardRotationDegLow)))
            translate(calc(-1 * var(--bCardPivotPointX)), calc(-1 * var(--bCardPivotPointY)));
    }

    section#portfolio.withinViewport input#page2toggle:not(:checked) ~ .case.page2,
    section#portfolio.withinViewport input#page3toggle:not(:checked) ~ .case.page3
    {
        transform: translateX(-50%) rotate(var(--rotate)) translate(calc((1 - var(--visibility)) * 30vw + var(--left)), calc((1 - var(--visibility)) * 50vh + var(--top)));
    }

    section#portfolio.withinViewport input#page2toggle:checked ~ .case.page1,
    section#portfolio.withinViewport input#page3toggle:checked ~ .case.page2
    {
        transform: translateX(-50%) rotate(var(--rotate)) translate(calc((1 - var(--visibility)) * -30vw + var(--left)), calc((1 - var(--visibility)) * 50vh + var(--top)));
    }

    section#portfolio.withinViewport input#page2toggle:not(:checked) ~ .random.two,
    section#portfolio.withinViewport input#page2toggle:not(:checked) ~ .random.four,
    section#portfolio.withinViewport input#page3toggle:not(:checked) ~ .random.three
    {
        transform: translate(calc((1 - var(--visibility)) * 30vw + var(--left)), calc((1 - var(--visibility)) * 50vh + var(--top))) rotate(var(--rotate)) translateX(-50%);
    }

    section#portfolio.withinViewport input#page2toggle:checked ~ .random.one,
    section#portfolio.withinViewport input#page3toggle:checked ~ .random.two,
    section#portfolio.withinViewport input#page3toggle:checked ~ .random.four
    {
        transform: translate(calc((1 - var(--visibility)) * -30vw + var(--left)), calc((1 - var(--visibility)) * 50vh + var(--top))) rotate(var(--rotate)) translateX(-50%);
    }


    section#portfolio .case:hover
    {
        z-index: 2;
        animation: clock 4s linear infinite;
    }

    section#portfolio .case:hover
    {
        --floatAmount : 1;
    }

    section#portfolio .case:hover .note
    {
        opacity: 0;
        pointer-events: none;
    }

    section#portfolio .case:hover .note .shadowfill
    {
        opacity: 0;
    }

    section#portfolio .case:hover .shadowcontainer
    {
        opacity: 0.65;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ div.folder.next,
    section#portfolio input#page3toggle:hover ~ div.folder.next,
    section#portfolio input#ndatoggle:hover ~ div.folder.next
    {
        --floatAmount: 1;
    }

    section#portfolio input#page2toggle:hover:checked ~ div.folder.prev,
    section#portfolio input#page3toggle:hover:checked ~ div.folder.prev
    {
        --floatAmount: 1;
    }

    section#portfolio input#page2toggle:hover ~ div.folder.top.shadow,
    section#portfolio input#page3toggle:hover ~ div.folder.top.shadow
    {
        opacity: 0.5;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.duckmatter .screen.desktop
    {
        --rotate: 97deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.duckmatter div.inverse
    {
        --rotate: -97deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.duckmatter
    {        
        --left: calc(-27vh + 20vw);
        --top: 20vh;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.duckmatter .bcard
    {    
        --rotate: -45deg;
        --left: 37.4vh;
        --top: -6.75vh;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.duckmatter .note
    {
        --left: 33.6vh;
        --top: 7.8vh;
        --rotate: -37deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.emarsys .screen.desktop
    {
        --rotate: -80deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.emarsys div.inverse
    {
        --rotate: 80deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.emarsys
    {    
        --left: calc(-25vh + 20vw);
        --top: 47vh;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.emarsys .bcard
    {    
        --rotate: 204deg;
        --left: 28.5vh;
        --top: 18.4vh;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.emarsys .note
    {
        --left: 26.8vh;
        --top: 30.4vh;
        --rotate: -37deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.lotteries .screen.desktop
    {
        --rotate: 76deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.lotteries div.inverse
    {
        --rotate: -76deg;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.lotteries
    {    
        --left: calc(-32vh + 20vw);
        --top: 25vh;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.lotteries .bcard
    {    
        --rotate: 16deg;
        --left: 15.4vh;
        --top: 16.5vh;
    }

    section#portfolio input#page2toggle:checked:hover ~ .case.lotteries .note
    {
        --left: 17.6vh;
        --top: 36vh;
        --rotate: 81deg;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .screen.mobile.one
    {
        --rotate: -66deg;
        --top: 3vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .one div.inverse
    {
        --rotate: 66deg;
        --top: -3vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .screen.mobile.two
    {
        --rotate: -16deg;
        --left: 4vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .screen.mobile.three
    {    
        --rotate: -120deg;
        --left: 2vh;
        --top: 6vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .three div.inverse
    {
        --rotate: 120deg;
        --left: -2vh;
        --top: -6vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit
    {        
        --left: calc(53vh + 75vw);
        --top: 0vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .bcard
    {    
        --rotate: 105deg;
        --left: 15.95vh;
        --top: -0.4vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.damit .note
    {
        --rotate: -15deg;
        --left: -6.5vh;
        --top: 15.75vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .screen.mobile.one
    {    
        --rotate: -143deg;
        --top: 16vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .one div.inverse
    {
        --rotate: 143deg;
        --top: -16vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .screen.mobile.two
    {
        --rotate: -106deg;
        --left: 1vh;
        --top: 6vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .screen.mobile.three
    {
        --rotate: -36deg;
        --top: 4vh;
        --left: 0vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .three div.inverse
    {
        --rotate: 36deg;
        --top: -4vh;
        --left: 0vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler
    {
        --left: calc(75vw + 51vh);
        --top: 40vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .bcard
    {    
        --rotate: -65deg;
        --left: 11.7vh;
        --top: 0.75vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.cityriddler .note
    {
        --rotate: 97deg;
        --left: 21.1vh;
        --top: 20.6vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.rotable .screen.desktop
    {
        --rotate: -82deg;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.rotable div.inverse
    {
        --rotate: 82deg;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.rotable
    {
        --left: calc(40vh + 75vw);
        --top: 24vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.rotable .bcard
    {    
        --rotate: -93deg;
        --left: 8.1vh;
        --top: 28.5vh;
    }

    section#portfolio input#page2toggle:hover:not(:checked) ~ .case.rotable .note
    {
        --left: 18vh;
        --top: 13.1vh;
        --rotate: 13deg;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .screen.mobile.one
    {
        --rotate: 106deg;
        --top: 9vh;
        --left: -4vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .one div.inverse
    {
        --rotate: -106deg;
        --top: -9vh;
        --left: 4vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .screen.mobile.two
    {
        --rotate: 66deg;
        --left: 0vh;
        --top: -6vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .screen.mobile.three
    {    
        --rotate: 90deg;
        --left: -7vh;
        --top: 1vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .three div.inverse
    {
        --rotate: -90deg;
        --left: 7vh;
        --top: -1vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit
    {        
        --left: calc(-9vh + 20vw);
        --top: 17vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .bcard
    {        
        --rotate: 45deg;
        --left: 0.95vh;
        --top: -6.4vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.damit .note
    {
        --rotate: -15deg;
        --left: -3.75vh;
        --top: 18vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.rotable .screen.desktop
    {
        --rotate: 103deg;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .screen.mobile.one
    {    
        --rotate: 132deg;
        --top: 7vh;
        --left: 2vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .one div.inverse
    {
        --rotate: -132deg;
        --top: -7vh;
        --left: -2vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .screen.mobile.two
    {
        --rotate: 74deg;
        --left: 0vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .screen.mobile.three
    {
        --rotate: 44deg;
        --top: -6vh;
        --left: -4vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .three div.inverse
    {
        --rotate: -44deg;
        --top: 6vh;
        --left: 4vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler
    {
        --left: calc(20vw + -12vh);
        --top: 38vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .bcard
    {    
        --rotate: 110deg;
        --left: 1.9vh;
        --top: 12.75vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.cityriddler .note
    {
        --rotate: 15deg;
        --left: -0.95vh;
        --top: 16.9vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.rotable div.inverse
    {
        --rotate: -103deg;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.rotable
    {
        --left: calc(-35vh + 20vw);
        --top: 12vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.rotable .bcard
    {    
        --rotate: -64deg;
        --left: 30.7vh;
        --top: 29.6vh;
    }

    section#portfolio input#page3toggle:hover:checked ~ .case.rotable .note
    {
        --left: 38.8vh;
        --top: -1.9vh
        --rotate: 43deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.purplelamp .screen.desktop
    {
        --rotate: 74deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.purplelamp div.inverse
    {
        --rotate: -74deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.purplelamp
    {    
        --left: calc(75vw + 36vh);
        --top: 27vh;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.purplelamp .bcard
    {    
        --rotate: 44deg;
        --left: 2.3vh;
        --top: -14.25vh;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.purplelamp .note
    {
        --left: 5.2vh;
        --top: -27.75vh;
        --rotate: -102deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tricentis .screen.desktop
    {
        --rotate: -96deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tricentis div.inverse
    {
        --rotate: 96deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tricentis
    {    
        --left: calc(40vh + 75vw);
        --top: 17vh;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tricentis .bcard
    {    
        --rotate: 98deg;
        --left: 77.3vh;
        --top: 19.1vh;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tricentis .note
    {
        --left: 19vh;
        --top: 38.6vh;
        --rotate: -7deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tubics .screen.desktop
    {
        --rotate: -82deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tubics div.inverse
    {
        --rotate: 82deg;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tubics
    {    
        --left: calc(75vw + 36vh);
        --top: 9vh;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tubics .bcard
    {    
        --rotate: -52deg;
        --left: 13.9vh;
        --top: 46.5vh;
    }

    section#portfolio input#page3toggle:hover:not(:checked) ~ .case.tubics .note
    {
        --left: 24.6vh;
        --top: 36.75vh;
        --rotate: 33deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit
    {
        --top: 0;
        --left: calc(-37vh + 50vw);
        pointer-events: unset;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit div.screen.mobile.one
    {
        --top: 1.5vh;
        --left: unset;
        --rotate: -6deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit .one div.inverse
    {
        --top: -1.5vh;
        --left: 0;
        --rotate: 6deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit div.screen.two.mobile
    {
        --left: 15vh;
        --top: unset;
        --rotate: unset;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit div.screen.three.mobile
    {
        --top: 2vh;
        --left: 30vh;
        --rotate: 4deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit .three div.inverse
    {
        --top: -2vh;
        --left: -30vh;
        --rotate: -4deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.rotable
    {
        --top: 28vh;
        --left: calc(15vh + 60vw);
        pointer-events: unset;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.rotable .screen.desktop
    {
        --left: unset;
        --top: unset;
        --rotate: unset;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.rotable div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: 0deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler
    {
        --top: 44vh;
        --left: calc(35vw - 10vh);
        pointer-events: unset;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler div.screen.mobile.one
    {
        --top: 1.5vh;
        --left: unset;
        --rotate: -6deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler .one div.inverse
    {
        --top: -1.5vh;
        --left: 0;
        --rotate: 6deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler div.screen.two.mobile
    {
        --left: 13.5vh;
        --top: 2vh;
        --rotate: 1deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler .two div.inverse
    {
        --left: -13.5vh;
        --top: -2vh;
        --rotate: -1deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler div.screen.three.mobile
    {
        --top: 2vh;
        --left: 28.25vh;
        --rotate: 4deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler .three div.inverse
    {
        --top: -2vh;
        --left: -28.25vh;
        --rotate: -4deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.purplelamp
    {
        --left: calc(38vw - 14vh);
        --top: 4vh;
        pointer-events: unset;
    }

    section#portfolio input#page3toggle:checked ~ .case.purplelamp .screen.desktop
    {
        --left: unset;
        --top: unset;
        --rotate: 3deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.purplelamp div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: -3deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.tricentis
    {
        --top: 9vh;
        --left: calc(55vw + 25vh);
        pointer-events: unset;
    }

    section#portfolio input#page3toggle:checked ~ .case.tricentis .screen.desktop
    {
        --left: unset;
        --top: unset;
        --rotate: -4deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.tricentis div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: 4deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.tubics
    {
        --top: 46vh;
        --left: calc(50vw - 29vh);
        pointer-events: unset;
    }

    section#portfolio input#page3toggle:checked ~ .case.tubics .screen.desktop
    {
        --left: unset;
        --top: unset;
        --rotate: -2deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.tubics div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: 2deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit .note
    {    
        --left: -3vh;
        --rotate: 3deg;
        --top: 28vh;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler .note
    {
        --left: -2vh;
        --top: 30vh;
        --rotate: -3deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.rotable .note
    {
        --left: 42.3vh;
        --top: 33.75vh;
        --rotate: -6deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.purplelamp .note
    {
        --left: 2.5vh;
        --top: 1vh;
        --rotate: -10deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.tricentis .note
    {
        --left: 44vh;
        --top: 32vh;
        --rotate: -1deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.tubics .note
    {
        --left: 43vh;
        --top: 26vh;
        --rotate: 8deg;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.damit .bcard
    {
        --rotate: 8deg;
        --left: 41vh;
        --top: 12vh;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.cityriddler .bcard
    {
        --rotate: -1deg;
        --left: 43.5vh;
        --top: 9vh;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ .case.rotable .bcard
    {
        --rotate: 6deg;
        --left: 5.2vh;
        --top: 31.8vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.purplelamp .bcard
    {
        --rotate: -3deg;
        --left: 25vh;
        --top: -5vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.tricentis .bcard
    {
        --rotate: -9deg;
        --left: 14vh;
        --top: 34.5vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.tubics .bcard
    {
        --rotate: -6deg;
        --left: 2vh;
        --top: 30vh;
    }

    section#portfolio input#page2toggle:checked ~ div.folder.next img.one
    {
        --left: calc(100vw + 72vh - 100%);
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ div.folder.next img.two
    {
        --left: calc(75vw + 72vh - 100%);
    }

    section#portfolio input#page3toggle:checked ~ div.folder.next img.three
    {    
        --left: calc(75vw + 66.5vh - 100%);
    }

    section#portfolio input#ndatoggle:checked ~ div.folder.next img.three
    {    
        display: none;
    }

    section#portfolio input#page2toggle:checked ~ input#page3toggle:not(:checked) ~ div.folder.prev img.one
    {
        --left: calc(-68vh + 20vw - 100%);
    }

    section#portfolio input#page3toggle:checked ~ div.folder.prev img.two 
    {
        --left: calc(-68vh + 20vw - 100%);
    }

    section#portfolio input#page2toggle:checked ~ .case.duckmatter .screen.desktop
    {
        --rotate: 94deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.duckmatter div.inverse
    {
        --rotate: -94deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.duckmatter
    {    
        --left: calc(-39vh + 20vw);
        --top: 30vh;
        pointer-events: none;
    }

    section#portfolio input#page3toggle:checked ~ .case.duckmatter
    {    
        --left: calc(-39vh);
        --top: 30vh;
        pointer-events: none;
    }

    section#portfolio input#page2toggle:checked ~ .case.duckmatter .bcard
    {    
        --rotate: -65deg;
        --left: 28.5vh;
        --top: -10.5vh
    }

    section#portfolio input#page2toggle:checked ~ .case.duckmatter .note
    {
        --left: 22.2vh;
        --top: 7.8vh;
        --rotate: -46deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.emarsys .screen.desktop
    {
        --rotate: -101deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.emarsys div.inverse
    {
        --rotate: 101deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.emarsys
    {    
        --left: calc(-40vh + 20vw);
        --top: 36vh;
        pointer-events: none;
    }

    section#portfolio input#page3toggle:checked ~ .case.emarsys
    {    
        --left: calc(-40vh);
        --top: 36vh;
        pointer-events: none;
    }

    section#portfolio input#page2toggle:checked ~ .case.emarsys .bcard
    {    
        --rotate: -45deg;
        --left: 14vh;
        --top: 15.75vh;
    }

    section#portfolio input#page2toggle:checked ~ .case.emarsys .note
    {
        --left: 16.75vh;
        --top: 30.4vh;
        --rotate: -37deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.lotteries .screen.desktop
    {
        --rotate: 87deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.lotteries div.inverse
    {
        --rotate: -87deg;
    }

    section#portfolio input#page2toggle:checked ~ .case.lotteries
    {    
        --left: calc(-39vh + 20vw);
        --top: 25vh;
        pointer-events: none;
    }

    section#portfolio input#page3toggle:checked ~ .case.lotteries
    {    
        --left: calc(-39vh);
        --top: 25vh;
        pointer-events: none;
    }

    section#portfolio input#page2toggle:checked ~ .case.lotteries .bcard
    {    
        --rotate: 15deg;
        --left: 13.1vh;
        --top: 19.5vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .screen.mobile.one
    {
        --rotate: 12deg;
        --top: 9vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .one div.inverse
    {
        --rotate: -12deg;
        --top: -9vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .screen.mobile.two
    {    
        --rotate: 13deg;
        --left: 0vh;
        --top: -6vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .screen.mobile.three
    {        
        --rotate: 80deg;
        --left: -7vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .three div.inverse
    {    
        --rotate: -80deg;
        --left: 7vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit
    {    
        --left: calc(-15vh + 20vw);
        --top: 10vh;
        pointer-events: none;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .bcard
    {        
        --rotate: 25deg;
        --left: 0.95vh;
        --top: -6.4vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.damit .note
    {    
        --rotate: -15deg;
        --left: -6.5vh;
        --top: 15.75vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .screen.mobile.one
    {
        --rotate: 150deg;
        --top: 4vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .one div.inverse
    {
        --rotate: -150deg;
        --top: -4vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .screen.mobile.two
    {    
        --rotate: 34deg;
        --left: -4vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .screen.mobile.three
    {
        --rotate: 34deg;
        --top: -6vh;
        --left: -4vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .three div.inverse
    {
        --rotate: -34deg;
        --top: 6vh;
        --left: -4vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler
    {
        --left: calc(20vw + -17vh);
        --top: 35vh;
        pointer-events: none;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .bcard
    {        
        --rotate: 60deg;
        --left: -2.35vh;
        --top: 4.5vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.cityriddler .note
    {    
        --rotate: 15deg;
        --left: -0.95vh;
        --top: 16.9vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.rotable .screen.desktop
    {
        --rotate: 91deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.rotable div.inverse
    {
        --rotate: -91deg;
    }

    section#portfolio input#page3toggle:checked ~ .case.rotable
    {    
        --left: calc(-39vh + 20vw);
        --top: 15vh;
        pointer-events: none;
    }

    section#portfolio input#page3toggle:checked ~ .case.rotable .bcard
    {    
        --rotate: -105deg;
        --left: 25vh;
        --top: 4.5vh;
    }

    section#portfolio input#page3toggle:checked ~ .case.rotable .note
    {
        --left: 27.25vh;
        --top: 1.9vh;
        --rotate: 43deg;
    }

    section#portfolio input#page2toggle:not(:checked) ~ .case.purplelamp
    {    
        --left: calc(100vw + 45vh);
    }

    section#portfolio input#page2toggle:not(:checked) ~ .case.tricentis
    {    
        --left: calc(43vh + 100vw);
    }

    section#portfolio input#page2toggle:not(:checked) ~ .case.tubics
    {    
        --left: calc(100vw + 43vh);
    }

    section#portfolio .case.duckmatter:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(0.925) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.emarsys:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(1.0) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.emarsys:hover img.bCard
    {
        filter: brightness(0.95);
    }

    section#portfolio .case.lotteries:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(0.95) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.lotteries:hover img.bCard
    {
        filter: contrast(0.7) brightness(1.15);
    }

    section#portfolio .case.damit:hover .screen.display.one img.main
    {
        filter: contrast(1.0) brightness(0.9) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.damit:hover .screen.display.two img.main
    {
        filter: contrast(1.0) brightness(1.0) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.damit:hover .screen.display.three img.main
    {
        filter: contrast(1.0) brightness(1.0) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.damit:hover img.bCard
    {
        filter: contrast(0.7) brightness(1.2);
    }

    section#portfolio .case.cityriddler:hover .screen.display.one img.main
    {
        filter: contrast(1.0) brightness(0.925) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.cityriddler:hover .screen.display.two img.main
    {
        filter: contrast(1.0) brightness(1.0) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.cityriddler:hover .screen.display.three img.main
    {
        filter: contrast(1.0) brightness(1.0) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.cityriddler:hover img.bCard
    {
        filter: contrast(0.75) brightness(1.15);
    }

    section#portfolio .case.rotable:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(1) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.rotable:hover img.bCard
    {
        filter: contrast(0.75) brightness(1.15);
    }

    section#portfolio .case.tricentis:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(1) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.tubics:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(1) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.tubics:hover img.bCard
    {
        filter: contrast(1) brightness(0.95);
    }

    section#portfolio .case.purplelamp:hover .screen.display img.main
    {
        filter: contrast(1.0) brightness(0.925) grayscale(0) sepia(0.0);
    }

    section#portfolio .case.duckmatter
    {
        transition-delay: 0s, 0.2s, 0.2s, 0.2s;
    }
    
    section#portfolio.withinViewport .case.duckmatter .screen,
    section#portfolio.withinViewport .case.duckmatter div.inverse
    {
        transition-duration: 1.5s, 1.5s, 1.5s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.duckmatter .note
    {
        transition-duration: 0.98s, 0.98s, 0.98s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.duckmatter .bCard
    {
        transition-duration: 1.3s, 1.3s, 1.3s, 1s, 1s;
    }

    section#portfolio .case.emarsys
    {
        transition-delay: 0s, 0.13s, 0.13s, 0.13s;
    }
    
    section#portfolio.withinViewport .case.emarsys .screen,
    section#portfolio.withinViewport .case.emarsys div.inverse
    {
        transition-duration: 1.32s, 1.32s, 1.32s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.emarsys .note
    {
        transition-duration: 1.9s, 1.9s, 1.9s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.emarsys .bCard
    {
        transition-duration: 1.04s, 1.04s, 1.04s, 1s, 1s;
    }
    
    section#portfolio.withinViewport .case.lotteries .screen,
    section#portfolio.withinViewport .case.lotteries div.inverse
    {
        transition-delay: 0.17s, 0.17s, 0.17s, 0s, 0s;
        transition-duration: 1.21s, 1.21, 1.21s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.lotteries .note
    {
        transition-delay: 0.09s, 0.09s, 0.09s, 0s, 0s;
        transition-duration: 1.14s, 1.14s, 1.14s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.lotteries .bCard
    {
        transition-delay: 0s;
        transition-duration: 1.25s, 1.25s, 1.25s, 1s, 1s;
    }

    section#portfolio .case.damit
    {
        transition-delay: 0s, 0.14s, 0.14s, 0.14s;
    }
    
    section#portfolio.withinViewport .case.damit .screen.one,
    section#portfolio.withinViewport .case.damit .one div.inverse
    {
        transition-duration: 1s, 1s, 1s, 1s, 1s;
    }
    
    section#portfolio.withinViewport .case.damit .screen.two,
    section#portfolio.withinViewport .case.damit .two div.inverse
    {
        transition-duration: 1.39s, 1.39s, 1.39s, 1s, 1s;
    }
    
    section#portfolio.withinViewport .case.damit .screen.three,
    section#portfolio.withinViewport .case.damit .three div.inverse
    {
        transition-duration: 1.12s, 1.12s, 1.12s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.damit .note
    {
        transition-duration: 0.93s, 0.93s, 0.93s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.damit .bCard
    {
        transition-duration: 0.8s, 0.8s, 0.8s, 1s, 1s;
    }

    section#portfolio .case.cityriddler
    {
        transition-delay: 0s;
    }
    
    section#portfolio.withinViewport .case.cityriddler .screen.one,
    section#portfolio.withinViewport .case.cityriddler .one div.inverse
    {
        transition-duration: 0.68s, 0.68s, 0.68s, 1s, 1s;
    }
    
    section#portfolio.withinViewport .case.cityriddler .screen.two,
    section#portfolio.withinViewport .case.cityriddler .two div.inverse
    {
        transition-duration: 1.19s, 1.19s, 1.19s, 1s, 1s;
    }
    
    section#portfolio.withinViewport .case.cityriddler .screen.three,
    section#portfolio.withinViewport .case.cityriddler .three div.inverse
    {
        transition-duration: 0.99s, 0.99s, 0.99s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.cityriddler .note
    {
        transition-duration: 1.7s, 1.7s, 1.7s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.cityriddler .bCard
    {
        transition-duration: 1.04s, 0.04s, 0.04s, 1s, 1s;
    }

    section#portfolio .case.rotable
    {
        transition-delay: 0s, 0.06s, 0.06s, 0.06s;
    }
    
    section#portfolio.withinViewport .case.rotable .screen,
    section#portfolio.withinViewport .case.rotable div.inverse
    {
        transition-duration: 1.21s, 1.21, 1.21s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.rotable .note
    {
        transition-duration: 1.64s, 1.64s, 1.64s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.rotable .bCard
    {
        transition-duration: 1.45s, 1.45s, 1.45s, 1s, 1s;
    }

    section#portfolio .case.purplelamp
    {
        transition-delay: 0s, 0.14s, 0.14s, 0.14s;
    }
    
    section#portfolio.withinViewport .case.purplelamp .screen,
    section#portfolio.withinViewport .case.purplelamp div.inverse
    {
        transition-duration: 1.24s, 1.24s, 1.24s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.purplelamp .note
    {
        transition-duration: 1.65s, 1.65s, 1.65s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.purplelamp .bCard
    {
        transition-duration: 1s, 1s, 1s, 1s, 1s;
    }
    
    section#portfolio.withinViewport .case.tricentis .screen,
    section#portfolio.withinViewport .case.tricentis div.inverse
    {
        transition-duration: 1.16s, 1.16s, 1.16s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.tricentis .note
    {
        transition-duration: 1.31s, 1.31s, 1.31s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.tricentis .bCard
    {
        transition-duration: 0.9s, 0.9s, 0.9s, 1s, 1s;
    }

    section#portfolio .case.tubics
    {
        transition-delay: 0s, 0.06s, 0.06s, 0.06s;
    }
    
    section#portfolio.withinViewport .case.tubics .screen,
    section#portfolio.withinViewport .case.tubics div.inverse
    {
        transition-delay: 0.17s, 0.17s, 0.17s, 0s, 0s;
        transition-duration: 1.61s, 1.61, 1.61s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.tubics .note
    {
        transition-delay: 0.09s, 0.09s, 0.09s, 0s, 0s;
        transition-duration: 1.14s, 1.14s, 1.14s, 1s, 1s;
    }

    section#portfolio.withinViewport .case.tubics .bCard
    {
        transition-delay: 0s;
        transition-duration: 1.48s, 1.48s, 1.48s, 1s, 1s;
    }

    section#portfolio img.random.one
    {
        transition-delay: 0.2s;
        transition-duration: 1.2s;
    }

    section#portfolio img.random.two
    {
        transition-delay: 0.12s;
        transition-duration: 1.14s;
    }

    section#portfolio img.random.three
    {
        transition-delay: 0.14s;
        transition-duration: 0.94s;
    }

    section#portfolio img.random.four
    {
        transition-delay: 0.05s;
        transition-duration: 1.03s;
    }

    div.stocker a.link:hover
    {
        transform: scale(1.075);
        animation-name: ItemFloatHover;
        animation-duration: 1.5s;
    }

    div.stocker a.link:hover img.background
    {
        transform: translate(5%, 5%) scale(1.035);
        animation-name: ShadowFloatHover;
        animation-duration: 1.5s;
    }

    section#portfolio input#ndatoggle:checked:hover ~ div.nda
    {
        background-color: #67676799;
    }

    section#portfolio input#ndatoggle:checked:hover ~ div.nda .folder.idle
    {
        display: none;
    }
}

@media (hover: none), not (pointer: fine), (max-aspect-ratio: 5 / 4)
{
    section#portfolio h2.section
    {
        padding: 0.5rem 3.5rem 1.25rem 2.35rem;
        margin-left: 0;
        margin-bottom: -10vw;
        margin-left: 5%;
    }

    section#portfolio div.pagination
    {
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-timeline: --xScroll x;
        white-space: nowrap;
        height: 170vw;
    }

    section#portfolio.withinViewport .case div.screen.display
    {
        transform:
            translate3d(calc(var(--screen1OffsetHighX) * var(--floatAmount)), calc(var(--screen1OffsetHighY) * var(--floatAmount)), calc(
                var(--screen1MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1MinDepthHigh) + (1.0 - var(--t)) * var(--screen1MaxDepthHigh)) * var(--floatAmount)
            ))
            translate(var(--screen1PivotPointX), var(--screen1PivotPointY)) 
            rotate3d(var(--screen1RotationX), var(--screen1RotationY), var(--screen1RotationZ), calc(var(--floatAmount) * var(--screen1RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen1RotationDegLow))) 
            translate(calc(-1 * var(--screen1PivotPointX)), calc(-1 * var(--screen1PivotPointY)));
    }

    section#portfolio.withinViewport .case div.screen.two.display
    {
        transform:
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                var(--screen2MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen2MinDepthHigh) + (1.0 - var(--t)) * var(--screen2MaxDepthHigh)) * var(--floatAmount)
            ))
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow))) 
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case div.screen.three.display
    {
        transform:
            translate3d(calc(var(--screen3OffsetHighX) * var(--floatAmount)), calc(var(--screen3OffsetHighY) * var(--floatAmount)), calc(
                var(--screen3MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3MinDepthHigh) + (1.0 - var(--t)) * var(--screen3MaxDepthHigh)) * var(--floatAmount)
            ))
            translate(var(--screen3PivotPointX), var(--screen3PivotPointY)) 
            rotate3d(var(--screen3RotationX), var(--screen3RotationY), var(--screen3RotationZ), calc(var(--floatAmount) * var(--screen3RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen3RotationDegLow))) 
            translate(calc(-1 * var(--screen3PivotPointX)), calc(-1 * var(--screen3PivotPointY)));
    }

    section#portfolio.withinViewport .case div.screen .inverse
    {
        transform: 
            translate(var(--screen1PivotPointX), var(--screen1PivotPointY)) 
            rotate3d(var(--screen1RotationX), var(--screen1RotationY), var(--screen1RotationZ), calc(0deg - var(--floatAmount) * var(--screen1RotationDegHigh) - (1 - var(--floatAmount)) * var(--screen1RotationDegLow))) 
            translate(calc(-1 * var(--screen1PivotPointX)), calc(-1 * var(--screen1PivotPointY))) 
            translate3d(calc(0px - var(--screen1OffsetHighX) * var(--floatAmount)), calc(0px - var(--screen1OffsetHighY) * var(--floatAmount)), calc(0px - (
                var(--screen1MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1MinDepthHigh) + (1.0 - var(--t)) * var(--screen1MaxDepthHigh)) * var(--floatAmount)
            )))
            rotate(var(--rotate)) 
            translate(var(--left), var(--top));
    }

    section#portfolio.withinViewport .case div.screen.two .inverse
    {
        transform: 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY))
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY))
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(0deg - var(--floatAmount) * var(--screen2RotationDegHigh) - (1 - var(--floatAmount)) * var(--screen2RotationDegLow))) 
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY))) 
            translate3d(calc(0px - var(--screen2OffsetHighX) * var(--floatAmount)), calc(0px - var(--screen2OffsetHighY) * var(--floatAmount)), calc(0px - (
                var(--screen2MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen2MinDepthHigh) + (1.0 - var(--t)) * var(--screen2MaxDepthHigh)) * var(--floatAmount)
            )))
            rotate(var(--rotate)) 
            translate(var(--left), var(--top));
    }

    section#portfolio.withinViewport .case div.screen.three .inverse
    {
        transform: 
            translate(var(--screen3PivotPointX), var(--screen3PivotPointY))
            rotate3d(var(--screen3RotationX), var(--screen3RotationY), var(--screen3RotationZ), calc(0deg - var(--floatAmount) * var(--screen3RotationDegHigh) - (1 - var(--floatAmount)) * var(--screen3RotationDegLow))) 
            translate(calc(-1 * var(--screen3PivotPointX)), calc(-1 * var(--screen3PivotPointY))) 
            translate3d(calc(0px - var(--screen3OffsetHighX) * var(--floatAmount)), calc(0px - var(--screen3OffsetHighY) * var(--floatAmount)), calc(0px - (
                var(--screen3MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3MinDepthHigh) + (1.0 - var(--t)) * var(--screen3MaxDepthHigh)) * var(--floatAmount)
            )))
            rotate(var(--rotate)) 
            translate(var(--left), var(--top));
    }

    section#portfolio.withinViewport .case .shadow.inner.bcard
    {
        transform:
            translate3d(calc(var(--bCardOffsetHighX) * var(--floatAmount)), calc(var(--bCardOffsetHighY) * var(--floatAmount)), calc(
                    var(--bcardInnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--bcardInnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--bcardInnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--bCardPivotPointX), var(--bCardPivotPointY)) 
            rotate3d(var(--bCardRotationX), var(--bCardRotationY), var(--bCardRotationZ), calc(var(--floatAmount) * var(--bCardRotationDegHigh) + (1 - var(--floatAmount)) * var(--bCardRotationDegLow)))
            translate(calc(-1 * var(--bCardPivotPointX)), calc(-1 * var(--bCardPivotPointY)));
    }

    section#portfolio.withinViewport .case .screen.one .shadow.inner.screen
    {
        transform:
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                    var(--screen1InnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--screen1InnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--screen1InnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow)))
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case .screen.two .shadow.inner.screen
    {
        transform:
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                    var(--screen2InnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--screen2InnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--screen2InnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow)))
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case .screen.three .shadow.inner.screen
    {
        transform:
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                    var(--screen3InnerShadowMaxDepthLow) * (1 - var(--floatAmount)) +
                    (var(--t) * var(--screen3InnerShadowMinDepthHigh) + (1.0 - var(--t)) * var(--screen3InnerShadowMaxDepthHigh)) * var(--floatAmount)
                )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow)))
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)));
    }

    section#portfolio.withinViewport .case .shadow.outer.bcard
    {
        transform: 
            translate3d(calc(var(--bCardOffsetHighX) * var(--floatAmount)), calc(var(--bCardOffsetHighY) * var(--floatAmount)), calc(
                var(--bcardMaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--bcardMinDepthHigh) + (1.0 - var(--t)) * var(--bcardMaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--bCardPivotPointX), var(--bCardPivotPointY)) 
            rotate3d(var(--bCardRotationX), var(--bCardRotationY), var(--bCardRotationZ), calc(var(--floatAmount) * var(--bCardRotationDegHigh) + (1 - var(--floatAmount)) * var(--bCardRotationDegLow)))
            translate(calc(-1 * var(--bCardPivotPointX)), calc(-1 * var(--bCardPivotPointY)));
    }

    section#portfolio.withinViewport .case .shadow.outer.screen
    {
        transform: 
            translate3d(calc(var(--screen1OffsetHighX) * var(--floatAmount)), calc(var(--screen1OffsetHighY) * var(--floatAmount)), calc(
                var(--screen1MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1MinDepthHigh) + (1.0 - var(--t)) * var(--screen1MaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--screen1PivotPointX), var(--screen1PivotPointY)) 
            rotate3d(var(--screen1RotationX), var(--screen1RotationY), var(--screen1RotationZ), calc(var(--floatAmount) * var(--screen1RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen1RotationDegLow))) 
            translate(calc(-1 * var(--screen1PivotPointX)), calc(-1 * var(--screen1PivotPointY)))
    }

    section#portfolio.withinViewport .case .shadow.outer.screen.two
    {
        transform: 
            translate3d(calc(var(--screen2OffsetHighX) * var(--floatAmount)), calc(var(--screen2OffsetHighY) * var(--floatAmount)), calc(
                var(--screen2MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen2MinDepthHigh) + (1.0 - var(--t)) * var(--screen2MaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--screen2PivotPointX), var(--screen2PivotPointY)) 
            rotate3d(var(--screen2RotationX), var(--screen2RotationY), var(--screen2RotationZ), calc(var(--floatAmount) * var(--screen2RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen2RotationDegLow))) 
            translate(calc(-1 * var(--screen2PivotPointX)), calc(-1 * var(--screen2PivotPointY)))
    }

    section#portfolio.withinViewport .case .shadow.outer.screen.three
    {
        transform: 
            translate3d(calc(var(--screen3OffsetHighX) * var(--floatAmount)), calc(var(--screen3OffsetHighY) * var(--floatAmount)), calc(
                var(--screen3MaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3MinDepthHigh) + (1.0 - var(--t)) * var(--screen3MaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--screen3PivotPointX), var(--screen3PivotPointY)) 
            rotate3d(var(--screen3RotationX), var(--screen3RotationY), var(--screen3RotationZ), calc(var(--floatAmount) * var(--screen3RotationDegHigh) + (1 - var(--floatAmount)) * var(--screen3RotationDegLow))) 
            translate(calc(-1 * var(--screen3PivotPointX)), calc(-1 * var(--screen3PivotPointY)))
    }

    section#portfolio.withinViewport .case div.screen .inverse2
    {
        transform: 
            translate3d(0, 0, calc(
                (var(--t) * var(--bcardInnerShadowMaxOffsetLow) + (1.0 - var(--t)) * var(--bcardInnerShadowMinOffsetLow)) * (1 - var(--floatAmount)) +
                (var(--t) * var(--bcardInnerShadowMaxOffsetHigh) + (1.0 - var(--t)) * var(--bcardInnerShadowMinOffsetHigh)) * var(--floatAmount)
            ));
        transform-style: preserve-3d;
    }

    section#portfolio.withinViewport .case div.screen .inverse2.one
    {
        transform: 
            translate3d(0, 0, calc(
                (var(--t) * var(--screen1InnerShadowMaxOffsetLow) + (1.0 - var(--t)) * var(--screen1InnerShadowMinOffsetLow)) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen1InnerShadowMaxOffsetHigh) + (1.0 - var(--t)) * var(--screen1InnerShadowMinOffsetHigh)) * var(--floatAmount)
            ));
        transform-style: preserve-3d;
    }

    section#portfolio.withinViewport .case div.screen .inverse2.three
    {
        transform: 
            translate3d(0, 0, calc(
                (var(--t) * var(--screen3InnerShadowMaxOffsetLow) + (1.0 - var(--t)) * var(--screen3InnerShadowMinOffsetLow)) * (1 - var(--floatAmount)) +
                (var(--t) * var(--screen3InnerShadowMaxOffsetHigh) + (1.0 - var(--t)) * var(--screen3InnerShadowMinOffsetHigh)) * var(--floatAmount)
            ));
        transform-style: preserve-3d;
    }

    section#portfolio.withinViewport .case img.bcard
    {
        position: absolute;
        transform: 
            translate3d(calc(var(--bCardOffsetHighX) * var(--floatAmount)), calc(var(--bCardOffsetHighY) * var(--floatAmount)), calc(
                var(--bcardMaxDepthLow) * (1 - var(--floatAmount)) +
                (var(--t) * var(--bcardMinDepthHigh) + (1.0 - var(--t)) * var(--bcardMaxDepthHigh)) * var(--floatAmount)
            )) 
            translate(var(--bCardPivotPointX), var(--bCardPivotPointY)) 
            rotate3d(var(--bCardRotationX), var(--bCardRotationY), var(--bCardRotationZ), calc(var(--floatAmount) * var(--bCardRotationDegHigh) + (1 - var(--floatAmount)) * var(--bCardRotationDegLow)))
            translate(calc(-1 * var(--bCardPivotPointX)), calc(-1 * var(--bCardPivotPointY)));
    }

    section#portfolio div.pagination::-webkit-scrollbar:horizontal 
    {
        display: none;
    }

    section#portfolio div.pagination .case
    {
        position: relative;
        display: inline-block;
        transition-property: none;
        transform: unset;
        left: unset;
        view-timeline-name: --reveal;
        view-timeline-axis: inline;
        animation-name: VisibilityProgress, clock;
        animation-timeline: --reveal, auto;
        animation-range: entry 0% exit 100%, normal;
        animation-fill-mode: both, none;
        animation-timing-function: linear, linear;
        animation-iteration-count: 1, infinite;
        animation-duration: 1s, 4s;
        animation-play-state: paused;
    }

    section#portfolio.withinViewport div.pagination .case.withinViewport
    {
        animation-play-state: running;
    }

    section#portfolio div.shadowcontainer
    {
        transition-property: none;
        opacity: calc(1 - (0.4 - var(--t) * 0.1) * var(--floatAmount));
    }

    section#portfolio img.random,
    section#portfolio .cigarette,
    section#portfolio div.folder,
    section#portfolio .case .note,
    section#portfolio .case .screen.display img.overlay,
    section#portfolio input.picker
    {
        display: none !important;
        pointer-events: none;
    }

    section#portfolio .case .screen, 
    section#portfolio .case .bCard, 
    section#portfolio .case .note,
    section#portfolio .case div.inverse
    {
        transition-property: none !important;
    }

    section#portfolio .case .bcard.vertical
    {
        width: 17.65vw;
    }

    section#portfolio .case .bcard
    {
        height: 17.65vw;
    }
    
    section#portfolio .case.duckmatter
    {
        height: 51vw; /* 37.5 */
        top: 6vw;
        margin-left: 5vw;
    }
    
    section#portfolio .case.duckmatter .bcard
    {
        left: 76.7vw;
        top: 11.2vw;
        rotate: -5deg;
    }

    section#portfolio .case.duckmatter .screen.display img.main
    {
        transition-property: none;
        filter: brightness(calc(1 - var(--floatAmount) * 0.075)) grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.2 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.emarsys 
    {
        height: 57vw;
        top: 70vw;
        margin-left: -15vw;
    }

    section#portfolio .case.emarsys .bcard
    {
        left: 47.5vw;
        top: -15.6vw;
        height: 19.75vw;
        rotate: 8deg;
    }

    section#portfolio .case.emarsys .screen.display img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.1 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.lotteries
    {        
        height: 52vw;
        top: -7vw;
        margin-left: -15vw;
    }

    section#portfolio .case.lotteries .bcard
    {
        rotate: 6deg;
        left: 30.5vw;
        top: 45.3vw;
    }

    section#portfolio .case.lotteries .screen.display img.main
    {
        transition-property: none;
        filter: brightness(calc(1 - var(--floatAmount) * 0.05)) grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.125 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.cityriddler
    {
        margin-left: -15vw;
        top: 74vw;
        height: 62vw;
        pointer-events: all;
    }
        
    section#portfolio .case.cityriddler .screen.display.one img.main
    {
        transition-property: none;
        filter: brightness(calc(1 - var(--floatAmount) * 0.075)) grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.1 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.cityriddler .screen.display.two img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.1 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.cityriddler .screen.display.three img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.1 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.rotable
    {
        margin-left: -5vw;
        top: 0vw;
        height: 60vw;
        pointer-events: all;
    }

    section#portfolio .case.rotable .screen.display img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.075 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.damit
    {        
        height: 62vw;
        margin-left: -20vw;
        top: 70vw;
        pointer-events: all;
    }
        
    section#portfolio .case.damit .screen.display.one img.main
    {
        transition-property: none;
        filter: brightness(calc(1 - var(--floatAmount) * 0.1)) grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.125 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.damit .screen.display.two img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.125 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.damit .screen.display.three img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.125 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.purplelamp
    {
        height: 62vw;
        top: 11vw;
        margin-left: -5vw;
        pointer-events: all;
    }

    section#portfolio .case.purplelamp .screen.display img.main
    {
        transition-property: none;
        filter: contrast(calc(0.65 + var(--floatAmount) * 0.35)) brightness(calc(1.25 - var(--floatAmount) * 0.325)) grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.175 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.tubics
    {
        height: 56vw;
        top: 70vw;
        margin-left: -25vw;
        pointer-events: all;
    }

    section#portfolio .case.tubics .screen.display img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.1 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.tricentis
    {
        height: 54vw;
        top: 4vw;
        margin-left: -20vw;
        margin-right: 10vw;
        pointer-events: all;
    }

    section#portfolio .case.tricentis .screen.display img.main
    {
        transition-property: none;
        filter: grayscale(calc(0.925 * (1.0 - var(--floatAmount)))) sepia(calc(0.125 * (1.0 - var(--floatAmount))));
    }

    section#portfolio .case.damit div.screen.mobile.one
    {
        top: 2.5vw;
        left: unset;
        rotate: -6deg;
    }

    section#portfolio .case.damit .one div.inverse
    {
        --top: -2.5vw;
        --left: 0;
        --rotate: 6deg;
    }

    section#portfolio .case.damit div.screen.two.mobile
    {
        left: 25vw;
        top: unset;
        rotate: unset;
    }

    section#portfolio .case.damit .two div.inverse
    {
        --left: -25vw;
        --top: unset;
        --rotate: unset;
    }

    section#portfolio .case.damit div.screen.three.mobile
    {
        top: 3.3vw;
        left: 50vw;
        rotate: 4deg;
    }

    section#portfolio .case.damit .three div.inverse
    {
        --top: -3.3vw;
        --left: -50vw;
        --rotate: -4deg;
    }

    section#portfolio .case.rotable .screen.desktop
    {
        left: unset;
        top: unset;
        rotate: unset;
    }

    section#portfolio .case.rotable div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: 0deg;
    }

    section#portfolio .case.cityriddler div.screen.mobile.one
    {
        top: 2.5vw;
        left: unset;
        rotate: -6deg;
    }

    section#portfolio .case.cityriddler .one div.inverse
    {
        --top: -2.5vw;
        --left: 0;
        --rotate: 6deg;
    }

    section#portfolio .case.cityriddler div.screen.two.mobile
    {
        left: 22.35vw;
        top: 3.3vw;
        rotate: 1deg;
    }

    section#portfolio .case.cityriddler .two div.inverse
    {
        --left: -22.35vw;
        --top: -3.3vw;
        --rotate: -1deg;
    }

    section#portfolio .case.cityriddler div.screen.three.mobile
    {
        top: 3.3vw;
        left: 46.5vw;
        rotate: 4deg;
    }

    section#portfolio .case.cityriddler .three div.inverse
    {
        --top: -3.3vw;
        --left: -46.5vw;
        --rotate: -4deg;
    }

    section#portfolio .case.purplelamp .screen.desktop
    {
        left: unset;
        top: unset;
        rotate: 3deg;
    }

    section#portfolio .case.purplelamp div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: -3deg;
    }

    section#portfolio .case.tricentis .screen.desktop
    {
        left: unset;
        top: unset;
        rotate: -4deg;
    }

    section#portfolio .case.tricentis div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: 4deg;
    }

    section#portfolio .case.tubics .screen.desktop
    {
        left: unset;
        top: unset;
        rotate: -2deg;
    }

    section#portfolio .case.tubics div.inverse
    {
        --left: 0;
        --top: 0;
        --rotate: 2deg;
    }

    section#portfolio .case.damit .bcard
    {
        rotate: 8deg;
        left: 67.8vw;
        top: 20vw;
        width: 21.5vw;
    }

    section#portfolio .case.cityriddler .bcard
    {
        rotate: -1deg;
        left: 72vw;
        top: 15vw;
        width: 21.5vw;
    }

    section#portfolio .case.rotable .bcard
    {
        rotate: 6deg;
        left: 8.4vw;
        top: 51.4vw;
        height: 21vw;
    }

    section#portfolio .case.purplelamp .bcard
    {
        rotate: -3deg;
        left: 41.5vw;
        top: -8.25vw;
        height: 21.5vw;
    }

    section#portfolio .case.tricentis .bcard
    {
        rotate: -9deg;
        left: 20vw;
        top: 50vw;
        height: 18.75vw;
    }

    section#portfolio .case.tubics .bcard
    {
        rotate: -6deg;
        left: 3vw;
        top: 45vw;
        height: 19.4vw;
    }
}

@media (hover: hover) and (pointer: fine) and (max-aspect-ratio: 5 / 4)
{
    section#portfolio div.pagination
    {
        scrollbar-width: unset;
        -ms-overflow-style: unset;
    }
}


@media (hover: none) and (min-width: 640px), not (pointer: fine) and (min-width: 640px), (max-aspect-ratio: 5 / 4) and (min-width: 640px)
{
    section#portfolio h2.section
    {
        margin-bottom: -6vh;
    }

    section#portfolio div.pagination
    {
        height: 102vh;
    }

    section#portfolio .case .bcard.vertical
    {
        width: 10.68vh;
    }

    section#portfolio .case .bcard
    {
        height: 10.68vh;
    }
    
    section#portfolio .case.duckmatter
    {
        height: 30.6vh;
        top: 3.6vh;
        margin-left: calc(50% - 25.6vh);
    }

    section#portfolio .case.duckmatter .bcard
    {
        left: 46.41vh;
        top: 6.77vh;
    }

    section#portfolio .case.emarsys 
    {
        height: 34.2vh;
        top: 42vh;
        margin-left: -9vh;
    }

    section#portfolio .case.emarsys .bcard
    {
        height: 12.42vh;
        left: 29.9vh;
        top: -10vh;
    }

    section#portfolio .case.lotteries
    {        
        height: 31.2vh;
        top: -4.2vh;
        margin-left: -9vh;
    }

    section#portfolio .case.lotteries .bcard
    {        
        left: 18.5vh;
        top: 27.4vh;
    }

    section#portfolio .case.cityriddler
    {
        margin-left: -9vh;
        top: 44.4vh;
        height: 37.2vh;
    }

    section#portfolio .case.rotable
    {
        margin-left: -3vh;
        top: 0vh;
        height: 36vh;
    }

    section#portfolio .case.damit
    {        
        height: 37.2vh;
        margin-left: -12vh;
        top: 42vh;
    }

    section#portfolio .case.purplelamp
    {
        height: 37.2vh;
        top: 6.6vh;
        margin-left: -3vh;
    }

    section#portfolio .case.tubics
    {
        height: 33.6vh;
        top: 42vh;
        margin-left: -15vh;
    }

    section#portfolio .case.tricentis
    {
        height: 32.4vh;
        top: 2.4vh;
        margin-left: -12vh;
        margin-right: 25%;
    }

    section#portfolio .case.damit div.screen.mobile.one
    {
        top: 1.5vh;
    }

    section#portfolio .case.damit .one div.inverse
    {
        --top: -1.5vh;
    }

    section#portfolio .case.damit div.screen.two.mobile
    {
        left: 15vh;
    }

    section#portfolio .case.damit .two div.inverse
    {
        --left: -15vh;
    }

    section#portfolio .case.damit div.screen.three.mobile
    {
        top: 1.98vh;
        left: 30vh;
    }

    section#portfolio .case.damit .three div.inverse
    {
        --top: -1.98vh;
        --left: -30vh;
    }

    section#portfolio .case.cityriddler div.screen.mobile.one
    {
        top: 1.5vh;
    }

    section#portfolio .case.cityriddler .one div.inverse
    {
        --top: -1.5vh;
    }

    section#portfolio .case.cityriddler div.screen.two.mobile
    {
        left: 13.38vh;
        top: 1.98vh;
    }

    section#portfolio .case.cityriddler .two div.inverse
    {
        --left: -13.38vh;
        --top: -1.98vh;
    }

    section#portfolio .case.cityriddler div.screen.three.mobile
    {
        top: 1.98vh;
        left: 27.9vh;
    }

    section#portfolio .case.cityriddler .three div.inverse
    {
        --top: -1.98vh;
        --left: -27.9vh;
    }

    section#portfolio .case.damit .bcard
    {
        left: 40.8vh;
        top: 12vh;
        width: 12.9vh;
    }

    section#portfolio .case.cityriddler .bcard
    {
        left: 43.2vh;
        top: 9vh;
        width: 12.9vh;
    }

    section#portfolio .case.rotable .bcard
    {        
        height: 12.6vh;
        left: 5vh;
        top: 30.9vh;
    }

    section#portfolio .case.purplelamp .bcard
    {
        left: 24.9vh;
        top: -4.95vh;
        height: 12.9vh;
    }

    section#portfolio .case.tricentis .bcard
    {
        left: 12vh;
        top: 30vh;
        height: 11.1vh;
    }

    section#portfolio .case.tubics .bcard
    {
        left: 1.8vh;
        top: 27vh;
        height: 11.64vh;
    }
}

@media (max-height: 1080px) and (min-width: 640px), (max-width: 1600px) and (min-width: 640px)
{
    section#portfolio h2.section
    {
        padding: 0.5rem 4.25rem 0.75rem 1.5rem;
    }
}

@media (max-aspect-ratio: 2 / 3)
{
    section#portfolio .cigarette
    {
        display: none;
    }

    section#portfolio .page img.random
    {
        display: none;
    }

    div.nda img.folder
    {
        height: auto;
        width: 178vw;
        right: 2vw;
        top: auto;
        max-height: 96vh;
        bottom: 2vw;
        object-fit: contain;
        object-position: 100% 100%;
    }

    div.nda div.stocker
    {
        right: -0.85%;
        bottom: 14vw;
        top: unset;
        height: 111vw;
    }

    div.nda div.stocker a.link
    {
        left: 27%;
    }

    div.stocker a.link img.foreground 
    {
        width: 57vw;
    }
    
    div.stocker h3.title 
    {
        font-size: 3.5vw;
    }

    div.stocker p.desc 
    {
        letter-spacing: 0.1vw;
        font-size: 2.1vw;
    }
}