:root {
    --shape-left-hex: polygon(28% 0, 100% 0, 100% 100%, 28% 100%, 0 50%);
    --shape-right-hex: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);

    --header-margin-block: 1.35rem;

    --color-text: #333;
    --color-hex: #10bb82;
    --color-header: #00167a;
    --color-background: #f2f2f2;

    --color-vfx-hex: #10bb82;
    --color-vfx-header: #0a714e;
    /*--color-vfx-background: #c2ffe17F;*/
    --color-vfx-background: #daf9e9;
    
    --color-consulting-hex: #fff3c2;
    --color-consulting-header: #cca300;
    /*--color-consulting-background: #fff3c27F;*/
    --color-consulting-background: #fff3da;
    
    --color-teamwork-hex: #ff1fa9;
    --color-teamwork-header: #cc007e;
    /*--color-teamwork-background: #ffd6d67F;*/
    --color-teamwork-background: #ffe4e4;
}

html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    font-size: 16pt;

    color: var(--color-text);
    background-color: var(--color-background);
    /*background-image: linear-gradient(110deg, #00F2, #88F7, #88F7, #00F2);*/
    background-image: linear-gradient(95deg, #44F5, #00F2, #00F2, #44F5);
}

header {
    text-align: center;
    padding-bottom: 5rem;
}
header h2 {
    font-size: 100%;
}
nav a,
nav a:visited {
    display: inline-block;
    color: var(--nav-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 150%;
    margin-inline: 0.5rem;
    text-shadow: 0 0 3px #FFF;
}
nav a[href='#about']        { --nav-color: var(--color-header); }
nav a[href='#vfx']          { --nav-color: #10bb82;             }
nav a[href='#teamwork']     { --nav-color: #ff1fa9;             }
nav a[href='#consulting']   { --nav-color: #cca300;             }

section {
    text-align: justify;
    padding-block: var(--header-margin-block);
    --align: left;
    --float: right;
    --margin-hex-site: 3em;
    --margin-hex: 0 calc(var(--margin-hex-site)*-1) 0 var(--margin-hex-site);
    --shape-hex: var(--shape-left-hex);
    /*scroll-margin-top: 100px;*/
}
section:nth-of-type(even) {
    --align: right;
    --float: left;
    --margin-hex: 0 var(--margin-hex-site) 0 calc(var(--margin-hex-site)*-1);
    --shape-hex: var(--shape-right-hex);
}
/* in case we want the hexagons to be aligned with the border */
/*--margin-hex: 0 0 0 var(--margin-hex-site);*/
/*--margin-hex: 0 var(--margin-hex-site) 0 0;*/

section#about,
section#details {
    --color-background: transparent;
}
section#vfx {
    --color-header: var(--color-vfx-header);
    --color-background: var(--color-vfx-background);
    background-image: linear-gradient(110deg, #1472, #1B87, #1B87, #1472);
}
section#consulting {
    --color-header: var(--color-consulting-header);
    --color-background: var(--color-consulting-background);
    background-image: linear-gradient(110deg, #8F02, #FF07, #FF07, #8F02);
}
section#teamwork {
    --color-header: var(--color-teamwork-header);
    --color-background: var(--color-teamwork-background);
    background-image: linear-gradient(70deg, #80F2, #F0F7, #F0F2, #80F2);
}
section#details dt,dd {
    font-size: 18px;
}
section#details dt {
    float: left;
    margin-right: 1rem;
    width: 150px;
}

section {
    background-color: var(--color-background);
}
h2 {
    color: var(--color-header);
    text-align: var(--align);
    font-size: 180%;
    margin-block: var(--header-margin-block);
}
h4 {
    color: var(--color-header);
    text-align: var(--align);
}

section > .wrapper > img {
    display: block;
    max-width: 50%;

    shape-margin: 1em;
    margin: var(--margin-hex);
    float: var(--float);
    shape-outside: var(--shape-hex);
}
blockquote {
    font-style: italic;
}
a.more,
a.more:visited {
    display: block;
    text-align: var(--align);
    font-weight: bold;
    color: var(--color-header);
}

section .wrapper {
    margin-inline: auto;
    max-width: 60ch;
}

@media screen and (max-width: 90ch) {
    section,
    section:nth-of-type(even) {
        --margin-hex: 1rem auto;
        --float: none;
    }
    section .wrapper {
        margin-inline: clamp( 1rem, 7%, 5rem);
    }
}