html, body { height: 100%; }

body {
    min-width: 800px;
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
}

header {
    background: #334;
    margin: 0;
    padding: 0 50vh 0 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

a {
    text-decoration: none;
    color: #bbf;
    outline: none;
    transition: color .1s linear;
}
a:hover { color: #aaf; }
a:focus { text-decoration: underline; }

.about-content {
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 0 10%;
    padding-left: 240px;
    min-height: 240px;
    align-items: center;
}

.title {
    flex: 1;
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
}
.title > h1 {
    color: #fff;
    font-size: 28pt;
    font-weight: normal;
    text-align: center;
}
@keyframes me {
    0% { bottom: 0; border-radius: 0; background-position: 0 100%; }
    5% { background-position-y: 100%; }
    10% { background-position-y: -10%; }
    20%, 100% { bottom: 0; left: calc(100% - 200px); border-radius: 1000px; width: 200px; height: 200px; background-position: 100% -10%; background-size: 250px; }
    40%, 100% { left: 10%; width: 200px; height: 200px; bottom: -335px; border-radius: 100px; }
    100% { box-shadow: 0 0 100px rgba(0, 0, 0, .5); }
}
.me {
    position: absolute;
    background: url("../img/me.webp") no-repeat bottom;
    background-size: 50vh;
    width: 50vh;
    height: 100%;
    left: calc(100% - 50vh);
    z-index: 1;
    animation: me ease-in-out 1s forwards paused;
}
body.no-webp .me { background-image: url("../img/me.png"); }

@keyframes about-text {
    0%, 40% { opacity: 0; transform: translateX(-40px); }
    45%, 100% { opacity: 1; transform: translateX(0); }
}
.about-text { animation: about-text 1s forwards paused; }

@keyframes title-appear {
    0%, 20% { opacity: 0; transform: translateY(-20px); }
    40% { opacity: 1; transform: translateY(0); }
}

body > nav {
    background: #111;
    padding: 20px 100px;
    display: flex;
    flex-direction: row;
    color: #fff;
}

body > nav > a { padding: 0 30px; }

body > section {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 14pt;
}

body > section > h1 {
    font-family: Georgia, serif;
    text-transform: uppercase;
    text-align: center;
    font-size: 22pt;
    margin: 40px 0;
}

body > section > h2 {
    font-size: 28pt;
    font-weight: normal;
    text-align: center;
    padding: 30px;
    margin: 0;
    background: #eee;
    z-index: 1;
}
h2.project-title, h2.experience-title {
    font-family: Futura, sans-serif;
    letter-spacing: 2pt;
}
h2.project-title {
    color: #77d;
    background: #eef;
}
h2.experience-title {
    color: #d63;
    background: #fed;
}

a.project-button {
    --transparent-color: transparent;
    font-size: 18pt;
    color: var(--color);
    background: var(--transparent-color);
    padding: 15px 30px;
    margin: 0 0 0 50px;
    border-radius: 15px;
    border: 2px solid var(--color);
    outline: none;
    user-select: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all ease-in-out .2s;
}
a.project-button:hover {
    background: var(--color);
    color: var(--bg-color);
}
a.project-button:active {
    box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
    transition: none;
}
a.project-button + .project-tooltip {
    position: absolute;
    visibility: collapse;
    background: #333;
    font-size: 12pt;
    padding: 10px 20px;
    border-radius: 10px;
    max-width: 500px;
    margin-top: 70px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all ease-in-out .1s;
}
a.project-button + .project-tooltip::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    pointer-events: none;
    border: 10px solid transparent;
    border-bottom: 10px solid #333;
    margin-top: -30px;
    margin-left: calc(100% - 100px);
}
a.project-button:hover + .project-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.project-googlemon {
    height: max(200vh, 1600px);
    overflow: hidden;
    position: relative;
}
@keyframes googlemon-description {
    30% { visibility: collapse; opacity: 0; transform: scale(1.1); }
    33.33% { visibility: visible; margin-top: 0; opacity: 1; transform: scale(1); }
    66.66% { margin-top: 0; }
    100% { margin-top: -100vh; visibility: visible; }
}
.googlemon-description {
    visibility: collapse;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28pt;
    padding: 0 10%;
    animation: googlemon-description linear 1s forwards paused;
}
.googlemon-abstract {
    text-align: center;
    margin: 40px 0 0 0;
}
.googlemon-features {
    color: #333;
    font-size: 24pt;
    line-height: 1.5;
}
@keyframes googlemon-feature {
    0%, 35% { opacity: 0; transform: translateX(20px); }
    40%, 100% { opacity: 1; transform: translateX(0); }
}
.googlemon-features > li {
    animation: googlemon-feature linear 1s forwards paused;
}
@keyframes googlemon-bg {
    0% { top: -100vh; }
    30% { opacity: 1; filter: blur(0); background-size: 75%; }
    33.33% { opacity: .5; top: 0; filter: blur(4px); background-size: 85%; }
    66.66% { top: 100vh; }
    100% { top: 100vh; opacity: .5; filter: blur(16px); background-size: 85%; }
}
.googlemon-bg {
    top: 0;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: url("../img/projects/googlemon/googlemon.svg") no-repeat center;
    background-size: 75%;
    animation: googlemon-bg linear 1s forwards paused;
}
@keyframes googlemon-button {
    0%, 60% { visibility: collapse; opacity: 0; transform: scale(1.05); }
    66.66%, 100% { visibility: visible; opacity: 1; transform: scale(1); }
}
a.googlemon-button {
    --color: #46f;
    --bg-color: #fff;
    margin: 20px 0 0 0;
    animation: googlemon-button linear 1s forwards paused;
}

.project-volidance {
    position: relative;
    height: 200vh;
    background: url("../img/projects/volidance/dance-bg.webp") center no-repeat fixed;
    background-size: cover;
    overflow: hidden;
}
body.no-webp  .project-volidance { background-image: url("../img/projects/volidance/dance-bg.png"); }
.volidance-laptop-video {
    position: absolute;
    width: 76.8%;
    margin-left: -38.4%;
    left: 50%;
    margin-top: 3.84%;
}
.volidance-laptop-container {
    margin-top: 0;
    height: 100vh;
}
@keyframes volidance-laptop {
    33.3% { top: 34vw; transform: scale(1.32); }
    40%, 100% { transform: scale(.8); }
    40% { top: 70vh; filter: none; }
    45%, 100% { filter: blur(8px); }
    66.6%, 100% { top: 150vh; }
}
.volidance-laptop {
    position: absolute;
    height: 60vw;
    width: 100%;
    top: 34vw;
    margin-top: -30vw;
    transform: scale(1.32);
    animation: volidance-laptop linear 1s forwards paused;
}
.volidance-laptop-screen {
    position: absolute;
    background: url("../img/projects/volidance/laptop-screen.webp") top center no-repeat;
    width: 100%;
    height: 60vw;
    min-height: 475px;
    background-size: 100%;
}
body.no-webp .volidance-laptop-screen { background-image: url("../img/projects/volidance/laptop-screen.png"); }

@keyframes volidance-overlay {
    0%, 40% { top: 100%; }
    49% { display: flex; top: -4%; }
    50%, 66.67% { display: flex; top: 0; }
    100% { display: flex; top: -100%; }
}
.volidance-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    animation: volidance-overlay linear 1s forwards paused;
}
.volidance-smartphone {
    position: relative;
    width: 35vh;
    height: 70vh;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, .5);
    border-radius: 20px;
    background: rgba(255, 255, 255, .34);
}
.volidance-smartphone-screen {
    position: absolute;
    background: url("../img/projects/volidance/smartphone-screen.svg") center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}
.volidance-smartphone-video {
    position: absolute;
    width: 94%;
    margin-left: 2%;
    margin-top: 6%;
}

@keyframes volidance-description {
    0%, 50% { opacity: 0; transform: translateX(10vw); }
    66.67%, 100% { opacity: 1; transform: translateX(0); }
}
.volidance-description {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 40%;
    margin-right: 50px;
    font-size: 28pt;
    color: #fff;
    animation: volidance-description linear 1s forwards paused;
}
.volidance-text {
    text-align: right;
    text-shadow: rgba(0, 0, 0, .4) 0 2px 0;
}
.volidance-button-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
a.volidance-button {
    --color: #cf0;
    --bg-color: #000;
    --transparent-color: #0002;
}

@keyframes project-epistellar {
    0% { background-position: center left; }
    100% { background-position: center right; }
}
.project-epistellar {
    position: relative;
    height: 200vh;
    justify-content: center;
    align-items: center;
    background: url("../img/projects/epistellar/bg.webp") repeat center left fixed;
    background-size: 125%;
    overflow: hidden;
    animation: project-epistellar linear 1s forwards paused;
}
body.no-webp .project-epistellar { background-image: url("../img/projects/epistellar/bg.jpg"); }
@keyframes epistellar-bullet {
    33% { opacity: 0; left: 8%; }
    33.1% { opacity: 1; }
    60%, 100% { left: 210%; opacity: 1; }
}
.epistellar-bullet {
    position: fixed;
    top: 50%;
    margin-left: -37.5px;
    margin-top: -12px;
    width: 75px;
    height: 24px;
    background: url("../img/projects/epistellar/bullet.webp") no-repeat center;
    background-size: contain;
    opacity: 0;
    animation: epistellar-bullet ease-out 1s forwards paused;
}
body.no-webp .epistellar-bullet { background-image: url("../img/projects/epistellar/bullet.png"); }
.epistellar-ship {
    position: fixed;
    left: 0;
    top: 50%;
    margin-left: -128px;
    margin-top: -64px;
    width: 128px;
    height: 128px;
    background: no-repeat center;
    background-size: contain;
    pointer-events: none;
}
@keyframes epistellar-ship-red {
    30% { left: 0; margin-left: -128px; }
    68%, 100% { left: 100%; margin-left: 0; }
}
@keyframes epistellar-ship-green {
    20% { left: 0; margin-left: -128px; }
    60%, 100% { left: 150%; margin-left: 0; }
}
.epistellar-ship-red {
    animation: epistellar-ship-red ease-out 1s forwards paused;
    background-image: url("../img/projects/epistellar/ships/0.webp");
}
body.no-webp .epistellar-ship-red { background-image: url("../img/projects/epistellar/ships/0.png"); }
.epistellar-ship-green {
    animation: epistellar-ship-green ease-out 1s forwards paused;
    background-image: url("../img/projects/epistellar/ships/1.webp");
}
body.no-webp .epistellar-ship-green { background-image: url("../img/projects/epistellar/ships/1.png"); }
@keyframes epistellar-description {
    0%, 30% { opacity: 0; transform: translateX(-105%); clip-path: polygon(0 0, 0 100%, 75% 100%, 75% 0); }
    49% { transform: translateX(0); clip-path: polygon(0 0, 0 100%, 75% 100%, 75% 0); }
    50% { opacity: 1; }
    55%, 100% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
    66.6% { top: 0; }
    100% { opacity: 1; top: -100%; }
}
.epistellar-description {
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 28pt;
    color: #fff;
    margin: 0 15%;
    opacity: 0;
    clip-path: polygon(0 0, 0 100%, 75% 100%, 75% 0);
    animation: epistellar-description linear 1s forwards paused;
}
.epistellar-text {
    flex: 4;
    text-align: right;
    text-shadow: 0 0 5px #000;
}
.epistellar-button {
    --color: #48f;
    --bg-color: #003;
    flex: 1;
    text-align: center;
}

.sogeti-container {
    min-height: 150vh;
    background: url("../img/sogeti/bg.webp") fixed center;
    background-size: cover;
    overflow: hidden;
    box-shadow: inset 0 0 50px #000;
}
body.no-webp .sogeti-container { background-image: url("../img/sogeti/bg.jpg"); }
@keyframes sogeti-content {
    0% { top: 100vh; }
    40%, 60% { top: 0; }
    100% { top: -100vh; }
}
.sogeti-content {
    position: fixed;
    top: 100vh;
    display: flex;
    width: 80%;
    height: 100vh;
    max-height: 100vh;
    padding: 20px 10%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18pt;
    text-align: center;
    color: #fff;
    text-shadow: rgba(0, 0, 0, .4) 0 2px 0;
    overflow: hidden;
    animation: sogeti-content linear 1s forwards paused;
}
.sogeti-fields {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 80px 0;
}
@keyframes sogeti-field {
    0% { opacity: 0; transform: scale(.9); }
    8% { opacity: 1; transform: scale(1); }
}
.sogeti-field {
    margin: 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: sogeti-field linear 1s forwards paused;
}
.sogeti-field > div {
    width: 200px;
    max-width: 15vw;
    height: 200px;
    max-height: 15vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.sogeti-field-iot { background-image: url("../img/sogeti/inmoov.webp"); }
body.no-webp .sogeti-field-iot { background-image: url("../img/sogeti/inmoov.png"); }
.sogeti-field-modeling { background-image: url("../img/sogeti/3d.webp"); }
body.no-webp .sogeti-field-modeling { background-image: url("../img/sogeti/3d.gif"); }
.sogeti-field-web { background-image: url("../img/sogeti/web.svg"); }

.coaching-container {
    position: relative;
    background: url("../img/coaching/bg.webp") center no-repeat;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 500px;
    box-shadow: inset 0 0 50px #000;
    display: flex;
    flex-direction: row;
    align-items: center;
}
body.no-webp .coaching-container { background-image: url("../img/coaching/bg.png"); }
@keyframes coaching-image {
    0% { left: 100vw; }
    40% { left: 50px; }
    100% { left: 0; }
}
.coaching-image {
    position: absolute;
    background: url("../img/coaching/astek-back.webp") no-repeat center 75%;
    width: 500px;
    height: 500px;
    background-size: 100%;
    pointer-events: none;
    animation: coaching-image linear 1s forwards paused;
}
body.no-webp .coaching-image { background-image: url("../img/coaching/astek-back.png"); }
@keyframes coaching-text {
    0% { left: 0; }
    0%, 20% { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0); }
    38% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
    40% { left: 550px; }
    100% { left: 500px; }
}
.coaching-text {
    position: absolute;
    color: #fff;
    padding: 0 40px;
    width: 50%;
    left: 500px;
    font-size: 22pt;
    text-shadow: rgba(0, 0, 0, .4) 0 2px 0;
    animation: coaching-text linear 1s forwards paused;
}
.coaching-summary-container {
    height: max(200vh, 1600px);
    background: url("../img/coaching/classroom-bg.webp") fixed center top;
    background-size: cover;
    box-shadow: inset 0 0 50px #000;
}
body.no-webp .coaching-summary-container { background-image: url("../img/coaching/classroom-bg.jpg"); }
@keyframes coaching-summary {
    0% { top: max(100vh, 800px); }
    33.33%, 66.66% { top: 0; }
    100% { top: min(-100vh, -800px); }
}
.coaching-summary {
    position: fixed;
    top: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
    height: max(100vh, 800px);
    font-size: 18pt;
    text-align: center;
    color: #fff;
    text-shadow: rgba(0, 0, 0, .4) 0 2px 0;
    animation: coaching-summary linear 1s forwards paused;
}
.coaching-summary-title {
    font-size: 24pt;
    margin-top: 0;
}
@keyframes coaching-item-appear {
    0% { opacity: 0; transform: translateX(-10%); }
    10%, 100% { opacity: 1; transform: translateX(0); }
}
.coaching-item {
    font-weight: lighter;
    animation: coaching-item-appear linear 1s forwards paused;
}
@keyframes coaching-title-appear {
    0% { opacity: 0; transform: scale(1.1); }
    5%, 100% { opacity: 1; transform: scale(1); }
}
.coaching-summary-concepts-title {
    font-size: 24pt;
    font-weight: normal;
    animation: coaching-title-appear linear 1s forwards paused;
}
.coaching-item > span {
    font-size: 20pt;
    margin: 0 5px;
    vertical-align: -1pt;
    font-family: Monaco, "Roboto Mono", monospace;
}
.coaching-concepts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@keyframes coaching-concept-appear {
    0% { visibility: hidden; opacity: 0; transform: scale(1.1); }
    5%, 100% { visibility: visible; opacity: 1; transform: scale(1); }
}
@keyframes coaching-last-concept-appear {
    0% { visibility: hidden; opacity: 0; transform: scale(1.1); }
    5%, 100% { visibility: visible; opacity: .6; transform: scale(1); }
}
.coaching-concepts > p:nth-child(1) { --concept-color: #9d9; }
.coaching-concepts > p:nth-child(2) { --concept-color: #eae; }
.coaching-concepts > p:nth-child(3) { --concept-color: #ba8; }
.coaching-concepts > p:nth-child(4) { --concept-color: #dbe; }
.coaching-concepts > p:nth-child(5) { --concept-color: #faa; }
.coaching-concepts > p:nth-child(6) { --concept-color: #fa8; }
.coaching-concepts > p:nth-child(7) { --concept-color: #bce; }
.coaching-concepts > p:nth-child(8) { --concept-color: #eee; }
.coaching-concepts > p {
    display: flex;
    align-items: center;
    margin: 5px;
    border: 2px solid var(--concept-color);
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 18pt;
    text-align: center;
    text-shadow: none;
    color: var(--concept-color);
    background: rgba(0, 0, 0, .15);
    animation: coaching-concept-appear linear 1s forwards paused;
}
.coaching-concepts > p:last-of-type {
    font-style: italic;
    animation: coaching-last-concept-appear linear 1s forwards paused;
}

.hire-container {
    display: flex;
    height: 200vh;
    background: #ddf;
}
@keyframes hire-box {
    0% { top: 100vh; }
    33.33%, 66.66% { top: 0; }
    100% { top: -100vh; }
}
.hire-box {
    flex: 1;
    position: fixed;
    top: 100vh;
    height: 100vh;
    width: 100%;
    display: flex;
    background: #ddf;
    animation: hire-box linear 1s forwards paused;
}
@keyframes hire-border {
    0% { background-position: top 0 left, right 0 top, bottom 0 right, left 0 bottom; }
    100% { background-position: top 0 left 32px, right 0 top 32px, bottom 0 right 32px, left 0 bottom 32px; }
}
.hire-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px;
    border-radius: 5px;
    padding: 20px;
    background-image: linear-gradient(90deg, #aaf 50%, transparent 50%),
        linear-gradient(0deg, #aaf 50%, transparent 50%),
        linear-gradient(90deg, #aaf 50%, transparent 50%),
        linear-gradient(0deg, #aaf 50%, transparent 50%);
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 32px 6px, 6px 32px, 32px 6px, 6px 32px;
    background-position: top 10px left, right 10px top, bottom 10px left 0, left 10px bottom;
    animation: hire-border .4s infinite linear;
}
.hire-title {
    position: relative;
    text-align: center;
    width: 100%;
    margin: 20px 0 0 0;
    font-size: 32pt;
    font-weight: bold;
    color: #55a;
}
@keyframes hire-title {
    0% { opacity: 0; transform: translateY(-8px); text-shadow: 0 10px 5px transparent; }
    3% { opacity: 1; transform: translateY(0); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
}
.hire-title > span {
    display: inline-block;
    animation: hire-title linear 1s forwards paused;
}
@keyframes show-contact {
    0% { visibility: hidden; opacity: 0; transform: translateY(-20px); }
    4% { visibility: visible; opacity: 1; transform: translateY(0); }
}
.hire-subtitle {
    font-size: 16pt;
    font-weight: normal;
    text-align: center;
    color: #88d;
    animation: show-contact linear 1s forwards paused;
}
.contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 90vw;
    animation: show-contact linear 1s forwards paused;
}
@keyframes contact-form-shaking {
    0% { transform: translateX(0); }
    10% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    70% { transform: translateX(-10px); }
    90% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}
.contact-form-shaking {
    animation-delay: unset !important;
    animation: contact-form-shaking ease-in-out .25s forwards;
}
@keyframes contact-form-submitted {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); }
}
.contact-form-submitted {
    animation-delay: unset !important;
    animation: contact-form-submitted ease-in-out .4s forwards;
}
.contact-form-error {
    padding: 0 20px;
    width: calc(100% - 40px);
    max-height: 0;
    color: #a00;
    background: #faa;
    overflow: hidden;
    transition: max-height .4s ease-in-out, padding .4s ease-in-out;
}
.contact-form-error.shown {
    padding: 10px 20px;
    max-height: 100px;
}
.contact-form-feedback {
    position: absolute;
    top: 50%;
    align-items: center;
    font-size: 38pt;
    font-weight: lighter;
    color: #88d;
    transform: scale(1.2);
    opacity: 0;
    transition: all .5s .4s ease-in-out;
}
.contact-form-feedback.shown {
    opacity: 1;
    transform: scale(1);
}
.contact-form > label {
    color: #88d;
    font-size: 12pt;
    width: 100%;
    margin: 10px 0 5px 10px;
}
.contact-form > input {
    width: calc(100% - 20px);
    margin: 0;
    padding: 10px;
    font-size: 12pt;
    border: none;
    background: #fff;
    outline: 0 solid transparent;
    border-radius: 5px;
    transition: outline .2s ease-in-out;
}
.contact-form > textarea {
    flex: 1;
    margin: 5px 0;
    padding: 10px;
    min-width: 500px;
    max-width: 100%;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Verdana, sans-serif;
    font-size: 12pt;
    background: #fff;
    outline: 0 solid transparent;
    border: none;
    border-radius: 5px;
    resize: horizontal;
    transition: outline .2s ease-in-out;
}
.contact-form > *:focus { outline: 4px solid rgba(180, 180, 255, .75); }
.contact-form > button {
    --color: #94c;
    width: 100%;
    font-size: 16pt;
    color: var(--color);
    background: #0000;
    margin: 10px auto 15px 0;
    border-radius: 30px;
    border: 2px solid var(--color);
    padding: 10px 25px;
    cursor: pointer;
    user-select: none;
    outline: 0 solid transparent;
    transition: all ease-in-out .15s;
}
.contact-form > button:hover, .contact-form > button:focus {
    background: var(--color);
    color: #fff;
}
.contact-form > button:active {
    --bg-color: #88f;
    box-shadow: 0 0 10px inset #0006;
    transition: all ease-in-out .05s;
}

footer {
    padding: 20px 10px;
    background: #eee;
}
footer > section {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}
footer > section > a > img {
    display: block;
    width: 64px;
    height: 64px;
    padding: 0 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100px;
    opacity: .9;
    transform: scale(1);
    transition: transform .1s ease-in-out, opacity .1s ease-in-out;
}
footer > section > a > img:hover, footer > section > a:focus > img { transform: scale(1.15); opacity: 1; }
footer > section > a > img:active { transform: scale(1); }
footer > p {
    font-size: 10pt;
    text-align: center;
    margin: 0;
    color: #666;
}

@media (max-width: 85vh) {
    header { padding: 0; }

    @keyframes me {
        0% { border-radius: 0; bottom: 0}
        10% { background-position: 90% 0; }
        20%, 100% { border-radius: 1000px; width: 200px; height: 200px; background-position: 90% -5%; background-size: 250px; }
        40%, 100% { left: 50%; margin-left: -100px; width: 200px; height: 200px; bottom: -320px; border-radius: 100px; }
        100% { box-shadow: 0 0 100px rgba(0, 0, 0, .5); }
    }
    .me {
        background-size: 40vw;
        width: 40vw;
        height: 75vw;
        left: 60vw;
        z-index: 1;
        animation: me ease-in-out 1s forwards paused;
    }

    .about-content {
        padding-left: 0;
        padding-top: 240px;
    }
    @keyframes about-text {
        0%, 40% { opacity: 0; transform: translateY(-50px); }
        45%, 100% { opacity: 1; transform: translateY(0); }
    }

    a.project-button {
        font-size: 36pt;
        padding: 30px 80px;
        margin: 40px 0 10vw 0;
        border-width: 4px;
    }

    @keyframes epistellar-description {
        0% { top: 100vh; }
        30% { opacity: 0; }
        33.33%, 65.66% { top: 0; }
        40% { opacity: 1; }
        100% { opacity: 1; top: -100vh; }
    }
    .epistellar-description {
        position: fixed;
        top: 100vh;
        left: 0;
        right: 0;
        clip-path: none;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        padding: 0 60px;
        margin: 0;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            transparent 20%,
            #0008 100%
        );
    }
    .epistellar-text {
        flex: 0;
        text-align: left;
    }
    .epistellar-button { flex: 0; }

    @keyframes volidance-description {
        0%, 50% { opacity: 0; transform: scale(1.1); }
        60%, 100% { opacity: 1; transform: scale(1); }
    }
    .volidance-description {
        position: absolute;
        height: 80vh;
        width: 80%;
        align-items: stretch;
        padding: 0 10%;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            #000c 30%,
            #000c 70%,
            transparent 100%
        );
    }
    .volidance-text {
        text-align: left;
        text-shadow: rgba(0, 0, 0, .4) 0 2px 0;
    }
    .volidance-description { margin: 0; }
    a.volidance-button {
        width: 100%;
        margin: 0 0 40px 0;
    }
    .project-tooltip { display: none; }

    .sogeti-content {
        padding: 20px 10%;
    }
    .sogeti-fields {
        flex-direction: column;
        margin: 80px 0;
        max-height: 60vh;
    }

    .sogeti-field { margin: 10px 0; }

    @keyframes coaching-image {
        0% { left: 100vw; }
        40% { left: -50px; }
        100% { left: -200px; }
    }
    @keyframes coaching-text {
        0% { left: 0; }
        0%, 20% { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0); }
        38% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
        40% { left: 350px; }
        100% { left: 200px; }
    }
    .coaching-image {
        width: 50vw;
        height: 500px;
    }

    @keyframes hire-box {
        0% { top: 100vh; }
        33.33%, 66.66% { top: 0; }
        100% { top: -100vh; }
    }
    .contact-form { width: 100%; }
    .contact-form > textarea {
        flex: 0;
        width: 100%;
        min-height: 20%;
        font-size: 8pt;
        resize: none;
    }
}