/** 
 * Idea and code by: Annalogue Codes <hello@annalogue.codes>
 * 
 * (Please give me a note if you reuse my code. Thank you!)
 * 
 * SPDX-License-Identifier: MIT
 * SPDX-FileCopyrightText: Annalogue Codes <hello@annalogue.codes>
 */

/**
 * Constants
 */

:root {
    --responsive-width-min: 400;
    --responsive-width-max: 1500;
    --responsive-width-minpx: calc(var(--responsive-width-min) * 1px);
    --responsive-width-maxpx: calc(var(--responsive-width-max) * 1px);

    --responsive-height-min: 400;
    --responsive-height-max: 1500;
    --responsive-height-minpx: calc(var(--responsive-width-min) * 1px);
    --responsive-height-maxpx: calc(var(--responsive-width-max) * 1px);

    /* Width relative to given minimum and maximum */
    --width-rel-minmax-free:
        max( 0px,
             (100vw - var(--responsive-width-minpx)) /
                 (var(--responsive-width-max) - var(--responsive-width-min))
        );
    --width-rel-minmax: clamp(0px, var(--width-rel-minmax-free), 1px );
 
    --fontsize-min: 15;
    --fontsize-max: 24;
    --fontsize-minpx: calc(var(--fontsize-min) * 1px);
    --fontsize-maxpx: calc(var(--fontsize-max) * 1px);

    --font-size: calc( var(--fontsize-minpx)
                     + ( var(--fontsize-max) - var(--fontsize-min)
                       ) * var(--width-rel-minmax)
                     );

    --baseline: calc( 1.5 * var(--font-size) );
    
    --grow-small-free: calc( var(--fontsize-minpx) + (1.1 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax-free) );
    --grow-normal-free: calc( var(--fontsize-minpx) + (1.25 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax-free) );
    --grow-large-free: calc( var(--fontsize-minpx) + (1.5 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax-free) );
    --grow-larger-free: calc( var(--fontsize-minpx) + (2 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax-free) );
    --grow-huge-free: calc( var(--fontsize-minpx) + (5 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax-free) );

    --grow-larger-free-from-zero: calc( 2 * var(--fontsize-max) * var(--width-rel-minmax-free) );
    --grow-huge-free-from-zero: calc( 5 * var(--fontsize-max) * var(--width-rel-minmax-free) );

    --grow-smaller: calc( var(--fontsize-minpx) + (0.9 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-small: calc( var(--fontsize-minpx) + (1.1 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-normal: calc( var(--fontsize-minpx) + (1.25 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-large: calc( var(--fontsize-minpx) + (1.5 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-larger: calc( var(--fontsize-minpx) + (2 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-3: calc( var(--fontsize-minpx) + (3 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-4: calc( var(--fontsize-minpx) + (4 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );
    --grow-huge: calc( var(--fontsize-minpx) + (5 * var(--fontsize-max) - var(--fontsize-min)) * var(--width-rel-minmax) );

    --grow-normal-from-zero: calc( 1.25 * var(--fontsize-max) * var(--width-rel-minmax) );
    --grow-huge-from-zero: calc( 5 * var(--fontsize-max) * var(--width-rel-minmax) );

    --size-smaller: 0.5;
    --size-small: 0.75;
    --size-normal: 1;
    --size-medium: 2;
    --size-large: 3.25;
    --size-larger: 4;
    --size-huge: 5;

    --responsive-margin-tinier: calc( 0.2 * var(--grow-small-free) );
    --responsive-margin-tiny: calc( 0.35 * var(--grow-large-free) );
    --responsive-margin-smaller: calc( 0.2 * var(--grow-huge-free) );
    --responsive-margin-small: var(--grow-small-free);
    --responsive-margin-medium: var(--grow-larger-free);
    --responsive-margin-large: var(--grow-huge-free);

    --responsive-margin-medium-from-zero: var(--grow-larger-free-from-zero);
    --responsive-margin-large-from-zero: var(--grow-huge-free-from-zero);

    --mod-scale-factor-min: calc( 1 / 1.2);
    --mod-scale-factor-max: calc( 1 / 1.2 );
    --mod-scale-factor-min2: calc( var(--mod-scale-factor-min)
                                 * var(--mod-scale-factor-min) );
    --mod-scale-factor-max2: calc( var(--mod-scale-factor-max)
                                 * var(--mod-scale-factor-max) );
    --mod-scale-factor-min3: calc( var(--mod-scale-factor-min)
                                 * var(--mod-scale-factor-min2) );
    --mod-scale-factor-max3: calc( var(--mod-scale-factor-max)
                                 * var(--mod-scale-factor-max2) );
    --mod-scale-factor-min4: calc( var(--mod-scale-factor-min)
                                 * var(--mod-scale-factor-min3) );
    --mod-scale-factor-max4: calc( var(--mod-scale-factor-max)
                                 * var(--mod-scale-factor-max3) );
    --mod-scale-factor-min5: calc( var(--mod-scale-factor-min)
                                 * var(--mod-scale-factor-min4) );
    --mod-scale-factor-max5: calc( var(--mod-scale-factor-max)
                                 * var(--mod-scale-factor-max4) );
    --mod-scale-factor-min6: calc( var(--mod-scale-factor-min)
                                 * var(--mod-scale-factor-min5) );
    --mod-scale-factor-max6: calc( var(--mod-scale-factor-max)
                                 * var(--mod-scale-factor-max5) );

    --size-h1-factor: 2;
    --size-h1: calc( var(--size-h1-factor) * var(--font-size) );
    --size-h2: calc( var(--size-h1-factor) *
        ( var(--mod-scale-factor-min) * var(--fontsize-minpx)
        + ( var(--mod-scale-factor-max) * var(--fontsize-max)
          - var(--mod-scale-factor-min) * var(--fontsize-min)
          ) * var(--width-rel-minmax)
        )
    );
    --size-h3: calc( var(--size-h1-factor) *
        ( var(--mod-scale-factor-min2) * var(--fontsize-minpx)
        + ( var(--mod-scale-factor-max2) * var(--fontsize-max)
          - var(--mod-scale-factor-min2) * var(--fontsize-min)
          ) * var(--width-rel-minmax)
        )
    );
    --size-h4: calc( var(--size-h1-factor) *
        ( var(--mod-scale-factor-min3) * var(--fontsize-minpx)
        + ( var(--mod-scale-factor-max3) * var(--fontsize-max)
          - var(--mod-scale-factor-min3) * var(--fontsize-min)
          ) * var(--width-rel-minmax)
        )
    );
    --size-h5: calc( var(--size-h1-factor) *
        ( var(--mod-scale-factor-min4) * var(--fontsize-minpx)
        + ( var(--mod-scale-factor-max4) * var(--fontsize-max)
          - var(--mod-scale-factor-min4) * var(--fontsize-min)
          ) * var(--width-rel-minmax)
        )
    );
    --size-h6: calc( var(--size-h1-factor) *
        ( var(--mod-scale-factor-min5) * var(--fontsize-minpx)
        + ( var(--mod-scale-factor-max5) * var(--fontsize-max)
          - var(--mod-scale-factor-min5) * var(--fontsize-min)
          ) * var(--width-rel-minmax)
        )
    );

    /**
     * Colors
     */

    /* CSS HEX */
    --rich-black-fogra-29: #001219ff;
    --blue-sapphire: #005f73ff;
    --petrol: #005F73;
    --viridian-green: #0a9396ff;
    --middle-blue-green: #94d2bdff;
    --medium-champagne: #e9d8a6ff;
    --gamboge: #ee9b00ff;
    --alloy-orange: #ca6702ff;
    --rust: #bb3e03ff;
    --rufous: #ae2012ff;
    --ruby-red: #9b2226ff;

    /* CSS Gradient */
    --gradient-top: linear-gradient(0deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-right: linear-gradient(90deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-bottom: linear-gradient(180deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-left: linear-gradient(270deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-top-right: linear-gradient(45deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-bottom-right: linear-gradient(135deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-top-left: linear-gradient(225deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-bottom-left: linear-gradient(315deg, #001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);
    --gradient-radial: radial-gradient(#001219ff, #005f73ff, #0a9396ff, #94d2bdff, #e9d8a6ff, #ee9b00ff, #ca6702ff, #bb3e03ff, #ae2012ff, #9b2226ff);

    /* CSS HSL */
        --ivory: hsl(60, 100%, 97%);
        --ivory-pale: hsl(60, 100%, 98%);
        --ivory-darker: hsl(60, 100%, 97%, 60%);
    /*
     *  --rich-black-fogra-29: hsla(197, 100%, 5%, 1);
     *  --blue-sapphire: hsla(190, 100%, 23%, 1);
     *  --viridian-green: hsla(181, 88%, 31%, 1);
     *  --middle-blue-green: hsla(160, 41%, 70%, 1);
     *  --medium-champagne: hsla(45, 60%, 78%, 1);
     *  --gamboge: hsla(39, 100%, 47%, 1);
     *  --alloy-orange: hsla(30, 98%, 40%, 1);
     *  --rust: hsla(19, 97%, 37%, 1);
     *  --rufous: hsla(5, 81%, 38%, 1);
     *  --ruby-red: hsla(358, 64%, 37%, 1);
     */

    --color-emph: var(--viridian-green);
}


/*
 * Basic styles
 */

* {
    box-sizing: border-box;

    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: JosefinSans, sans-serif;
    font-weight: 400;
    font-size: var(--font-size);
    line-height: var(--baseline);
}
@media (orientation: landscape) {
    html, body {
        font-weight: 300;
    }
}

p {
    line-height:   var(--baseline);
    margin-bottom: var(--baseline);
}
p:nth-child(1) {
    margin-top: 0;
}

h1 {
    font-size: var(--size-h1);
}
h2 {
    font-size: var(--size-h2);
}
h3 {
    font-size: var(--size-h3);
}
h4 {
    font-size: var(--size-h4);
}
h5 {
    font-size: var(--size-h5);
}
h6 {
    font-size: var(--size-h6);
}
h1, h2, h3, h4, h5, h6 {
    --line-height: 1em;
    line-height: var(--line-height);

    font-weight: 300;

    margin-top:    calc( 2 * var(--baseline) - var(--line-height) );
    margin-bottom: var(--baseline);
}

a:link,
a:visited {
    color: var(--color-emph);
    text-decoration: none;
}



/**
 * General Animations
 */

@keyframes fadeIn {
    0%    { visibility: hidden;  opacity: 0; }
    1%    { visibility: visible; opacity: 0; }
    100%  { visibility: visible; opacity: 1; }
}
@keyframes fadeOut {
    0%    { visibility: visible; opacity: 1; }
    99%   { visibility: visible; opacity: 0; }
    100%  { visibility: hidden;  opacity: 0; }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        text-shadow:
/*
            rgba(255,255,255,0)   0.0px  60.0px,
            rgba(255,255,255,0)  60.0px   0.0px,
            rgba(255,255,255,0) -60.0px   0.0px,
            rgba(255,255,255,0)   0.0px -60.0px,
            rgba(255,255,255,0) -42.0px -42.0px,
            rgba(255,255,255,0)  42.0px  42.0px,
            rgba(255,255,255,0)  42.0px -42.0px,
            rgba(255,255,255,0) -42.0px  42.0px;
*/
            rgba(255,255,240,0)   0.0px  60.0px,
            rgba(255,255,240,0)  60.0px   0.0px,
            rgba(255,255,240,0) -60.0px   0.0px,
            rgba(255,255,240,0)   0.0px -60.0px,
            rgba(255,255,240,0)  30.0px  52.0px,
            rgba(255,255,240,0)  30.0px -52.0px,
            rgba(255,255,240,0) -30.0px  52.0px,
            rgba(255,255,240,0) -30.0px -52.0px,
            rgba(255,255,240,0)  52.0px  30.0px,
            rgba(255,255,240,0)  52.0px -30.0px,
            rgba(255,255,240,0) -52.0px  30.0px,
            rgba(255,255,240,0) -52.0px -30.0px;
    }

    30% {
        transform: scale(0.98);
        text-shadow:
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px,
            rgba(255,255,240,0) 0px 0px;
    }

    31% {
        transform: scale(0.98);
        text-shadow:
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px,
            rgba(255,255,240,0.15) 0px 0px;
    }

    100% {
        transform: scale(1);
        text-shadow:
/*
            rgba(255,255,255,0)   0.0px  60.0px,
            rgba(255,255,255,0)  60.0px   0.0px,
            rgba(255,255,255,0) -60.0px   0.0px,
            rgba(255,255,255,0)   0.0px -60.0px,
            rgba(255,255,255,0) -42.0px -42.0px,
            rgba(255,255,255,0)  42.0px  42.0px,
            rgba(255,255,255,0)  42.0px -42.0px,
            rgba(255,255,255,0) -42.0px  42.0px;
*/
            rgba(255,255,240,0)   0.0px  60.0px,
            rgba(255,255,240,0)  60.0px   0.0px,
            rgba(255,255,240,0) -60.0px   0.0px,
            rgba(255,255,240,0)   0.0px -60.0px,
            rgba(255,255,240,0)  30.0px  52.0px,
            rgba(255,255,240,0)  30.0px -52.0px,
            rgba(255,255,240,0) -30.0px  52.0px,
            rgba(255,255,240,0) -30.0px -52.0px,
            rgba(255,255,240,0)  52.0px  30.0px,
            rgba(255,255,240,0)  52.0px -30.0px,
            rgba(255,255,240,0) -52.0px  30.0px,
            rgba(255,255,240,0) -52.0px -30.0px;
    }
}

/**
 * General styles
 */

html {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    height: 100%;
    width: 100%;
    min-width: 20rem;
    position: relative;
}

.fullheight {
    height: 100%;
}
.fullheight-viewport {
    height: 100vh;
}
.almostfullheight {
    height: calc( 100vh - 1.6rem );
    min-height: 40rem;
}
@media (orientation: landscape) {
    .almostfullheight {
        min-height: 28rem;
    }
}

.almosttwiceheight {
    height: calc( 200vh - 1.6rem );
}

.pulse {
    text-shadow:
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px,
        rgba(255,255,240,0) 0px 0px;
    transform: scale(1);
    animation: pulse 6s infinite 4s;
}

/**
 * header
 */

#header {
    position: fixed;
    top: 0;

    width: 100%;
    min-width: inherit;

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    z-index: 4;

    /* fix header blocking the nav items */
    pointer-events: none;

    padding: var(--responsive-margin-medium);
    background: none;
    transition: background 0.8s ease-in-out, padding 1s ease-in-out;
}
#header.smaller {
    padding-top   : var(--responsive-margin-tinier);
    padding-bottom: var(--responsive-margin-tinier);

    background: rgba(0, 0, 0, 0.3);
    transition: background 1s ease-in-out 0.5s, padding 1s ease-in-out;
}
.navigation.active ~ #header.smaller {
    background: none;
    transition: background 0.8s ease-in-out;
}

#brand {
    flex: 0 0 auto;
    width: max-content;

    /* font-family: Agnes, sans-serif; */
    font-family: Poppins-ExtraLight, sans-serif;
    letter-spacing: 0.6em;
    line-height: 1.1;
    text-transform: uppercase;

    display: flex;
    align-items: center;

    color: rgba(255,255,240,0.9);
    transition: color 1.0s ease;
}
.navigation.active ~ #header > #brand {
    color: black;
}

#brand a {
    pointer-events: initial;
    margin: 0;
    display: flex;
    align-items: center;
    color: inherit;
}
#logo {
    /* width: calc( var(--size-large) * var(--grow-large) ); */
    --logo-width-base: calc( var(--size-normal) * var(--grow-normal) );
    width: calc( 3.5 * var(--logo-width-base) );
    aspect-ratio: 1 / 1;
    transition: width 1s ease-in-out 0s;
/*
    border-radius: 100%;
    box-shadow: 0px 0px 8px 3px rgba(3, 20, 76, 0);
    transition: box-shadow 0.5s linear;
*/
}
#header.smaller #logo {
    --logo-width-base: calc( var(--size-smaller) * var(--grow-smaller) );
    transition: width 1s ease-in-out 0s;
}
#name {
    display: inline-block;
    margin-left: 0.8em;
    font-size: calc( var(--size-normal) * var(--grow-small) );
    transition: font-size 1s ease-in-out 0s, font-weight 1s ease-in-out 0s;
}
#header.smaller #name {
    font-size: calc( 0.9 * var(--size-small) * var(--grow-smaller) );
    font-weight: 700;
    transition: font-size 1s ease-in-out 0s, font-weight 1s ease-in-out 0s;
}
/*
.navigation.active ~ #header > .brand .logo {
    box-shadow: 0px 0px 8px 5px rgba(3, 20, 76, 0);
}
*/

/**
 * Burger
 */

.burger {
    --burger-size: calc( var(--size-medium) * var(--grow-normal) );

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.burger:focus {
    outline: none !important;
}
#header.smaller .burger {
    --burger-size: calc( var(--size-medium) * var(--grow-smaller) );
}
.burger {
    display: block;
    position: relative;

    /* make burger pointable after header nav item fix */
    pointer-events: initial;

    /* width: 3.25rem; */
    /* --burger-size: 1.8em; */
    width: var(--burger-size);
    aspect-ratio: 1 / 1;

    cursor: pointer;
    margin-right: 1vw;
    transition: width 1s ease-in-out;
}
.burger > span {
    display: block;
    height: 2px;
    width: 60%;
    left: 20%;

    color: rgba(255, 255, 240, 0.8);
    background-color: currentColor;
    position: absolute;

    transform-origin: center;

    transition-duration: 86ms;
    transition-property: background-color, opacity, transform;
    transition-timing-function: ease-out;

    transition: color 0.5s, transform 0.5s, opacity 0.5s, top 1s ease-in-out;
}
.burger:hover > span {
    color: rgba(255, 255, 255, 1);
}
.burger > span:nth-child(1) {
    top: calc(50% - 0.2 * var(--burger-size) - 1px);
}
.burger > span:nth-child(2) {
    top: calc(50% - 1px);
}
.burger > span:nth-child(3) {
    top: calc(50% + 0.2 * var(--burger-size) - 1px);
}
.burger.active span:nth-child(1) {
    transform: translateY( calc(0.2 * var(--burger-size)) ) rotate(45deg);
    color: rgba(0, 0, 0, 1);
}
.burger.active span:nth-child(2) {
    opacity: 0;
}
.burger.active span:nth-child(3) {
    transform: translateY( calc( -0.2 * var(--burger-size)) ) rotate(-45deg);
    color: rgba(0, 0, 0, 1);
}

/**
 * Center Dots
 */

.cross {
    position: fixed;
    display: block;

    left: 50vw;

    /* bottom: 2rem; */
    /* margin-left: -2.5rem; */
    /* width: 5rem; */
    /* height: 5rem; */

    bottom: 2rem;
    margin-left: -2.0rem;
    width: 4rem;
    height: 4rem;

    z-index: 5;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    transition: width 1s ease-in-out, height 1s ease-in-out, bottom 1s ease-in-out, margin 1s ease-in-out;
}
.cross:focus {
    outline: none !important;
}

#header.smaller ~ .cross {
    width: 4rem;
    height: 4rem;
    bottom: 2.5rem;
    margin-left: -2rem;
}
@media (orientation: landscape) {
    .cross {
        bottom: 1.5rem;
        display: none;
    }
    #header.smaller ~ .cross {
        bottom: 2.0rem;
    }
}

.cross path {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    --length: 0;
    --offset: -50;
    stroke-dasharray: var(--length) var(--total-length);
    stroke-dashoffset: var(--offset);
    transition: all .8s cubic-bezier(.645, .045, .355, 1);
}
.cross circle {
    fill: #fff2;
    /* fill: #aaa2; */
    stroke: #0002;
  /* opacity: 0; */
  /* transition: opacity 0.5s ease; */
    transition: fill 0.8s ease 0s;
}
.cross:hover circle,
.cross:focus circle {
    fill: #fff3;
    /* fill: #aaa3; */
}

.navigation.active ~ .cross path {
    stroke: #000;
}
.navigation.active ~ .cross circle {
    fill: #0002;
    transition: fill 0.8s ease 0.5s;
}
/*
.cross label:hover circle {
  opacity: 1;
}
*/

.cross svg .line--1,
.cross svg .line--3 {
    --total-length: 126.64183044433594;
}
.cross svg .line--2 {
    --total-length: 70;
}

.cross.active svg .line--1,
.cross.active svg .line--3 {
    --length: 22.627416998;
}
.cross.active svg .line--2 {
    --length: 0;
}
.cross.active svg .line--1,
.cross.active svg .line--3 {
      --offset: -94.1149185097;
}
.cross.active svg .line--2 {
      --offset: -50;
}


/**
 * Navigation
 */

.navigation {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    width: 100%;

    top: 0;
    left: 0;
    background: rgba(255, 255, 250, 0.94);

    overflow-y: scroll;

    visibility: hidden;
    opacity: 0;
    height: 0px;
    transition: height 0.5s ease-in 0s, opacity 0.4s linear 0.1s, visibility 0s linear 0.5s;
}
.navigation.active {
    visibility: visible;
    opacity: 1;
    height: 100vh;
    transition: height 0.7s ease-in-out 0s, opacity 0.5s linear 0s, visibility 0s linear 0s;
}

.navigation > nav {
    display: grid;
    place-items: center;
    /* justify-content: space-between;     */
    grid-template-columns: 1fr;
}
@media (orientation: landscape) {
    .navigation > nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .navigation > nav .contact {
        grid-column: 1 / 3;
    }
}
.navigation > nav a {
    display: flex;
    align-items: center;
    position: relative;
    font-size: var(--size-h3);
    color: inherit;
    width: 12em;
    height: 2.8em;
    text-align: center;
    padding: 1em 2em;

    top: 1em;
    opacity: 0;
    transition: top 0.5s ease-in-out 0s, opacity 0.5s linear 0.1s, transform 0.2s ease 0s;
}
.navigation.active > nav a {
    top: -1em;
    opacity: 1;
}
.navigation.active > nav div:nth-child(1) a:nth-child(1) {
    transition: top 0.8s ease-in-out 0.7s, opacity 0.8s linear 0.7s, transform 0.2s ease 0s;
}
.navigation.active > nav div:nth-child(1) a:nth-child(2) {
    transition: top 0.8s ease-in-out 0.8s, opacity 0.8s linear 0.8s, transform 0.2s ease 0s;
}
.navigation.active > nav div:nth-child(1) a:nth-child(3) {
    transition: top 0.8s ease-in-out 0.9s, opacity 0.8s linear 0.9s, transform 0.2s ease 0s;
}
.navigation.active > nav div:nth-child(2) a:nth-child(1) {
    transition: top 0.8s ease-in-out 1.0s, opacity 0.8s linear 1.0s, transform 0.2s ease 0s;
}
.navigation.active > nav div:nth-child(2) a:nth-child(2) {
    transition: top 0.8s ease-in-out 1.1s, opacity 0.8s linear 1.1s, transform 0.2s ease 0s;
}
.navigation.active > nav div:nth-child(2) a:nth-child(3) {
    transition: top 0.8s ease-in-out 1.2s, opacity 0.8s linear 1.2s, transform 0.2s ease 0s;
}
.navigation.active > nav > a:nth-child(3) {
    transition: top 0.8s ease-in-out 1.3s, opacity 0.8s linear 1.3s, transform 0.2s ease 0s;
}

.navigation > nav a > span {
    margin: 0 auto;
    display: block;
    transform: scale(1.0);
    opacity: 0.6;
    transition: opacity 0.4s linear 0s, transform 0.4s ease 0s;
}
.navigation > nav a:hover > span,
.navigation > nav a:focus > span {
    transform: scale(1.2);
    opacity: 1;
}

@media (orientation: landscape) {
    .navigation > nav a {
        height: 3.2em;
    }
    .navigation > nav > a {
        margin-top: 1em;
    }
    .navigation.active > nav div:nth-child(1) a:nth-child(1),
    .navigation.active > nav div:nth-child(2) a:nth-child(1) {
        transition: top 0.8s ease-in-out 0.7s, opacity 0.8s linear 0.7s, transform 0.2s ease 0s;
    }
    .navigation.active > nav div:nth-child(1) a:nth-child(2),
    .navigation.active > nav div:nth-child(2) a:nth-child(2) {
        transition: top 0.8s ease-in-out 0.8s, opacity 0.8s linear 0.8s, transform 0.2s ease 0s;
    }
    .navigation.active > nav div:nth-child(1) a:nth-child(3),
    .navigation.active > nav div:nth-child(2) a:nth-child(3) {
        transition: top 0.8s ease-in-out 0.9s, opacity 0.8s linear 0.9s, transform 0.2s ease 0s;
    }
    .navigation.active > nav > a:nth-child(3) {
        transition: top 0.8s ease-in-out 1.0s, opacity 0.8s linear 1.0s, transform 0.2s ease 0s;
    }

    .navigation > nav a::after {
        background-color: currentColor;
        width: 1.5em;
        height: 1px;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 0.5em;
        transform: scaleX(0);
        transition: all 0.4s ease;
        position: absolute;
        content: '';
    }
    .navigation > nav a.interactive::after {
        bottom: 0em;
    }
    .navigation > nav a:hover::after {
        transform: scaleX(1);
    }
}

/**
 * Hero
 */

.hero {
    /* padding-top: calc( 2.5 * var(--size-normal) * var(--grow-smaller) ); */
    padding-top: calc( 3 * var(--size-normal) * var(--grow-smaller) );
    width: 100%;
    min-width: inherit;
    position: relative;
}


/**
 * Slides
 */

.slides {
    display: block;
    width: 100%;
    height: 100%;
    background-color: black;
}
.slides.no-content {
    position: absolute;
    z-index: -1;
}

.slides > .slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
    */

    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
}
.slides > .slide:nth-child(1) {
    visibility: visible;
    opacity: 1;
}

.slides > .slide.show {
    visibility: visible;
    opacity: 1;
    animation: fadeIn  2s linear 0s 1 normal both;
}
.slides > .slide.hide {
    visibility: hidden;
    opacity: 0;
    animation: fadeOut 2s linear 0s 1 normal both;
}
.slides > .overlay1,
.overlay2 {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.slides > .overlay1 {
	background: linear-gradient(to top, #b224ef, #7579ff);
	opacity: 0.5;
}
.slides > .overlay2 {
    background: rgba(0, 0, 0, 0.5);
}



/**
 * Scrolling and Snapping
 */

html {
    scroll-snap-type: y proximity;
}
#home, #services, #web, #apps, #interactive, #print, #photo, #training, #contact, #testbed {
    scroll-snap-align: start;
    /* scroll-snap-stop: always; */
    /* scroll-snap-stop: normal; */
}

.scroll-disabled {
    overflow-y: hidden;
}


/**
 * Sections
 */
section {
    z-index: 0;
    position: relative;
    padding-left:  var(--responsive-margin-large-from-zero);
    padding-right: var(--responsive-margin-large-from-zero);
    display: flex;
    place-items: center;
}
section > .wrapper {
    height: 100%;
    max-height: 80rem;
    max-width: 80rem;
    margin: 0 auto;
}
@media (orientation: landscape) {
    section > .wrapper {
        max-height: 40rem;
    }
}
section h1 {
    margin: 0 0.2em;
}
section .content {
    position: relative;
    width: 100%;
    height: calc(100% - 5rem);

    display: grid;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: space-between;
}
section .content > a:link {
    position: relative;
    max-height: calc(100% - var(--grow-4));
    max-width:  calc(100% - var(--grow-4));
    min-height: 3em;
    min-width: 3em;
    display: flex;
}
section .polaroid {
    position: relative;

    display: grid;
    grid-template-rows: calc(100% - 1.5em - var(--grow-normal-from-zero)) calc(1.5em + var(--grow-normal-from-zero));
    /* grid-template-rows: calc(100% - 3em) 3em; */
    grid-template-columns: 100%;

    align-items: stretch;
    justify-items: center;

    font-size: var(--size-h4) ;
    color: inherit;
}
section .polaroid img {
    position: relative;
    object-fit: contain;
    width: 70%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
}
section .polaroid span {
    display: inline-flex;
    align-items: end;
    text-align: center;
    padding: 0;
}

/**
 * home
 */
#home {
    color: rgba(255,255,240,0.9);
    /* letter-spacing: 15px; */
    letter-spacing: 0.45em;
    /* font-weight: 300; */

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    text-align: center;

    z-index: 0;
}
#home > .content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;

    flex: 1 1 0px;
}
#home > .content > div {
    margin: 0 var(--responsive-margin-large);
    flex: 1 1 0px;
}
#home h2.subtitle {
    text-align: center;
    padding: 0 1rem 3rem 1rem;
    font-family: Poppins-ExtraLight, sans-serif;
    font-size: var(--size-h3);
    line-height: 1.1;
    color: rgba(255,255,240,0.9);
    text-transform: uppercase;
    letter-spacing: 0.6em;
}

.frame {
    border: 1px solid rgba(255, 255, 240, 0.3);
    /* border: 1px solid rgba(255, 220, 115, 0.3); */
    position: absolute;
    top: var(--responsive-margin-tiny);
    right: var(--responsive-margin-tiny);
    bottom: var(--responsive-margin-tiny);
    left: var(--responsive-margin-tiny);
}

/**
 * services
 */
#services {
/*
    background: #005F73;
*/
    background: #FFFFF0;
}
#services h1 {
    text-align: center;
    margin-bottom: 0;
}
@media (orientation: landscape) {
    #services h1 {
        margin-bottom: 1em;
    }
}

#services .content {
    grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 
        "explainer explainer"
        "visual visual"
        "visual visual"
        "visual visual";
}
#services .explainer {
    padding: 0 1.5em;
    grid-area: explainer;
}

@media (orientation: landscape) {
    #services .content {
        height: calc(100% - 3.5rem);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas: 
            "explainer visual visual visual"
            "explainer visual visual visual";
    }
    #services .explainer {
        position: relative;
        top: 0;
        flex: 1 1 0px;

        padding: 0 0 4em 0;
    }
}

/**
 * web
 */
#web {
    background: #EE9B00;
}
#web .content {
    grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 
        "explainer explainer"
        "examples examples"
        "examples examples";
}
#web .explainer {
    padding: 0 1.5em;
    grid-area: explainer;
    align-self: center;
}
@media (orientation: landscape) {
  #web .content {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: 
        "explainer examples examples"
        "explainer examples examples";
  }
    #web .explainer {
        padding: 0;
    }
}


/**
 * apps
 */
#apps {
    background: #94D2BD;
}

#apps .content {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 
        "examples examples"
        "explainer explainer"
        "examples2 examples2";
}
#apps .explainer {
    padding: 0 1.5em;
    grid-area: explainer;
    align-self: center;
}
@media (orientation: landscape) {
  #apps .content {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: 
        "examples explainer examples2"
        "examples explainer examples2";
  }
    #apps .explainer {
        padding: 0;
    }
}
/**
 * interactive
 */
#interactive {
    background: #005F73;
    color: #fffff0;
}

#interactive .content {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 
        "examples examples"
        "explainer explainer"
        "examples2 examples2";
}
#interactive .explainer {
    padding: 0 1.5em;
    grid-area: explainer;
    align-self: center;

    text-align: center;
}
#interactive .explainer a:link,
#interactive .explainer a:visited {
    color: #fffff0;
    font-weight: 700;
}
#interactive .explainer a:link div,
#interactive .explainer a:visited div {
    padding: 0 0 0.5em 0;
    transition: transform 0.3s ease-in-out;
}
#interactive .explainer a:link:hover div,
#interactive .explainer a:visited:hover div {
    transform: scale(1.01);
}
@media (orientation: landscape) {
  #interactive .content {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: 
        "examples explainer examples2"
        "examples explainer examples2";
  }
    #interactive .explainer {
        padding: 0;
    }
}
/**
 * print
 */
#print {
    /* background: #E9D8A6; */
    background: #FFFFF0;
}

#print .content {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 
        "examples examples"
        "explainer explainer"
        "examples2 examples2";
    place-items: start center;
}
#print .explainer {
    padding: 0 1.5em;
    grid-area: explainer;
    align-self: center;
    text-align: center;
}
#print .visual {
    position: relative;
    width: 100%;
    height: 100%;
}
#print .visual img {
    position: relative;
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
#print .visual span {
    margin: 0;
    padding: 0;
    text-align: center;
}
@media (orientation: landscape) {
  #print .content {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: 
        "examples explainer examples2"
        "examples explainer examples2";
  }
    #print .explainer {
        padding: 0;
    }
}
/**
 * photo
 */
#photo {
    /* background: #EE9B00; */
    background: #7a7472;
}
#photo h1 {
    text-shadow: 2px 2px #aaa;
}

/**
 * training
 */
#training {
    background: #94D2BD;
}

/**
 * contact
 */
#contact {
    background: var(--petrol);
    color: #fffff0;
}
#contact h1 {
    text-align: center;
    margin: 0.5em 0 0 0;
}

#contact .content {
    height: calc(100% - 10rem);
    text-align: center;
}
@media (orientation: landscape) {
    #contact .content {
        height: calc(100% - 8rem);
    }
}
#contact span {
  display: block;
  margin: 1em 0;
}
@media (orientation: landscape) {
  #contact {
    text-align: inherit;
  }
  #contact span {
    display: inline;
  }
  #contact span:not(:last-child):after {
/*
*/
    content: ' •';
    padding: 0 2em;
    color: var(--ivory-darker);
  }
}
#contact a:link,
#contact a:visited {
    color: #fffff0;
    font-weight: inherit;
}

/**
 * testbed
 */
#testbed {
    background: #E9D8A6;
}



/**
 * Sortme
 */

/**
 * Flipping Tiles
 */

.card {
    perspective: 1000px;
}

.card,
.card__inner {
    position: relative; 

    width: 300px;
    height: 320px;
}

.card__inner {
    transition: transform .25s ease-in-out;
  
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
}

.card:hover  .card__inner,
.card:active .card__inner,
.card:focus  .card__inner {
    transform: rotateY(180deg);
}

.card__back {
    transform: rotateY(180deg);
}

.card__front,
.card__back  {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;

    width: 100%;
    height: 100%;

    color: #888;
    background-color: #fff; 

    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}



/*- Misc. -------------------------------------------------------------------*/

.autotype {
    border-right: 0.08em solid #FFE28A;
    animation: blink 1s infinite;
    padding-right: 0.02em;
}
.autotype.typing {
    animation: none;
}
@keyframes blink {
  0%    { border-color: #FFE28A; }
  49%   { border-color: #FFE28A; }
  50%   { border-color: transparent; }
  99%   { border-color: transparent; }
  100%  { border-color: #FFE28A; }
}

.autotype-test-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 1em 2em;
    text-align: center;
    font-size: 1.5em;
    border: 1px solid red;
}




#oldMonitor {
    width: 25%;
    border: 1px solid red;
    /*
     * text-shadow: 0 0 0.13em #00E200;
     */
    text-shadow: 0 0 0.1em #FFE28A;
    color: transparent;
    background: rgb(20, 20, 20);
}

/**
 * CSS animation apps
 */
.visual.apps div {
  position: relative;
  width: 140px;
  height: 250px;
  background-color: #efeff3;
  animation: apps-window forwards 4s infinite;
  overflow: hidden;
}
.visual.apps div > * {
  position: absolute;
}

.visual.apps div header {
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border-top: 7px solid #3c3e99;
  background-color: #4c54a4;
  animation: apps-header forwards 4s infinite;
}

.visual.apps div article {
  top: 30px;
  left: 50%;
  width: 140px;
  height: 220px;
  box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
  background-color: #fff;
  transform: translateX(-50%);
  animation: apps-article forwards 4s infinite;
}
.visual.apps div article::after {
  position: absolute;
  top: 100%;
  margin-top: 15px;
  width: 100%;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
  content: "";
}

.visual.apps div button {
  position: absolute;
  right: 10px;
  top: 220px;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 100%;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 3px rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  background-color: #e20269;
  animation: apps-button forwards 4s infinite;
}

@keyframes apps-window {
  0%, 15%, 90% {
    width: 140px;
    height: 250px;
  }
  30%, 45% {
    width: 400px;
    height: 300px;
  }
  60%, 75% {
    width: 560px;
    height: 370px;
  }
}
@keyframes apps-header {
  0%, 15%, 90% {
    width: 100%;
    height: 30px;
    border-top-width: 7px;
  }
  30%, 45% {
    height: 90px;
    border-top-width: 12px;
  }
  60%, 75% {
    height: 105px;
    border-top-width: 14px;
  }
}
@keyframes apps-article {
  0%, 15%, 90% {
    top: 10px;
    width: 140px;
    height: 220px;
  }
  30%, 45% {
    top: 35px;
    width: 270px;
    height: 220px;
  }
  60%, 75% {
    top: 35px;
    width: 290px;
    height: 225px;
  }
}
@keyframes apps-button {
  0%, 15%, 90% {
    right: 10px;
    top: 220px;
    width: 20px;
    height: 20px;
  }
  30%, 45% {
    right: 20px;
    top: 77px;
    width: 26px;
    height: 26px;
  }
  60%, 75% {
    right: 25px;
    top: 92px;
    width: 26px;
    height: 26px;
  }
}


/*
 * @media screen and (min-width: 65rem) {
 *     .header > .navigation .burger,
 *     .header > .navigation .burger-close,
 *     .header > .navigation .burger.active ~ .burger-close {
 *         display: none;
 *     }
 * 
 *     .header > .navigation {
 *         flex: 1 0;
 *         flex-flow: row nowrap;
 *         border: 1px solid blue;
 *     }
 *     .header > .navigation > nav {
 *         position: relative;
 *         height: auto;
 * 
 *         display: flex;
 *         flex-flow: row nowrap;
 *         flex: 0;
 *         justify-content: center;
 *         column-gap: 1.2em;
 *         padding: 0 1rem;
 * 
 *         background: transparent;
 *         border: 1px solid red;
 *     }
 *     .header > .navigation > nav > a {
 *         flex: 0;
 *         white-space: nowrap;
 *         display: inline-block;
 *         padding: 0.3rem;
 *         width: auto;
 *         border: 1px solid green;
 *     }
 * }
*/