:root {
    --signal: #fa2b00;

    --msmall: 4vw;
    --mbig: 9.75vw;

    --dsmall: 1vw;
    --dbig: 6.75vw;

    --txtcolor: lightgray;
    --activetxt: var(--signal);
}

body {
    margin: 0 2vw;
    height: 100vh; /* remove for sticky css */
    overflow: scroll;
    font-family: Arial;
    /* color: var(--txtcolor); */
    font-family: "Arnold", Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: "Arnold";
    src: url("../Arnold-GroteskRadial.woff") format("woff");
}

body.white {
    background: white;
}

body.black {
    background: black;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

a {
    color: var(--activetxt);
}

ul {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

ul li ul {
    padding-inline-start: 5vw;
}

a.img {
    display: block;
}

#imagebox {
    width: 100%;
}


/*-------------feed---------------*/
.feed #imagebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.feed #imagebox .img {
    width: 100%;
    height: 90vh;
    filter: invert(0);
}

.feed .img img {
    width: 100%;
    height: 60vh;
    object-fit: contain;
    object-position: top;
    transition: transform 0.5s ease, filter 0.5s ease;
    transform: scale(.5);
    transform-origin: top;
    position: sticky;
    top: 0;
}

.feed .img img.active {
    transform: scale(1);
}


/*---------------------grid--------------------*/
.grid #imagebox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1vw;
    margin-top: 6.5vh;
    width: 96vw;
}

.grid #imagebox .img {
    width: fit-content;
    height: 25vw;
    display: inline;
}

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




/* --------------------works------------------- */
.worksheadline {
    position: fixed;
    top: 43vw;
    width: 100%;
}

.workscontainer {
    margin-top: 50vw;
}

.worksheadline span {
    display: inline-block;
    color: lightgray;
    width: 31%;
}

.worksheadline span:last-child {
    text-align: right;
}

.workscontainer a {
    display: block;
    height: 15vh;
    color: var(--activetxt);
    text-decoration: none;
}

.workscontainer a span {
    position: sticky;
    top: 50vw;
    display: inline-block;
    width: 32.5%;
    z-index: 99999999;

    text-decoration: underline;
    text-decoration-thickness: 0.35vw;
    text-underline-offset: 0.45vw;
}

.workscontainer a span:last-child {
    text-align: right;
}




/* --------------------about------------------- */
body#about main {
    margin-top: 21vh;
    color: var(--signal);
    display: flex;
    flex-direction: column;
    row-gap: 5vh;
    padding-bottom: 10vh;
    position: relative;
    /* z-index: 999999999999; */
}

body#about a {
    text-decoration: underline;
    text-decoration-thickness: 0.35vw;
    text-underline-offset: 0.45vw;
}

body#about a.bigtext, body#about li.bigtext a {
    text-decoration-thickness: 0.7vw;
    text-underline-offset: 0.8vw;
}

span.bigtext {
    display: block;
    padding-bottom: 1.5vh;
}

.contact, .contact a, .clientlist li {
    color: var(--txtcolor);
}

ul.clientlist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

.clientlist li {
    width: 50%;
}

.clientlist li:first-child {
    width: 100%;
    padding-bottom: 1vh;
}

.bigtext {
    font-size: var(--mbig);
}

#repBig {
    margin-block-start: 2vh;
    margin-block-end: 2.5vh;
}

.abouttxt {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#about dl {
    margin-block-start: 0;
    margin-block-end: 0;
}

#about dd {
    margin-inline-start: 0;
}

.represented p:nth-child(1) {
    padding-top: 3vh;
}

.represented p:nth-child(1), .represented p:nth-child(2) {
    font-size: var(--mbig);
    text-transform: uppercase;
}

body#about .represented p:nth-child(2) {
    padding-bottom: 3vh;
}

body#about .represented p:nth-child(2) a {
    text-decoration: underline;
    text-decoration-thickness: 0.7vw;
    text-underline-offset: 0.8vw;
}


body#about img {
    width: 100%;
    height: 45vh;
    object-fit: contain;
}

#agb {
    color: var(--txtcolor);
}

#agb ol {
    counter-reset: item;
    padding-inline-start: 0;
    margin-block-start: 0;

    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#agb ol ol {
    padding-inline-start: 5vw;
}

#agb li {
    display: block;
}

#agb li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}

#imprint {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* --------------desktop CSS--------------- */
@media only screen and (min-width: 768px) {
    body {
        height: unset;
        margin: 1vw;
    }

    .feed #imagebox {
        position: relative;
    }

    .grid #imagebox {
        position: absolute;
        gap: .5vw;
        margin-top: 6.5vw;
        width: 98vw;
    }

    .grid #imagebox .img {
        width: auto;
        height: 14vh;
    }


    /* works */

    .worksheadline {
        top: 24vw;
        font-size: var(--dsmall);
    }

    .workscontainer {
        margin-top: 29vw;
        font-size: var(--dsmall);
    }

    .worksheadline span {
        width: 32.4%;
    }
    
    .workscontainer a {
        text-decoration: none;
        height: 12vh;
    }
    
    .workscontainer a span {
        text-decoration: none;
        top: 25.5vw;
        width: 33.1%;
    }

    .workscontainer a:hover span {
        text-decoration: underline;
        text-decoration-thickness: 0.1vw;
        text-underline-offset: 0.15vw;
    }



    /* about */

    .bigtext {
        font-size: var(--dbig);
        line-height: 1.1;
    }

    #repBig {
        font-size: var(--dsmall);
        margin-block-start: 0;
        margin-block-end: 0;
    }

    #repBig p a {
        text-decoration-thickness: 0.1vw;
        text-underline-offset: 0.15vw;
    }

    body#about main {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        row-gap: 15vh;
        margin: 0;
        font-size: var(--dsmall);
        margin-top: 30vw;
    }

    body#about a {
        text-decoration: underline;
        text-decoration-thickness: 0.1vw;
        text-underline-offset: 0.15vw;
    }

    body#about a.bigtext {
        text-decoration-thickness: 0.35vw;
        text-underline-offset: 0.4vw;
    }

    body#about li.bigtext a {
        text-decoration-thickness: 0.35vw;
        text-underline-offset: 0.4vw;
    }

    span.bigtext {
        padding-bottom: 2.5vh;
    }

    .firstrow {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .abouttxt {
        width: 47%;
        padding-top: 2vh;
    }

    ul.clientlist {
        width: 47%;
        padding-top: 0;
    }

    .represented p:nth-child(1), .represented p:nth-child(2) {
        font-size: var(--dsmall);
        text-transform: none;
    }

    .represented p:nth-child(1) {
        padding-top: 0;
    }
    
    body#about .represented p:nth-child(2) a {
        text-decoration: underline;
        text-decoration-thickness: 0.1vw;
        text-underline-offset: 0.15vw;
    }

    body#about .represented p:nth-child(2) {
        padding-bottom: 0;
    }

    body#about img {
        width: 50%;
        height: unset;
    }

    #imprint {
        /* width: 50%; */
        width: 100%;
        color: var(--txtcolor);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #imprint > * {
        width: 50%;
    }
    .imprintContact {
        color: var(--activetxt);
    }

    #agb {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #agb > * {
        width: 50%;
    }

}