/*------------------------------------------*/
/*                  FONTS                   */
/*------------------------------------------*/

/* archivo-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/archivo-v25-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100;
  src: url('fonts/archivo-v25-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/archivo-v25-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 200;
  src: url('fonts/archivo-v25-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/archivo-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/archivo-v25-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/archivo-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/archivo-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/archivo-v25-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/archivo-v25-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/archivo-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/archivo-v25-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/archivo-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/archivo-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/archivo-v25-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/archivo-v25-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/archivo-v25-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/archivo-v25-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lora-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/lora-v37-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/lora-v37-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/lora-v37-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/lora-v37-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/lora-v37-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lora-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/lora-v37-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*------------------------------------------*/
/*                  VARIABLES               */
/*------------------------------------------*/

:root {
    
    --h1-text-indent: -0.17rem;
    --h1-word-spacing: ;
    --h1-letter-spacing: 0.07rem;
    --h1-white-space: ;
    --h1-line-height: ;
    --h1-space-after: 0.20rem;
    --h1-font-family: 'Archivo', 'Arial', sans-serif;
    --h1-font-weight: 400;
    --h1-font-size: 3.3rem;
    --h1-font-style: ;
    --h1-font-stretch: ;
    --h1-font-variant: ;
    
    --h2-text-indent: ;
    --h2-word-spacing: ;
    --h2-letter-spacing: 0.02rem;
    --h2-white-space: ;
    --h2-line-height: 1.1;
    --h2-space-after: 0.9rem;
    --h2-font-family: 'Archivo', 'Arial', sans-serif;
    --h2-font-weight: 400;
    --h2-font-size: 2.00rem;
    --h2-font-style: ;
    --h2-font-stretch: ;
    --h2-font-variant: ;
    
    --copy-text-indent: ;
    --copy-word-spacing: -0.05rem;
    --copy-letter-spacing: 0.04rem;
    --copy-white-space: ;
    --copy-line-height: 1.4;
    --copy-space-after: 1.27rem;
    --copy-font-family: 'Lora', serif;
    --copy-font-weight: 100;
    --copy-font-size: 1.15rem;
    --copy-font-style: ;
    --copy-font-stretch: ;
    --copy-font-variant: ;
    
    --small-text-indent: ;
    --small-word-spacing: ;
    --small-letter-spacing: 0.08rem;
    --small-white-space: ;
    --small-line-height: 1.5;
    --small-space-after: 0.00rem;
    --small-font-family: 'Lora', serif;
    --small-font-weight: 400;
    --small-font-size: ;
    --small-font-style: ;
    --small-font-stretch: ;
    --small-font-variant: ;
    
    --email-space-after: 0.7rem;
    
    --color-main-darkblue: #4d5395;
    --color-main-lightblue: #a9caff;
    --color-main-darkgreen: #00a878;
    --color-main-lightgreen: #d8f1a0;
    --color-main-red: #fe5e41;
    --color-main-orange: #f2bb05;
    --color-main-cream: #f3c178;
    --color-main-yellow: #fff582;
    --color-main-dark: #12000a;
    --color-main-light: white;
    
    --color-websafe-darkblue: #666699;
    --color-websafe-lightblue: #99ccff;
    --color-websafe-darkgreen: #009966;
    --color-websafe-lightgreen: #ccff99;
    --color-websafe-red: #ff6633;
    --color-websafe-orange: #ffcc00;
    --color-websafe-cream: #ffcc66;
    --color-websafe-yellow: #ffff99;
    --color-websafe-dark: #000000;
    --color-websafe-light: white;

    --gap: 1.0rem;
    
    --border-style: solid;
    --border-width: 0.0625rem;
    --border-width-half: calc(var(--border-width) / 2);
    --border-color: white;
    --border-radius-small: calc(var(--border-radius-big) / 6);
    --border-radius-big: calc(var(--home-card-height) / 30);
    
    --home-card-height: calc((100vh - (var(--gap) * 3)) / 2);
    
    --banner-animation-duration: 20s;
    --banner-animation-duration-fast: calc(var(--banner-animation-duration) / 4);
    --banner-animation-timing-function: linear;
    --banner-animation-iteration-count: infinite;
    
    --tl-fraction: calc(((var(--home-card-height) / 9) * 16) / 7);
    --tl-angle: 22.5deg;
    
    --br-fraction: calc(((var(--home-card-height) / 9) * 16) / 7);
    --br-angle: 22.5deg;

    --nav-height: calc(var(--nav-font-size) + var(--nav-padding-tb));
    --nav-padding-tb: 0.5rem;
    --nav-padding-rl: 1rem;
    --nav-font-size: 1.5rem;

    --work-card-height: calc(((100vh - var(--nav-height)) / 2) - (var(--gap) * 3));
    
    --footer-padding-lr: 3.4rem;

    --transition-time: 0.3s;
}

/*------------------------------------------*/
/*                  GENERAL                 */
/*------------------------------------------*/

body {
    margin: 0;
    background-color: var( --color-main-dark);
    color: var(--color-main-light);
}

h1 {
    margin: 0 0 var(--h1-space-after);
    text-indent: var(--h1-text-indent);
    letter-spacing: var(--h1-letter-spacing);
    font-family: var(--h1-font-family);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
}

h2 {
    margin: 0 0 var(--h2-space-after);
    color: var(--color-main-light);
    letter-spacing: var(--h2-letter-spacing);
    line-height: var(--h2-line-height);
    font-family: var(--h2-font-family);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
}

p {
    margin: 0 0 var(--copy-space-after);
    word-spacing: var(--copy-word-spacing);
    letter-spacing: var(--copy-letter-spacing);
    line-height: var(--copy-line-height);
    font-family: var(--copy-font-family);
    font-weight: var(--copy-font-weight);
    font-size: var(--copy-font-size);
}

.box {
    margin: 0 0 var(--email-space-after);
    padding: 0.1rem 1.14rem 0.30rem 0.7rem;
    border-radius: var(--border-radius-small);
    background-color: var(--color-main-light);
    color: var(--color-main-dark);
    word-spacing: -0.15rem;
    letter-spacing: 0.03rem;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 1.55rem;
    font-style: italic;
}

/*------------------------------------------*/
/*                  NAV                     */
/*------------------------------------------*/

nav {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    border-style: var(--border-style);
    border-width: 0 0 var(--border-width) 0;
    border-color: var(--border-color);
    padding: 0.6rem;
    background-color: var(--color-main-dark);
}

nav .nav_other {
    display: flex;
    gap: 0.6rem;
}

nav a {
    display: block;
    border: var(--border-style) var(--border-width) var(--border-color);
    padding: var(--nav-padding-tb) var(--nav-padding-rl);
    border-radius: var(--border-radius-small);
    background-color: var(--color-main-dark);
    color: var(--color-main-light);
    text-decoration: none;
    font-family: 'Lora', serif;
    font-size: var(--nav-font-size);
    font-weight: 500;
    transition-duration: var(--transition-time)
}

nav a:hover {
    background-color: var(--color-main-light);
    color: var(--color-main-dark);
}

nav a:active {
    background-color: var(--color-main-dark);
    color: var(--color-main-light);
    transition-duration: calc(var(--transition-time) / 2);
}

nav .active {
    background-color: var(--color-main-light);
    color: var(--color-main-dark);
}

/*------------------------------------------*/
/*                  HOME                    */
/*------------------------------------------*/

.home {
    display: flex;
    justify-content: flex-start;
    gap: var(--gap);
}

.home .content {
    display: flex;
    flex-flow: wrap;
    gap: var(--gap);
    margin: var(--gap) var(--gap);
    width: calc(var(--home-card-height) + ((var(--home-card-height) / 9) * 16) + var(--gap));
    height: calc(100vh - (var(--gap) * 2));
    font-family: 'Archivo', serif;
    font-size: calc((var(--home-card-height) * 0.25));
}

.home .content > div {
    border-radius: var(--border-radius-big);
    overflow: hidden;
}

.home .content a {
    text-decoration: none;
    transition-duration: var(--transition-time);
}

.home .content .banner {
    line-height: 1;
    text-decoration: none;
}

.home .tl, .home .br {
    width: calc((var(--home-card-height) / 9) * 16);
    height: var(--home-card-height);
}

.home .tr, .home .bl {
    width: var(--home-card-height);
    height: var(--home-card-height);
}

/*banner animations*/

@keyframes wordscroll_tb {
  from {translate: 0 -25%;}
  to {translate: 0 0;}
}

@keyframes wordscroll_bt {
  from {translate: 0 0;}
  to {translate: 0 -25%;}
}

@keyframes wordscroll_lr {
  from {translate: -25%;}
  to {translate: 0;}
}

@keyframes wordscroll_rl {
  from {translate: 0;}
  to {translate: -25%;}
}

@keyframes bannerscroll_lr {
    from {translate: 0;}
    to {translate: calc(var(--tl-fraction) * 1.85);} /*should be 2.0 but this is a quick fix for now*/
}

@keyframes bannerscroll_lr_fast {
    from {translate: 0;}
    to {translate: calc(var(--tl-fraction) * 2.02);} /*should be 2.0 but this is a quick fix for now*/
}

/*top left card*/

.home .tl a {
    background-color: var(--color-main-red)
}

.home .tl .banner{
    width: 100%;
    height: 100%;
    animation: bannerscroll_lr calc(var(--banner-animation-duration) / 2) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
}

.home .tl a:hover .banner{
    animation: bannerscroll_lr_fast calc(var(--banner-animation-duration-fast) / 2) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
}

.home .tl .piece {
    position: absolute;
    top: 100%;
    transform-origin: top left;
    transform: rotate(-67.5deg);
    width: calc((var(--home-card-height) / cos(var(--tl-angle))) + (var(--tl-fraction) * sin(var(--tl-angle))) + 1rem);
    height: var(--tl-fraction);
}

.home .tl .piece div {
    display: inline-block;
    translate: -25%;
}

    #tl_n4,
    #tl_n2,
    #tl_0,
    #tl_2,
    #tl_4,
    #tl_6 {
        background-color: var(--color-main-darkblue);
        color: var(--color-main-red);
    }

    #tl_n3,
    #tl_n1,
    #tl_1,
    #tl_3,
    #tl_5,
    #tl_7 {
        background-color: var(--color-main-red);
        color: var(--color-main-darkblue);
    }

    #tl_n4 div,
    #tl_n2 div,
    #tl_0 div,
    #tl_2 div,
    #tl_4 div,
    #tl_6 div {
        animation: wordscroll_lr var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
        transition-duration: var(--transition-time);
    }

    #tl_n3 div,
    #tl_n1 div,
    #tl_1 div,
    #tl_3 div,
    #tl_5 div,
    #tl_7 div {
        animation: wordscroll_rl var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
        transition-duration: var(--transition-time);
    }

    .home .tl a:hover #tl_n4 div,
    .home .tl a:hover #tl_n2 div,
    .home .tl a:hover #tl_0 div,
    .home .tl a:hover #tl_2 div,
    .home .tl a:hover #tl_4 div,
    .home .tl a:hover #tl_6 div {
        scale: 200% 100%;
        animation: wordscroll_lr var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .tl a:hover #tl_n3 div,
    .home .tl a:hover #tl_n1 div,
    .home .tl a:hover #tl_1 div,
    .home .tl a:hover #tl_3 div,
    .home .tl a:hover #tl_5 div,
    .home .tl a:hover #tl_7 div {
        scale: 200% 100%;
        animation: wordscroll_rl var(--banner-animation-duration-fast) var(--banner-animation-timing-function)
            var(--banner-animation-iteration-count);
    }

    #tl_n4 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * -4);
    }

    #tl_n3 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * -3);
    }

    #tl_n2 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * -2);
    }

    #tl_n1 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * -1);
    }

    #tl_1 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 1);
    }

    #tl_2 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 2);
    }

    #tl_3 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 3);
    }

    #tl_4 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 4);
    }

    #tl_5 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 5);
    }

    #tl_6 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 6);
    }

    #tl_7 {
        translate: calc(var(--tl-fraction) * cos(var(--tl-angle)) * 7);
    }

/*top right card*/

.home .tr .banner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-main-lightblue);
    text-decoration: none;
}

.home .tr .piece {
    overflow: hidden;
}

.home .tr .piece div {
    display: inline-block;
    translate: -25%;
}

    #tr_t,
    #tr_b {
        background-color: var(--color-main-dark);
        color: var(--color-main-lightblue);
    }

    #tr_r,
    #tr_l {
        background-color: var(--color-main-lightblue);
        color: var(--color-main-dark);
    }

    #tr_t {
        width: 75%;
        height: 25%;
        transition-duration: var(--transition-time);
    }

    #tr_r {
        width: 25%;
        height: 75%;
        position: absolute;
        top: 0;
        left: 75%;
        writing-mode: vertical-lr;
        transition-duration: var(--transition-time);
    }

    #tr_b {
        width: 75%;
        height: 25%;
        position: absolute;
        top: 75%;
        left: 25%;
        transition-duration: var(--transition-time);
    }

    #tr_l {
        width: 25%;
        height: 75%;
        writing-mode: vertical-lr;
        transition-duration: var(--transition-time);
    }

    .home .tr a:hover #tr_t {
        width: 50%;
        height: 50%;
        font-size: 200%;
    }

    .home .tr a:hover #tr_r {
        width: 50%;
        height: 50%;
        top: 0;
        left: 50%;
        font-size: 200%;
    }

    .home .tr a:hover #tr_b {
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
        font-size: 200%;
    }

    .home .tr a:hover #tr_l {
        width: 50%;
        height: 50%;
        font-size: 200%;
    }

    #tr_t div {
        animation: wordscroll_lr var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #tr_r div {
        animation: wordscroll_tb var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #tr_b div {
        animation: wordscroll_rl var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #tr_l div {
        animation: wordscroll_bt var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .tr a:hover #tr_t div {
        animation: wordscroll_lr var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .tr a:hover #tr_r div {
        animation: wordscroll_tb var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .tr a:hover #tr_b div {
        animation: wordscroll_rl var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .tr a:hover #tr_l div {
        animation: wordscroll_bt var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

/*bottom left card*/

.home .bl .banner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-main-orange);
    text-decoration: none;
}

.home .bl .piece {
    overflow: hidden;
}

.home .bl .piece div {
    display: inline-block;
    translate: -25%;
}

    #bl_t,
    #bl_b {
        background-color: var(--color-main-lightgreen);
        color: var(--color-main-orange);
    }

    #bl_r,
    #bl_l {
        background-color: var(--color-main-orange);
        color: var(--color-main-lightgreen);
    }

    #bl_t {
        width: 75%;
        height: 25%;
        transition-duration: var(--transition-time);
    }

    #bl_r {
        width: 25%;
        height: 75%;
        position: absolute;
        top: 0;
        left: 75%;
        writing-mode: vertical-lr;
        transition-duration: var(--transition-time);
    }

    #bl_b {
        width: 75%;
        height: 25%;
        position: absolute;
        top: 75%;
        left: 25%;
        transition-duration: var(--transition-time);
    }

    #bl_l {
        width: 25%;
        height: 75%;
        writing-mode: vertical-lr;
        transition-duration: var(--transition-time);
    }

    .home .bl a:hover #bl_t {
        width: 50%;
        height: 50%;
        font-size: 200%;
    }

    .home .bl a:hover #bl_r {
        width: 50%;
        height: 50%;
        top: 0;
        left: 50%;
        font-size: 200%;
    }

    .home .bl a:hover #bl_b {
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
        font-size: 200%;
    }

    .home .bl a:hover #bl_l {
        width: 50%;
        height: 50%;
        font-size: 200%;
    }

    #bl_t div {
        animation: wordscroll_lr var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #bl_r div {
        animation: wordscroll_tb var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #bl_b div {
        animation: wordscroll_rl var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #bl_l div {
        animation: wordscroll_bt var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .bl a:hover #bl_t div {
        animation: wordscroll_lr var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .bl a:hover #bl_r div {
        animation: wordscroll_tb var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .bl a:hover #bl_b div {
        animation: wordscroll_rl var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .bl a:hover #bl_l div {
        animation: wordscroll_bt var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

/*bottom right card*/

.home .br a {
    background-color: var(--color-main-red)
}

.home .br .banner{
    width: 100%;
    height: 100%;
    animation: bannerscroll_lr calc(var(--banner-animation-duration) / 2) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
}

.home .br a:hover .banner{
    animation: bannerscroll_lr_fast calc(var(--banner-animation-duration-fast) / 2) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
}

.home .br .piece {
    position: absolute;
    top: 100%;
    transform-origin: top left;
    transform: rotate(-67.5deg);
    width: calc((var(--home-card-height) / cos(var(--br-angle))) + (var(--br-fraction) * sin(var(--br-angle))) + 1rem);
    height: var(--br-fraction);
}

.home .br .piece div {
    display: inline-block;
    translate: -25%;
}

    #br_n4,
    #br_n2,
    #br_0,
    #br_2,
    #br_4,
    #br_6 {
        background-color: var(--color-main-cream);
        color: var(--color-main-darkgreen);
    }

    #br_n3,
    #br_n1,
    #br_1,
    #br_3,
    #br_5,
    #br_7 {
        background-color: var(--color-main-darkgreen);
        color: var(--color-main-cream);
    }

    #br_n4 div,
    #br_n2 div,
    #br_0 div,
    #br_2 div,
    #br_4 div,
    #br_6 div {
        animation: wordscroll_lr var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
        transition-duration: var(--transition-time);
    }

    #br_n3 div,
    #br_n1 div,
    #br_1 div,
    #br_3 div,
    #br_5 div,
    #br_7 div {
        animation: wordscroll_rl var(--banner-animation-duration) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
        transition-duration: var(--transition-time);
    }

    .home .br a:hover #br_n4 div,
    .home .br a:hover #br_n2 div,
    .home .br a:hover #br_0 div,
    .home .br a:hover #br_2 div,
    .home .br a:hover #br_4 div,
    .home .br a:hover #br_6 div {
        scale: 200% 100%;
        animation: wordscroll_lr var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    .home .br a:hover #br_n3 div,
    .home .br a:hover #br_n1 div,
    .home .br a:hover #br_1 div,
    .home .br a:hover #br_3 div,
    .home .br a:hover #br_5 div,
    .home .br a:hover #br_7 div {
        scale: 200% 100%;
        animation: wordscroll_rl var(--banner-animation-duration-fast) var(--banner-animation-timing-function) var(--banner-animation-iteration-count);
    }

    #br_n4 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * -4);
    }

    #br_n3 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * -3);
    }

    #br_n2 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * -2);
    }

    #br_n1 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * -1);
    }

    #br_1 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 1);
    }

    #br_2 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 2);
    }

    #br_3 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 3);
    }

    #br_4 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 4);
    }

    #br_5 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 5);
    }

    #br_6 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 6);
    }

    #br_7 {
        translate: calc(var(--br-fraction) * cos(var(--br-angle)) * 7);
    }

/*------------------------------------------*/
/*                  INFO                    */
/*------------------------------------------*/

.home .info {
    display: flex;
    margin: 0 var(--gap) 0 0;
    height: 100vh;
    color: white;
}

.home .info .text{
    display: flex;
    flex-flow: column;
    gap: var(--gap);
    margin: auto;
    max-width: 31.25rem;
}

.home .info .info_contact h2, .home .info .info_contact a {
    display: inline-block; /*restrict top border to text width*/
}

.home .info .info_contact h2 {
    padding: 0.85rem 0 0;
    border-style: var(--border-style);
    border-width: var(--border-width) 0 0 0;
    border-color: var(--border-color);
}

/*------------------------------------------*/
/*                  WORK                    */
/*------------------------------------------*/

.work .content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: var(--gap) auto 10rem;
    width: calc((var(--work-card-height) * 2) + ((var(--work-card-height) / 9) * 16) + (var(--gap) * 2));
    line-height: 1.5;
}

.work figure {
    margin: 0;
    transition-duration: var(--transition-time);
}

.work figure:hover {
    scale: 110%;
}

.work .sqr {
    width: calc(var(--work-card-height) - var(--border-width)); /*square aspect ratio*/
    /*width: calc(((100vh - var(--nav-height)) / 2) / sqrt(2));*/ /*DIN A spect ratio*/
    height: var(--work-card-height);
}

.work .sixteenbynine {
    width: calc((var(--work-card-height) / 9) * 16); /*16:9 aspect ratio*/
    /*width: calc(100% - ((100vh - var(--nav-height)) / 2) / sqrt(2));*/ /*DIN A spect ratio*/
    height: var(--work-card-height);
}

.work img {
    border-radius: var(--border-radius-big);
    transition: var(--transition-time);
}

/*------------------------------------------*/
/*                  BLOG                    */
/*------------------------------------------*/

.blog .content{
    margin: calc(var(--nav-height) * 2) auto calc(var(--nav-height) * 4);
    max-width: 600px;
    hyphens: auto;
}

.blog article {
    margin: 0 0 calc(var(--nav-height) * 2);
}

.blog h1 {
    margin: 0 0 1.0rem; 
}

.blog article h2 {
    margin: 0 0 0;
}

.blog article time {
    display: block;
    margin: 0 0 1.0rem;
    letter-spacing: var(--small-letter-spacing);
    line-height: var(--small-line-height);
    font-family: var(--small-font-family);
    font-weight: var(--small-font-weight);
    font-size: var(--small-font-size);
}

/*------------------------------------------*/
/*                  ABOUT                   */
/*------------------------------------------*/

.about {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100vh;
}

.about .content{
    margin: calc(var(--nav-height) * 2) auto calc(var(--nav-height) * 4);
    max-width: 31.25rem;
}

.about .content h1 {
    margin: 0 0 1.0rem; 
}

.about .content h2 {
    margin: 0 0 0;
}

.about .content ul {
    list-style: none;
}

.about .content li {
    margin: 0 0 2.5rem;
}

.about .content p {
    margin: 0 0 0;
}

.about .content time {
    display: block;
    margin: 0 0 0.4rem;
    letter-spacing: var(--small-letter-spacing);
    line-height: var(--small-line-height);
    font-family: var(--small-font-family);
    font-weight: var(--small-font-weight);
    font-size: var(--small-font-size);
}

.about .content em {
    margin: 0;
    letter-spacing: var(--small-letter-spacing);
    line-height: var(--small-line-height);
    font-family: var(--small-font-family);
    font-style: italic;
    font-weight: var(--small-font-weight);
    font-size: 0.85rem;
}

/*------------------------------------------*/
/*                  CONTACT                 */
/*------------------------------------------*/

.contact {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100vh;
}

.contact .content{
    margin: auto;
}

/*------------------------------------------*/
/*                  FOOTER                  */
/*------------------------------------------*/

footer {
    display: flex;
    justify-content: space-between;
    padding: 2.5rem var(--footer-padding-lr) 3.5rem;
    border-style: var(--border-style);
    border-width: var(--border-width) 0 0 0;
    border-color: var(--border-color);
}

footer ul {
    margin: 0;
    padding: 0;
    text-align: right;
    letter-spacing: var(--small-letter-spacing);
    line-height: var(--small-line-height);
    font-family: var(--small-font-family);
    font-weight: var(--small-font-weight);
    font-size: var(--small-font-size);
    list-style-type: none;
}

footer ul a {
    color: var(--color-main-light);
}

footer ul a:hover {
    font-style: italic;
}