@media (min-width: 1000px) {
    [data-pc-join=null] { display: none }
    .scroller figure::before { display: none }
    ol { display: none }
    :is(nav) #nav + label menu, nav menu > li {
        display: flex;
        align-items: center;
        gap: 32px;
    }
    nav ul, nav menu > li a {
        gap: 32px;
        padding: 0;
        margin: 0;
        font-size: 16px;
        margin-right: 16px;
        color: var(--color--black);
    }
    nav ul a { max-width: 24px }
    nav svg * { fill: var(--color--black) }

    /* #hero, #about { width: 50vw } */
    #about {
        background-position: left bottom;
        justify-content: center;
        flex-direction: column;
    }
    #about a.button:nth-child(2) { display: none }
    #about a.button {
        z-index: 11;
        right: calc(22.5vw - 140px);
        position: absolute;
        bottom: 10vh;
    }
    #about p {
        width: 45vw;
        align-self: flex-end;
        margin-right: 2.5vw;
        text-align: justify;
        position: relative;
    }
    #contact img {
        right: 0;
        position: absolute;
        width: 98vh;
        object-fit: cover;
        height: 100vh;
        z-index: -1;
    }
    section {
        padding: 0;
    }
    section#contact {
        padding-right: 98vh;
        justify-content: center;
    }
    article:has(.scroller) {
        height: 100vh;
    }
    /* article:has(.scroller), blockquote, figure { max-width: 700px } */
    /* .scroller figure::before { left: 0; width: 100%; } */
    .scroller :is(figure,blockquote) {
        transition: 1s all;
        backface-visibility: hidden;
    }
    .scroller figure {
        padding: 40vh 0;
        position: fixed;
        left: 0;
    }
    article .scroller:has(figure) {
        height: 100vh;
        width: 100vw;
        margin: 0;
    }
    q {
        display: flex;
        width: 100%;
        color: var(--color--black);
        font-family: 'Open Sans Condensed';
        font-size: 25px;
        font-style: normal;
        font-weight: 300;
        line-height: 30px;
        padding: 0 50vw 0 10vw;
    }
    q cite {
        font-weight: 700;
        min-width: 150px;
    }
    input[type=range] {
        display: flex;
        width: 146px;
        position: fixed;
        bottom: 10vh;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        z-index: 5;
        background-image: url('data:image/svg+xml,<svg width="146" height="16" viewBox="0 0 146 16" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="8" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="40.5" /><path fill="%23D8FB50" d="M73 16 A 8 8 0 0 1 73 0 L 73 16 Z" /><path fill="%23D8FB50" d="M73 16 A 8 8 0 0 0 73 0 L 73 16 Z" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="105.5" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="138" /></svg>');
    }
    input[type=range][data-even=false] {
        background-image: url('data:image/svg+xml,<svg width="146" height="16" viewBox="0 0 146 16" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="8" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="40.5" /><path fill="%23D8FB50" d="M73 16 A 8 8 0 0 1 73 0 L 73 16 Z" /><path fill="white" d="M73 16 A 8 8 0 0 0 73 0 L 73 16 Z" /><ellipse fill="white" cy="8" rx="8" ry="8" cx="105.5" /><ellipse fill="white" cy="8" rx="8" ry="8" cx="138" /></svg>');
    }
    input[type=range][data-even=true] {
        background-image: url('data:image/svg+xml,<svg width="146" height="16" viewBox="0 0 146 16" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse fill="white" cy="8" rx="8" ry="8" cx="8" /><ellipse fill="white" cy="8" rx="8" ry="8" cx="40.5" /><path fill="white" d="M73 16 A 8 8 0 0 1 73 0 L 73 16 Z" /><path fill="%23D8FB50" d="M73 16 A 8 8 0 0 0 73 0 L 73 16 Z" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="105.5" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="138" /></svg>');
    }
    .scroller [data-hide=true] { transform: rotateY(180deg) }
    #portfolio::before {
        display: none; /* display: flex; */
        content: "";
        background-color: var(--color--main);
        width: 50vw;
        height: 100vh;
        position: absolute;
        right: 0;
    }
    .scroller img {
        max-width: 40vw;
        position: absolute;
        right: 10vw;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    figure h3 {
        position: absolute;
        top: 23vh;
        background-color: var(--color--white);
        padding: 0 10px 2px;
        z-index: 1;
    }
    figure h3::before {
        display: flex;
        content: "";
        background-color: var(--color--main);
        width: 50%;
        height: 100%;
        position: absolute;
        z-index: -1;
    }
    figure:nth-child(2n) h3::before { left: 0 }
    figure:nth-child(2n+1) h3::before { right: 0 }

    figure a.button {
        position: absolute;
        bottom: 20vh;
    }

    #about h2 { display: none }
    #about hgroup h2 { display: block }
    #about::after {
        display: flex;
        content: "";
        position: absolute;
        background-image: url(https://dev.sztuckiszewcow.com/wp-content/uploads/2023/12/piotr_sztucki.webp);
        width: 100vw;
        height: 100vh;
        background-size: 74vh;
        background-repeat: no-repeat;
        background-position: left bottom;
        bottom: 0;
    }

    nav menu > li.current {
        position: absolute;
        left: 50%;
        top: 42px;
        transform: translateX(-50%);
        padding: 6px 12px;
    }
    nav menu > li.current a {
        font-size: 24px;
        margin-right: 0;
    }
    /* nav>a::before { display: none } */
    /* nav>a::after {
        display: flex;
        content: "|";
        position: absolute;
        right: -12px;
        top: -2px;
        font-weight: 300;
    } */
    :is(#about) hgroup {
        position: absolute;
        top: 50vh;
        left: 0;
        transform: translateY(-50%);
        text-align: right;
        mix-blend-mode: normal;
        padding-left: 60vh;
    }
    :is(#about) h3 { font-size: 16px }
    #reviews {
        background-image: url("https://dev.sztuckiszewcow.com/wp-content/uploads/2023/12/reviews.png") !important;
        background-size: contain;
        background-position: -270px bottom;
        background-color: #FBF9F1;
    }
    blockquote {
        width: 40vw;
        padding: 50px 40px 30px;
        position: absolute;
        right: 0;
    }

    :is(#reviews, #portfolio, #contact) h2 { display: none }
    #reviews [type=range] {
        width: 81px;
        left: calc(60vw - 40px);
        bottom: 20vh;
        background-image: url('data:image/svg+xml,<svg width="81" height="16" viewBox="0 0 81 16" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="8" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="40.5" /><ellipse fill="%23D8FB50" cy="8" rx="8" ry="8" cx="73" /></svg>');
    }
    #reviews article {
        justify-content: flex-end;
        align-items: flex-start;
        height: 55vh;
    }

    figure::after {
        position: absolute;
        width: 50vw;
        display: flex;
        content: "";
        background: var(--color--main);
        height: 100vh;
        z-index: -1;
    }
    figure:nth-child(2n)::after { right: 0 }
    figure:nth-child(2n+1)::after { left: 0 }
    body:has(#contact.active) nav menu > li.current {
        top: 210px;
        left: 290px;
    }
    body:has(#contact.active) nav>a::after {
        transform: rotate(90deg) translate(45px, 205px);
    }
    body:has(#contact.active) nav>a {
        position: relative;
        margin-left: 12px;
        left: 165px;
        font-size: 36px;
        top: 105px;
    }
    nav * {
        transition: .65s all;
    }
    nav {
        justify-content: center;
    }
    :is(nav) #nav + label {
        position: absolute;
        top: 0;
        width: 100vw;
    }
    nav>a {
        position: relative;
        justify-content: center;
        display: flex;
        left: 0;
        right: 0;
        margin: 12px !important;
        font-size: 36px;
        padding: 12px;
        background-color: var(--color--white);
        z-index: 7;
        top: -12px;
    }
    nav menu > li.current::before,
    nav menu > li.current::after {
        content: "";
        position: absolute;
        background: var(--color--main);
        width: 50%;
        height: 10px;
        top: -12px;
        left: 0;
        right: 0;
        margin: auto;
    }
    body:has(#portfolio.active) nav menu > li.current::before {
        left: 0;
        right: auto;
        height: 100%;
        background: var(--color--main);
        top: 0;
        z-index: -1;
    }
    body:has(#portfolio.active) nav menu > li.current::after {
        left: auto;
        right: 0;
        height: 100%;
        background: var(--color--white);
        top: 0;
        z-index: -1;
    }
    body:has(#about.active) nav>a::before {
        left: auto;
        width: 60%;
        bottom: -8px;
    }
    body:has(#portfolio.active) nav>a::before {
        left: 0;
        width: 50%;
        height: 100%;
    }
    :is(nav) #nav + label menu {
        justify-content: flex-end;
        position: relative;
    }
    nav ul {
        position: absolute;
        left: 0;
        margin: 12px;
        bottom: -22px;
    }
    nav>a::after {
        /* content: ""; */
        width: 50%;
        position: absolute;
        height: 3px;
        background: var(--color--black);
        bottom: -5px;
    }
    h3 {
        font-size: 34px;
    }
    /* :is(nav>a,strong)::before { display: none } */
}
@media (max-width: 1000px) {
    section#about::after {
        content: "";
        display: flex;
        position: absolute;
        background: url(https://dev.sztuckiszewcow.com/wp-content/uploads/2023/11/piotr_sztucki.webp);
        z-index: -1;
        height: 100vh;
        width: 100vw;
        background-size: 175%;
        background-repeat: no-repeat;
        background-position: center 90px;
    }
}

/* element.style {
    left: calc(calc(100vw - 700px) / 2);
    right: 0;
    margin: auto;
} */