/*import fonts*/

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900');
@import url('https://fonts.googleapis.com/css2?family=Krub&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'over the rainbow';
    src: url('overtherainbow.woff2') format('woff2'),
        url('OvertheRainbow.ttf') format('truetype'),
        url('overtherainbow.woff') format('woff');
}

/* universal variables */
:root {
    /** default paddings and spaces **/
    --navbar-height: clamp(8rem, 4.348vw + 6.609rem, 16rem);
    --footer-height: 3rem;
    --rem-8-1: clamp(2rem, 6.25vw + -1rem, 8rem);
    --rem-4-1: clamp(1rem, 2.868vw + 0.082rem, 4rem);
    --rem-2-1: clamp(1rem, 2.083vw + 0.333rem, 2rem);
    --rem-1-05: clamp(0.5rem, 1.042vw + 0.167rem, 1rem);
    --rem-05-0: clamp(0rem, 1.042vw + -0.333rem, 0.5rem);
    --rem-3-25: clamp(2.5rem, 1.042vw + 2.167rem, 3rem);
    --rem-20-6: clamp(12rem, 20vw + 4rem, 20rem);

    --default-radius: clamp(0.5rem, 1.042vw + 0.167rem, 1rem);
    --radius-2: clamp(.5rem, 2.083vw + 0.333rem, 1.5rem);
    --menu-radius: calc(.8 * var(--button-height)/2);

    --main-height: 100svh;
    --min-body-height: 100svh;

    /** image SIZES **/
    --main-lang-button-size: clamp(5rem, 10.417vw + 1.667rem, 10rem);
    --lang-button-size: clamp(4rem, 3.333vw + 3.167rem, 7.5rem);
    --lang-button-selected: clamp(5rem, 3.81vw + 4.048rem, 9rem);
    --lang-button-menu: clamp(2.6rem, 0.381vw + 2.505rem, 3rem);

    /* BUTTONS */
    --button-height: clamp(3rem, 2.083vw + 2.333rem, 4rem);
    --button-width: clamp(12rem, 6.25vw + 10rem, 15rem);
    --button-border-radius: clamp(1.5rem, 1.042vw + 1.167rem, 2rem);

    /** transitions **/
    --default-transition: .2s;

    --scrollbar-width: 1rem;
    --scrollbar-height: 1rem;

    --testing-border: 1px solid green;
    --testing-border-2: 1px solid blue;
    --testing-border-3: 1px solid red;
    --testing-border-4: 1px solid yellow;
    --testin-border-5: 1px solid purple;
    --testing-border-6: 1px solid orange;

    --def-shadow: black 0 0 5px, black 0 0 2px;
    --inset-shadow: inset black 0 0 5px, inset black 0 0 2px;
    --min-shadow: black 0 0 2px;
    --def-filter-shadow: drop-shadow(black 0 0 2px);

    /* Portfolio colors */

    --design-grey: #5eb237;
    --design-grey-dark: #5eb237;
    --modelling-orange: #dd9933;
    --modelling-orange-dark: #dd9933;
    --illustration-purple: #a96fe2;
    --illustration-purple-dark: #a96fe2;
    --sketch-beige: #e2cabc;
    --sketch-beige-dark: #e2cabc;
    --web-blue: #6bc0d6;
    --web-blue-dark: #6bc0d6;
    --gaming-green: #5eb237;
    --gaming-green-dark: #5eb237;
    --animation-red: #e23b3b;
    --animation-red-dark: #e23b3b;

}

:root[data-theme="skinm"] {
    /* Fonts */
    --main-font-family: Arial;
    --headers-font-family: Arial;

    /* SkiNM colors */
    --skinm-frozen-blue: #a7bfe5;
    --skinm-clear-skies: #6688c5;
    --skinm-ocean-blue: #274b93;
    --skinm-midnight-blue: #1f284d;

    --skinm-moss-green: #b3d38d;
    --skinm-natural-green: #69b42e;
    --skinm-swamp-green: #00906a;
    --skinm-forest-green: #1f5e2a;

    --skinm-banana-yellow: #f7e583;
    --skinm-sunshine-yellow: #f0d200;
    --skinm-field-yellow: #d79d04;
    --skinm-pinecone-yellow: #956119;

    --skinm-almond-beige: #edba5a;
    --skinm-orange: #ed7f00;
    --skinm-caramel: #cc5c16;
    --skinm-light-roast: #a31d19;

    --skinm-antique-pink: #ed6889;
    --skinm-rasberry: #dc1932;
    --skinm-burgundy: #a3183e;
    --skinm-chocolate: #551f1b;

    --skinm-lilac: #dfbbda;
    --skinm-lavender: #aa5fa2;
    --skinm-dirty-violet: #703b8f;
    --skinm-royal-purple: #791e5a;

    /* colors */
    --text-main: white;
    --text-hover: white;
    --paragraph-color: var(--text-main);
    --text-active: var(--background-main);
    --text-secondary: white;
    --text-action: white;
    --text-action-hover: var(--skinm-sunshine-yellow);
    --text-action-active: white;

    --text-shadow: var(--skinm-midnight-blue) 0 0 5px, var(--skinm-midnight-blue) 0 0 2px;

    --nav-logo-color: rgb(255, 255, 255);
    --nav-link-color: var(--text-main);

    --backend-message-bg: hsla(0, 0%, 100%, 0.75);
    --backend-message-color: var(--text-secondary);

    --headers-1-color: #ffffff;
    --headers-2-color: var(--headers-1-color);
    --headers-3-color: var(--headers-1-color);
    --headers-4-color: var(--headers-1-color);
    --headers-5-color: var(--headers-1-color);
    --headers-6-color: var(--headers-1-color);

    --basic-font-weight: 400;
    --headers-font-weight: 800;

    /* font sizes */
    --headers-1-font-size: clamp(2.5rem, 2.292vw + 1.767rem, 3.6rem);
    --headers-2-font-size: clamp(2.2rem, 2.083vw + 1.533rem, 3.2rem);
    --headers-3-font-size: clamp(2rem, 1.667vw + 1.467rem, 2.8rem);
    --headers-4-font-size: clamp(1.8rem, 1.25vw + 1.4rem, 2.4rem);
    --headers-5-font-size: clamp(1.6rem, 0.833vw + 1.333rem, 2rem);
    --headers-6-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);
    --basic-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);

    /* buttons */

    --button-bg-dark: var(--skinm-midnight-blue);
    --button-bg-dark-hover: var(--skinm-ocean-blue);
    --button-bg-dark-active: var(--skinm-frozen-blue);
    --button-text-dark: var(--text-main);

    --button-bg-light: var(--skinm-frozen-blue);
    --button-bg-light-hover: var(--skinm-ocean-blue);
    --button-bg-light-active: var(--skinm-frozen-blue);
    --button-text-light: var(--background-main);

    --button-bg-action: var(--skinm-midnight-blue);
    --button-bg-action-hover: var(--skinm-ocean-blue);
    --button-bg-action-active: hwb(0 100% 0% / 0.8);
    --button-text-action: hsl(0, 0%, 100%);
    --button-text-action-hover: hsl(0, 0%, 100%);
    --button-text-action-active: hsl(108, 100%, 86%);

    --button-text-hover: white;

    --lang-button-size: clamp(5.5rem, 1.912vw + 4.888rem, 7.5rem);
    --lang-button-selected: clamp(6rem, 2.868vw + 5.082rem, 9rem);

    /* background */


    --background-main: var(--skinm-clear-skies);
    --background-secondary: var(--skinm-ocean-blue);
    --background-out: var(--skinm-midnight-blue);
    --background-navbar: linear-gradient(0deg, transparent, var(--skinm-midnight-blue));
    --background-mobile-navbar: hsla(228, 43%, 21%, .5);
    --general-blur: blur(5px);
    --max-page-width: 100%;

    --dark-overlay: hsla(0, 0%, 0%, 0.5);
    --dark-overlay-text: var(--text-hover);
    --light-overlay: hsla(0, 0%, 100%, 0.5);
    --light-overlay-text: var(--text-main);

    --scrollbar-thumb: var(--skinm-frozen-blue);
    --scrollbar-thumb-hover: var(--skinm-ocean-blue);

    --form-input-bg: #c0c0c0;
    --form-bg: var(--text-main);
    --form-text: var(--background-main);
    --form-input-height: clamp(2.4rem, 1.25vw + 2rem, 3rem);
    --form-length: clamp(30rem, 20.833vw + 23.333rem, 40rem);

}

:root[data-theme="skogplanter"] {
    /* Fonts */
    --main-font-family: Arial;
    --headers-font-family: 'Krub';

    /* skogplanter colors */
    --skogplanter-forest-green: #104814;
    --skogplanter-sapling-green: #8fdc44;
    --skogplanter-clear-skies: #14279d;
    --skogplanter-aqua-blue: #020343;

    /* colors */
    --text-main: var(--skogplanter-forest-green);
    --text-hover: var(--skogplanter-sapling-green);
    --paragraph-color: var(--text-main);
    --text-active: var(--background-main);
    --text-secondary: var(--skogplanter-forest-green);
    --text-action: var(--skogplanter-forest-green);
    --text-action-hover: var(--skogplanter-sapling-green);
    --text-action-active: var(--skogplanter-sapling-green);

    --text-shadow: var(--skinm-midnight-blue) 0 0 5px, var(--skinm-midnight-blue) 0 0 2px;

    --nav-logo-color: var(--skogplanter-forest-green);
    --nav-link-color: var(--text-main);

    --backend-message-bg: hsla(0, 0%, 100%, 0.75);
    --backend-message-color: var(--text-secondary);

    --headers-1-color: var(--skogplanter-forest-green);
    --headers-2-color: var(--headers-1-color);
    --headers-3-color: var(--headers-1-color);
    --headers-4-color: var(--headers-1-color);
    --headers-5-color: var(--headers-1-color);
    --headers-6-color: var(--headers-1-color);

    --basic-font-weight: 500;
    --headers-font-weight: 600;

    /* font sizes */
    --headers-1-font-size: clamp(2.5rem, 2.292vw + 1.767rem, 3.6rem);
    --headers-2-font-size: clamp(2.2rem, 2.083vw + 1.533rem, 3.2rem);
    --headers-3-font-size: clamp(2rem, 1.667vw + 1.467rem, 2.8rem);
    --headers-4-font-size: clamp(1.8rem, 1.25vw + 1.4rem, 2.4rem);
    --headers-5-font-size: clamp(1.6rem, 0.833vw + 1.333rem, 2rem);
    --headers-6-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);
    --basic-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);

    /* buttons */

    --button-bg-dark: var(--skogplanter-forest-green);
    --button-bg-dark-hover: var(--skogplanter-sapling-green);
    --button-bg-dark-active: white;
    --button-text-dark: var(--skogplanter-sapling-green);
    ;

    --button-bg-light: var(--skogplanter-sapling-green);
    --button-bg-light-hover: var(--skogplanter-forest-green);
    --button-bg-light-active: white;
    --button-text-light: var(--skogplanter-forest-green);

    --button-bg-action: var(--skogplanter-sapling-green);
    --button-bg-action-hover: var(--skogplanter-forest-green);
    --button-bg-action-active: white;
    --button-text-action: var(--skogplanter-forest-green);
    --button-text-action-hover: var(--skogplanter-sapling-green);
    --button-text-action-active: var(--skogplanter-forest-green);

    --button-text-hover: white;

    --lang-button-size: clamp(5.5rem, 1.912vw + 4.888rem, 7.5rem);
    --lang-button-selected: clamp(6rem, 2.868vw + 5.082rem, 9rem);

    /* background */


    --background-main: white;
    --background-secondary: var(--skinm-ocean-blue);
    --background-out: var(--skogplanter-forest-green);
    --background-navbar: linear-gradient(0deg, transparent, var(--skinm-midnight-blue));
    --background-mobile-navbar: hsla(228, 43%, 21%, .5);
    --general-blur: blur(5px);
    --max-page-width: 100%;

    --dark-overlay: hsla(0, 0%, 0%, 0.5);
    --dark-overlay-text: var(--text-hover);
    --light-overlay: hsla(0, 0%, 100%, 0.5);
    --light-overlay-text: var(--text-main);

    --scrollbar-thumb: var(--skogplanter-sapling-green);
    --scrollbar-thumb-hover: white;

    --form-input-bg: #c0c0c0;
    --form-bg: var(--text-main);
    --form-text: var(--background-main);
    --form-input-height: clamp(2.4rem, 1.25vw + 2rem, 3rem);
    --form-length: clamp(30rem, 20.833vw + 23.333rem, 40rem);

}

:root[data-theme="manaturodetox"] {
    /* Fonts */
    --main-font-family: 'Inter';
    --headers-font-family: 'Inter';

    /* colors */
    --text-main: white;
    --text-hover: black;
    --paragraph-color: white;
    --text-active: black;
    --text-secondary: white;
    --text-action: white;
    --text-action-hover: white;
    --text-action-active: white;

    --text-shadow: 0 0 1rem 0 black;

    --nav-logo-color: var(--skogplanter-forest-green);
    --nav-link-color: var(--text-main);
    --nav-bar-background: linear-gradient(#101010, #2e2e2e);

    --backend-message-bg: hsla(0, 0%, 100%, 0.75);
    --backend-message-color: var(--text-secondary);

    --headers-1-color: white;
    --headers-2-color: var(--headers-1-color);
    --headers-3-color: var(--headers-1-color);
    --headers-4-color: var(--headers-1-color);
    --headers-5-color: var(--headers-1-color);
    --headers-6-color: var(--headers-1-color);

    --basic-font-weight: 500;
    --headers-font-weight: 500;

    /* font sizes */
    --headers-1-font-size: clamp(2.5rem, 0.313vw + 2.4rem, 3.6rem);
    ;
    --headers-2-font-size: clamp(2.2rem, 2.083vw + 1.533rem, 3.2rem);
    --headers-3-font-size: clamp(2rem, 1.667vw + 1.467rem, 2.8rem);
    --headers-4-font-size: clamp(1.8rem, 1.25vw + 1.4rem, 2.4rem);
    --headers-5-font-size: clamp(1.6rem, 0.833vw + 1.333rem, 2rem);
    --headers-6-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);
    --basic-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);

    /* buttons */

    --button-bg-dark: yellow;
    --button-bg-dark-hover: green;
    --button-bg-dark-active: white;
    --button-text-dark: white;

    --button-bg-light: var(--skogplanter-sapling-green);
    --button-bg-light-hover: var(--skogplanter-forest-green);
    --button-bg-light-active: white;
    --button-text-light: white;

    --button-bg-action: var(--skogplanter-sapling-green);
    --button-bg-action-hover: var(--skogplanter-forest-green);
    --button-bg-action-active: white;
    --button-text-action: white;
    --button-text-action-hover: white;
    --button-text-action-active: white;

    --button-text-hover: white;

    --lang-button-size: clamp(5.5rem, 1.912vw + 4.888rem, 7.5rem);
    --lang-button-selected: clamp(6rem, 2.868vw + 5.082rem, 9rem);

    /* background */


    --background-main: white;
    --background-secondary: white;
    --background-out: var(--skogplanter-forest-green);
    --background-navbar: linear-gradient(0deg, transparent, var(--skinm-midnight-blue));
    --background-mobile-navbar: hsla(228, 43%, 21%, .5);
    --general-blur: blur(5px);
    --max-page-width: 100%;

    --dark-overlay: hsla(0, 0%, 0%, 0.5);
    --dark-overlay-text: var(--text-hover);
    --light-overlay: hsla(0, 0%, 100%, 0.5);
    --light-overlay-text: var(--text-main);

    --scrollbar-thumb: orange;
    --scrollbar-thumb-hover: white;

}

:root[data-theme="portfolio"] {

    /* fonts */
    --main-font-family: 'Lexend', sans-serif;
    /* --accent-font: 'Liu Jian Mao Cao', cursive; */
    --accent-font: 'over the rainbow', cursive;
    --headers-font-family: 'Lexend', sans-serif;

    /* text colors */
    --text-main: white;
    --text-secondary: #ce0000;

    --paragraph-color: var(--text-main);
    --headers-1-color: var(--text-main);
    --headers-2-color: var(--text-main);
    --headers-3-color: var(--text-main);
    --headers-4-color: var(--text-main);
    --headers-5-color: var(--text-main);
    --headers-6-color: var(--text-main);

    --text-hover: white;
    --text-active: var(--background-main);
    --text-action: var(--text-primary);
    --text-action-hover: var(--golden-accent);
    --text-action-active: white;

    --golden-accent: #ffc107;
    --golden-deep-accent: hsl(45, 100%, 32%);
    --green-accent: hsl(78, 84%, 40%);
    --text-inactive: #313131;
    --blue-accent: hsl(177, 100%, 43%);
    --orange-accent: hsl(30, 100%, 50%);

    --backend-message-bg: hsla(0, 0%, 100%, 0.75);
    --backend-message-color: var(--background-main);

    --nav-logo-color: #E0E0E0;
    --nav-link-color: var(--text-main);

    /* text sizes */
    --basic-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.8rem);
    --headers-1-font-size: clamp(2.5rem, 2.292vw + 1.767rem, 3.8rem);
    --headers-2-font-size: clamp(2.2rem, 2.083vw + 1.533rem, 3.4rem);
    --headers-3-font-size: clamp(2rem, 1.667vw + 1.467rem, 3rem);
    --headers-4-font-size: clamp(1.8rem, 1.25vw + 1.4rem, 2.6rem);
    --headers-5-font-size: clamp(1.6rem, 0.833vw + 1.333rem, 2.2rem);
    --headers-6-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.8rem);

    --basic-font-weight: 300;
    --headers-font-weight: 500;
    --headers-1-font-weight: 500;
    --headers-2-font-weight: 400;
    --headers-3-font-weight: 400;
    --headers-4-font-weight: 400;
    --headers-5-font-weight: 400;
    --headers-6-font-weight: 400;

    /* BUTTONS */
    --button-bg-dark: hsla(0, 0%, 0%, .5);
    --button-bg-dark-hover: hsla(0, 0%, 19%, 0.5);
    --button-bg-dark-active: hsla(0, 0%, 100%, .5);
    --button-text-dark: var(--text-main);

    --button-bg-light: hsla(0, 0%, 100%, 0.5);
    --button-bg-light-hover: hsla(0, 0%, 100%, 0.6);
    --button-bg-light-active: hsla(0, 0%, 100%, .8);
    --button-text-light: var(--background-main);

    --button-bg-action: var(--golden-accent);
    --button-bg-action-hover: white;
    --button-bg-action-active: hsla(0, 0%, 100%, .8);
    --button-text-action: black;
    --button-text-action-hover: black;
    --button-text-action-active: var(--golden-accent);

    --button-text-hover: var(--text-hover);

    /* background */
    --background-main: #0d0d0d;
    --dark-grey-mid: #1a1a1a;
    --background-secondary: #1a1a1a;
    --background-fade: linear-gradient(#101010, #2e2e2e);
    --background-out: var(--background-main);
    --background-navbar: linear-gradient(0deg, transparent, black);
    --background-mobile-navbar: hsla(0, 0%, 0%, .75);
    --general-blur: blur(5px);
    --max-page-width: 100%;

    --text-shadow: black 0 0 5px, black 0 0 2px;

    --dark-overlay: hsla(0, 0%, 0%, 0.5);
    --dark-overlay-text: var(--text-hover);
    --light-overlay: hsla(0, 0%, 100%, 0.5);
    --light-overlay-text: var(--text-main);

    /* scrollbar */
    --scrollbar-thumb: #404040;
    --scrollbar-thumb-hover: #555;
    --scrollbar-track: grey;

    /* forms */
    --form-bg: var(--button-bg-light-hover);
    --form-input-bg: #ffffffad;
    --form-placeholder: #727272ad;
    --form-input-bg-hover: var(--button-bg-light-active);
    --form-text: var(--text-main);
    --form-input-height: clamp(2.4rem, 1.25vw + 2rem, 3rem);
    --form-length: clamp(30rem, 20.833vw + 23.333rem, 40rem);

    /* focus */
    --focus-shadow: 0 0 0 1px white,
        0 0 10px 1px rgb(0, 0, 0);
}

:root[data-theme="cms"] {

    /* fonts */
    --main-font-family: 'Lexend', sans-serif;
    --accent-font: 'Liu Jian Mao Cao', cursive;
    --headers-font-family: 'Lexend', sans-serif;

    /* text colors */
    --text-main: #000000;
    --text-secondary: hsl(0, 0%, 93%);

    --paragraph-color: #e1e1e1;
    --headers-1-color: var(--text-main);
    --headers-2-color: var(--text-main);
    --headers-3-color: var(--text-main);
    --headers-4-color: var(--text-main);
    --headers-5-color: var(--text-main);
    --headers-6-color: var(--text-main);

    --text-hover: rgba(140, 0, 255, 1);
    --text-active: var(--background-main);
    --text-action: #7000cc;
    --text-action-hover: #ffffff;
    --text-action-active: #ffffff;

    --golden-accent: #ffc107;
    --green-accent: hsl(108, 92%, 25%);
    --text-inactive: #979797;
    --blue-accent: hsl(167, 100%, 27%);
    --orange-accent: hsl(27, 100%, 43%);

    --backend-message-bg: hsla(0, 0%, 100%, 0.75);
    --backend-message-color: var(--text-main);

    --nav-logo-color: #E0E0E0;
    --nav-link-color: #afafaf;

    /* text sizes */
    --headers-1-font-size: clamp(2.5rem, 2.292vw + 1.767rem, 3.6rem);
    --headers-2-font-size: clamp(2.2rem, 2.083vw + 1.533rem, 3.2rem);
    --headers-3-font-size: clamp(2rem, 1.667vw + 1.467rem, 2.8rem);
    --headers-4-font-size: clamp(1.8rem, 1.25vw + 1.4rem, 2.4rem);
    --headers-5-font-size: clamp(1.6rem, 0.833vw + 1.333rem, 2rem);
    --headers-6-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);
    --basic-font-size: clamp(1.4rem, 0.417vw + 1.267rem, 1.6rem);

    --basic-font-weight: 300;
    --headers-font-weight: 300;
    --headers-1-font-weight: 500;
    --headers-2-font-weight: 400;
    --headers-3-font-weight: 400;
    --headers-4-font-weight: 400;
    --headers-5-font-weight: 400;
    --headers-6-font-weight: 400;

    /* BUTTONS */
    --button-bg-dark: hsla(270, 86%, 5%, 0.5);
    --button-bg-dark-hover: hsla(286, 66%, 24%, 0.5);
    --button-bg-dark-active: hsla(0, 0%, 100%, .5);
    --button-text-dark: var(--text-secondary);

    --button-bg-light: hsla(0, 0%, 100%, 0.5);
    --button-bg-light-hover: hsla(266, 48%, 76%, 0.6);
    --button-bg-light-active: hsla(0, 0%, 100%, .8);
    --button-text-light: var(--text-main);

    --button-bg-action: hsla(115, 100%, 68%, 0.527);
    --button-bg-action-hover: hsla(115, 100%, 28%, 0.527);
    --button-bg-action-active: var(--button-bg-dark-active);
    --button-text-action: hsl(0, 0%, 100%);
    --button-text-action-hover: hsl(0, 0%, 100%);
    --button-text-action-active: hsl(108, 100%, 86%);

    --button-bg-red: hsla(0, 79%, 48%, 0.664);
    --button-bg-red-hover: hsla(0, 80%, 37%, 0.664);
    --button-bg-red-active: hsla(0, 0%, 100%, 0.712);
    --button-text-red: hsl(0, 0%, 100%);
    --button-text-red-hover: hsl(0, 0%, 100%);
    --button-text-red-active: hsl(0, 68%, 48%);

    --button-bg-light-red: hsla(0, 36%, 71%, 0.705);
    --button-bg-light-red-hover: hsla(0, 45%, 59%, 0.699);
    --button-bg-light-red-active: hsla(0, 0%, 100%, 0.699);
    --button-text-light-red: hsl(0, 71%, 45%);
    --button-text-light-red-hover: hsl(0, 89%, 33%);
    --button-text-light-red-active: hsl(0, 47%, 60%);

    --button-text-hover: var(--text-action);

    /* background */
    --background-main: #d4d4d4;
    --background-secondary: #acacac;
    --background-fade: linear-gradient(#101010, #2e2e2e);
    --background-out: rgb(100, 100, 100);
    --background-navbar: hsla(0, 0%, 0%, 0.753);
    --background-mobile-navbar: hsla(0, 0%, 0%, .75);
    --general-blur: blur(5px);
    --max-page-width: 100%;

    --text-shadow: black 0 0 5px, black 0 0 2px;

    --dark-overlay: hsla(0, 0%, 0%, 0.5);
    --dark-overlay-text: var(--text-hover);
    --light-overlay: hsla(0, 0%, 100%, 0.5);
    --light-overlay-text: var(--text-main);

    /* scrollbar */
    --scrollbar-thumb: #404040;
    --scrollbar-thumb-hover: #555;
    --scrollbar-track: grey;

    /* forms */
    --form-bg: hsla(0, 0%, 100%, 0.5);
    --form-input-bg: var(--button-bg-light);
    --form-input-bg-hover: var(--button-bg-light-active);
    --form-text: var(--text-main);
    --form-input-height: clamp(2.4rem, 1.25vw + 2rem, 3rem);
    --form-length: clamp(30rem, 20.833vw + 23.333rem, 40rem);

    /* focus */
    --focus-shadow: 0 0 0 1px white, 0 0 10px 1px rgb(0, 0, 0);

    /* cms only */
    --sidebar-width: 50ch;
    --article-content-width: 75ch;
    --nav-columns: 250px;
    --max-page-width: calc(var(--article-content-width) + var(--rem-2-1) + var(--sidebar-width));

    --cms-form-input-bg: var(--button-bg-light);
    --cms-form-input-bg-hover: #f0e2e2;
    --cms-form-bg: #ffffff;
    --cms-form-text: var(--text-secondary);

    --thumbnail-size: clamp(12rem, 7.5vw + 9rem, 15rem);
    --thumbnail-biggest-size: 200px;
}

/*=========================================================================*/
/*                                GENERAL                                  */
/*=========================================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: var(--default-transition);
    font-family: var(--main-font-family);
    color: var(--color);
    font-size: var(--basic-font-size);
    font-weight: var(--basic-font-weight);
    list-style-position: inside;
}

/*
*:focus {
    outline: none;
    box-shadow: var(--focus-shadow);
}
*/

label {
    color: var(--background-main);
}

html {
    font-size: 62.5%;
    display: block;
    background-color: var(--background-out);
    /* scroll-behavior: smooth; */
    /* scroll-snap-type: y mandatory; */
}

body {
    height: 100vh;
    width: 100%;
    max-width: 100%;

    color: var(--text-main);
    background: var(--background-main);

    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    position: relative;

    justify-content: space-between;
}

main {
    display: flex;
    flex-direction: column;
    /*min-height: 100svh;*/
    height: fit-content;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.full-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: var(--testing-border); */
    width: 100%;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: var(--testing-border); */
    width: 100%;
    flex-direction: row;
}

.row-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: var(--testing-border); */
    width: 100%;
    flex-direction: row;
}

@media (max-width: 800px) {
    .row-row {
        flex-direction: row;
    }
}

.stick-up {
    justify-content: start;
}

.stick-up-column {
    align-content: start;
}

.fill-page {
    min-height: 100svh;
}

.one-page {
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
}

.fill {
    width: 100%;
    min-height: fit-content;
    height: 100%;
    flex-grow: 1;
}

/* paddings */

.noPad {
    padding: 0;
}

.pad05 {
    padding: var(--rem-05-0);
}

.pad1 {
    padding: var(--rem-1-05);
}

.pad2 {
    padding: var(--rem-2-1);
}

.pad4 {
    padding: var(--rem-4-1);
}

.pad8 {
    padding: var(--rem-8-1);
}

.noGap {
    gap: 0;
}

.gap05 {
    gap: var(--rem-05-0);
}

.gap1 {
    gap: var(--rem-1-05);
}

.gap2 {
    gap: var(--rem-2-1);
}

.gap4 {
    gap: var(--rem-4-1);
}

.gap8 {
    gap: var(--rem-8-1);
}

.top-pad {
    padding-top: var(--navbar-height);
}

.bottom-pad {
    padding-bottom: var(--footer-height);
}

.side-pad4 {
    padding-left: var(--rem-4-1);
    padding-right: var(--rem-4-1);
}

.side-pad2 {
    padding-left: var(--rem-2-1);
    padding-right: var(--rem-2-1);
}

.sidePad1 {
    padding-left: var(--rem-1-05);
    padding-right: var(--rem-1-05);
}

/* alignment */

.left {
    text-align: left;
    align-items: start;
    /*justify-content: left;*/
}

.row-left {
    text-align: left;
    justify-content: left;
}

.left-left {
    text-align: left;
    align-items: start;
    justify-content: left;
}

.right {
    text-align: right;
    align-items: end;
    justify-content: right;
}

.right-right {
    text-align: right;
    align-items: end;
    justify-content: right;
}

.center {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.top {
    align-items: start;
    justify-content: start;
}

/*=========================================================================*/
/*                             Text-styling                                */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--headers-font-family);
}

h1,
.h1 {
    font-size: var(--headers-1-font-size);
    color: var(--headers-1-color);
    font-weight: var(--headers-1-font-weight);
}

h2,
.h2 {
    font-size: var(--headers-2-font-size);
    color: var(--headers-2-color);
    font-weight: var(--headers-2-font-weight);
}

h3,
.h3 {
    font-size: var(--headers-3-font-size);
    color: var(--headers-3-color);
    font-weight: var(--headers-3-font-weight);
}

h4,
.h4 {
    font-size: var(--headers-4-font-size);
    color: var(--headers-4-color);
    font-weight: var(--headers-4-font-weight);
}

h5,
.h5 {
    font-size: var(--headers-5-font-size);
    color: var(--headers-5-color);
    font-weight: var(--headers-5-font-weight);
}

h6,
.h6 {
    font-size: var(--headers-6-font-size);
    color: var(--headers-6-color);
    text-transform: uppercase;
    font-weight: var(--headers-6-font-weight);
}

p,
.p {
    font-size: var(--basic-font-size);
    font-weight: var(--basic-font-weight);
}

hr {
    border-top: solid 1px var(--headers-1-color);
    border-bottom: 0;
    margin: 0;
    width: 100%;
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.dark-overlay {
    background-color: var(--button-bg-dark);
    color: var(--button-text-dark);
    backdrop-filter: var(--general-blur);
}

.dark-overlay p,
.dark-overlay h1,
.dark-overlay h2,
.dark-overlay h3,
.dark-overlay h4,
.dark-overlay h5,
.dark-overlay h6,
.dark-overlay label {
    color: var(--button-text-dark);
    border-color: var(--button-text-dark);
}

.dark-overlay .required,
.dark-overlay span {
    color: rgb(109, 214, 255);
    font-weight: 500;
}

.light-overlay {
    background-color: var(--button-bg-light);
    color: var(--button-text-light);
    backdrop-filter: var(--general-blur);
}

.light-overlay p,
.light-overlay h1,
.light-overlay h2,
.light-overlay h3,
.light-overlay h4,
.light-overlay h5,
.light-overlay h6,
.light-overlay label {
    color: var(--button-text-light);
    border-color: var(--button-text-light);
}

.light-overlay .required,
.light-overlay span {
    color: rgb(255, 0, 0);
    font-weight: 500;
}

.red-overlay {
    background-color: var(--button-bg-red);
    color: var(--button-text-red);
    backdrop-filter: var(--general-blur);
}

.red-overlay p,
.red-overlay h1,
.red-overlay h2,
.red-overlay h3,
.red-overlay h4,
.red-overlay h5,
.red-overlay h6,
.red-overlay label {
    color: var(--button-text-red);
    border-color: var(--button-text-red);
}

.red-overlay .required,
.red-overlay span {
    color: rgb(109, 214, 255);
    font-weight: 500;
}

.light-red-overlay {
    background-color: var(--button-bg-light-red);
    color: var(--button-text-light-red);
    backdrop-filter: var(--general-blur);
}

.light-red-overlay p,
.light-red-overlay h1,
.light-red-overlay h2,
.light-red-overlay h3,
.light-red-overlay h4,
.light-red-overlay h5,
.light-red-overlay h6,
.light-red-overlay label {
    color: var(--button-text-light-red);
    border-color: var(--button-text-light-red);
}

.light-red-overlay .required,
.light-red-overlay span {
    color: rgb(109, 214, 255);
    font-weight: 500;
}

/* .text-block {
    display: inline-block;
} */

ruby {
    font-size: 1em;
}

rt {
    font-size: 0.5em;
    font-weight: 200;
    display: none;
}

b {
    font-weight: 600;
}

.error {
    color: white;
}

span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.required {
    color: var(--golden-accent);
}

/*=========================================================================*/
/*                             Link-styling                                */

a,
.a {
    text-decoration: none;
}

.text-link,
.text-link p {
    color: var(--text-action);
    display: inline;
    cursor: pointer;
}

.text-link:hover,
.text-link:hover p {
    color: var(--text-action-hover);
    text-decoration: underline;
}

.text-link:active,
.text-link:active p {
    color: white;
}

.action-link {
    color: var(--golden-accent);
}

.broken-link {
    color: var(--text-inactive);
    pointer-events: none;
}

.mini-button {
    padding: .2rem 1rem .3rem 1rem;
    border-radius: 1.5rem;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.micro-button {
    padding: 0 .5rem;
    border-radius: 1rem;
    display: inline-block;
    /* center the text*/
    text-align: center;

}

button {
    cursor: pointer;
    border: none;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    min-width: var(--button-width);
    width: fit-content;
    padding: 0 2rem 0 2rem;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    font-weight: 400;
}

.button:hover {
    transform: scale(1.05);
}

.dark-button {
    background-color: var(--button-bg-dark);
    color: var(--button-text-dark);
    backdrop-filter: var(--general-blur);
}

.dark-button:hover {
    background-color: var(--button-bg-dark-hover);
    color: var(--button-text-dark);
}

.dark-button:active {
    background-color: var(--button-bg-dark-active);
    color: var(--button-text-hover);
}

.light-button {
    background-color: var(--button-bg-light);
    color: var(--button-text-light);
    backdrop-filter: var(--general-blur);
}

.light-button:hover {
    background-color: var(--button-bg-light-hover);
    color: var(--button-text-hover);
}

.light-button:active {
    background-color: var(--button-bg-light-active);
    color: var(--button-text-hover);
}

.action-button {
    background-color: var(--button-bg-action);
    color: var(--button-text-action);
}

.action-button:hover {
    background-color: var(--button-bg-action-hover);
    color: var(--button-text-action-hover);
}

.action-button:active {
    background-color: var(--button-bg-action-active);
    color: var(--button-text-action-active);
}

.lang-confirm-button {
    position: relative;
    background-color: var(--button-bg-action);
    z-index: 1;
}

.lang-confirm-button::after {
    content: '';
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    border: .5rem solid var(--green-accent);
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 2s infinite;
}

.lang-confirm-button:hover::after,
.lang-confirm-button:focus::after {
    animation: none;
    display: none;
}

@keyframes ring {
    0% {
        width: 30px;
        height: 30px;
        opacity: 1;
    }

    75% {
        width: var(--button-width);
        height: var(--button-width);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.inactive-button {
    display: none;
}

.hover-grow {
    transition: width .3s;
}

.hover-grow:hover {
    width: calc(2*var(--button-height));
}

.hover-grow p {
    visibility: hidden;
    position: absolute;
    font-size: 0;
    transition-duration: 0s;
    transition-delay: 0s;
}

.hover-grow:hover p {
    position: static;
    visibility: visible;
    width: fit-content;
    font-size: var(--basic-font-size);
    transition-duration: calc(.3s / 4 * 3);
    transition-delay: calc(.3s / 4 * 1);
}

/*=========================================================================*/
/*                             Color styling                               */

.accent {
    color: var(--golden-accent);
}

.graphic-design {
    background-color: var(--design-grey);
}

.graphic-design a {
    color: var(--design-grey);
}

.graphic-design-hover:hover:not(.selected),
.graphic-design-hover:focus:not(.selected),
.graphic-design-hover:focus-within:not(.selected) {
    background-color: var(--design-grey-dark);
}

.graphic-design-border {
    border: 2px solid var(--design-grey);
}

.graphic-design-checked:checked~.media-check {
    background-color: var(--design-grey-dark);
}

.web-dev {
    background-color: var(--web-blue);
}

.web-dev a {
    color: var(--web-blue);
}

.web-dev-hover:hover:not(.selected),
.web-dev-hover:focus:not(.selected),
.web-dev-hover:focus-within:not(.selected) {
    background-color: var(--web-blue-dark);
}

.web-dev-border {
    border: 2px solid var(--web-blue);
}

.web-dev-checked:checked~.media-check {
    background-color: var(--web-blue-dark);
}

.illustration {
    background-color: var(--illustration-purple);
}

.illustration a {
    color: var(--illustration-purple);
}

.illustration-hover:hover:not(.selected),
.illustration-hover:focus:not(.selected),
.illustration-hover:focus-within:not(.selected) {
    background-color: var(--illustration-purple-dark);
}

.illustration-border {
    border: 2px solid var(--illustration-purple);
}

.illustration-checked:checked~.media-check {
    background-color: var(--illustration-purple-dark);
}

.animation {
    background-color: var(--animation-red);
}

.animation a {
    color: var(--animation-red);
}

.animation-hover:hover:not(.selected),
.animation-hover:focus:not(.selected),
.animation-hover:focus-within:not(.selected) {
    background-color: var(--animation-red-dark);
}

.animation-border {
    border: 2px solid var(--animation-red);
}

.animation-checked:checked~.media-check {
    background-color: var(--animation-red-dark);
}

.modelling {
    background-color: var(--modelling-orange);
}

.modelling a {
    color: var(--modelling-orange);
}

.modelling-hover:hover:not(.selected),
.modelling-hover:focus:not(.selected),
.modelling-hover:focus-within:not(.selected) {
    background-color: var(--modelling-orange-dark);
}

.modelling-border {
    border: 2px solid var(--modelling-orange);
}

.modelling-checked:checked~.media-check {
    background-color: var(--modelling-orange-dark);
}

.study {
    background-color: var(--sketch-beige);
}

.study-hover:hover:not(.selected),
.study-hover:focus:not(.selected),
.study-hover:focus-within:not(.selected) {
    background-color: var(--sketch-beige-dark);
}

.study-border {
    border: 2px solid var(--sketch-beige);
}

.study-checked:checked~.media-check {
    background-color: var(--sketch-beige-dark);
}

.gaming {
    background-color: var(--gaming-green);
}

.gaming-hover:hover:not(.selected),
.gaming-hover:focus:not(.selected),
.gaming-hover:focus-within:not(.selected) {
    background-color: var(--gaming-green-dark);
}

.gaming-border {
    border: 2px solid var(--gaming-green);
}

.gaming-checked:checked~.media-check {
    background-color: var(--gaming-green-dark);
}

/*=========================================================================*/
/*                               Scrollbar                                 */

::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);

}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/*=========================================================================*/
/*                            HEADER CONTENT                               */
/*=========================================================================*/

header {
    height: 0;
}

/* header.side {
    height: 100%;
    width: fit-content;
    position: relative;
} */

/*=========================================================================*/
/*                                 MENU                                    */

.navbar {
    position: absolute;
    top: 0;
    height: var(--navbar-height);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2rem;
    /*background-color: var(--background-navbar);
    backdrop-filter: var(--navbar-blur);*/
    z-index: 10;
    /* background fade to transparent */
    background: var(--background-navbar);
}

.navbar-title {
    text-decoration: none;
    font-weight: 300;
    font-size: 2rem;
    color: var(--nav-logo-color);
}

.navbar-title img {
    max-height: calc(var(--navbar-height) * .7);
}

#navbar-nav {
    width: unset;
}

#navbar-mobile {
    display: none;
}

#navbar-mobile.open {
    display: flex;
    position: absolute;
    background-color: var(--background-mobile-navbar);
    backdrop-filter: var(--general-blur);
    z-index: 9;
    top: 0;
    justify-content: flex-start;
}

.navbar-toggler {
    background-color: transparent;
    display: none;
    margin: auto 0;
    position: absolute;
    right: 1rem;
}

.navbar-toggler div {
    width: 2rem;
    height: .2rem;
    background-color: var(--nav-link-color);
    margin: .5rem 0;
    transition: var(--default-transition);
}

.open .bar1 {
    transform: rotate(-45deg) translate(-.5rem, .5rem);
    -webkit-transform: rotate(-45deg) translate(-.5rem, .5rem);
}

.open .bar2 {
    opacity: 0;
}

.open .bar3 {
    transform: rotate(45deg) translate(-.5rem, -.5rem);
    -webkit-transform: rotate(45deg) translate(-.5rem, -.5rem);
}

.nav-item {
    position: relative;
    list-style: none;
}

.nav-item:hover {
    list-style: none;
    transform: scale(1.05);
}

.nav-link {
    color: var(--nav-link-color);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-action-active);
}

.nav-link:active {
    color: var(--text-action-active);
}

#lang-menu,
#lang-menu-mobile {
    display: none;
}

#lang-menu ul,
#lang-menu-mobile ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

#lang-menu.open,
#lang-menu-mobile.open {
    display: flex;
    position: absolute;
    top: calc(var(--lang-button-menu) + (var(--navbar-height) - var(--lang-button-menu)) /2);
    left: -1rem;
    padding: 1rem;
    background-color: var(--background-mobile-navbar);
    border-radius: var(--default-radius);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}

.langButton {
    height: var(--lang-button-menu);
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

.langButton img {
    width: auto;
    height: 100%;
    max-width: unset;
    cursor: pointer;
    border-radius: 50%;
    background: transparent;
}

.langButton:hover img {
    color: green;
    background: blue;
}

.langButton:active img {
    color: black;
    background: white;
}

.langButton.open img {
    color: green;
    background: rgb(0, 162, 255);
}

#login {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--text-action);
    color: var(--text-action);
    height: 2.6rem;
    padding: 0 1rem;
    border-radius: 1.3rem;
}

#login:hover {
    border: 1px solid var(--text-action-hover);
    color: var(--text-action-hover);
}

#login:active {
    border-color: var(--text-action-active);
    color: var(--text-action-active);
}

@media screen and (max-width: 800px) {
    #navbar-nav {
        display: none;
    }

    .navbar-toggler {
        display: block;
    }

    .navbar-toggler.open {
        display: block;
    }

    #lang-menu-mobile.open {
        left: calc(-1* (var(--lang-button-menu) + 2rem));
    }

    #lang-menu-mobile.open ul {
        flex-direction: row;
    }
}

/*=========================================================================*/
/*                              PORTFOLIO                                  */
/*=========================================================================*/


/*=========================================================================*/
/*                            Maintenance                              */

#maintenance {
background-image: url('../assets/placeholders/3D.png');
background-size: cover;
background-position: center;
position: relative;
}

#maintenance .overlay {
    background-color: hsla(0, 0%, 0%, .80);
    backdrop-filter: var(--general-blur);
    height: 100%;
    width: 100%;
    position: absolute;
}

#maintenance h1,
#maintenance p {
    z-index: 1;
}

#maintenance p {
    font-size: var(--headers-5-font-size);
    font-family: var(--accent-font);
}

/*=========================================================================*/
/*                            Language select                              */

#lang {
    gap: clamp(2rem, 7.619vw + 0.095rem, 10rem);
}

.lang-left,
.lang-right {
    width: fit-content;
}

.speech-bubble {
    width: fit-content;
    position: relative;
    border-radius: var(--radius-2);
    background-color: var(--text-main);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}

.speech-bubble * {
    color: var(--background-main);
}

.speech-bubble svg {
    position: absolute;
    left: 100%;
    width: 60px;
    fill: var(--text-main);
    transform: scale(1, -1);
}

#portrait-phone,
#portrait-desktop {
    border-radius: 50%;
    aspect-ratio: 1/1;
    height:auto;
}

#lang #portrait-desktop {
    width: 50vw;
    max-width: 700px;
}

#lang #portrait-phone {
    width: 75%;
    display: none;
}

#lang li {
    width: var(--lang-button-selected);
    height: calc(var(--headers-4-font-size) + var(--rem-2-1) + var(--lang-button-selected));
}

#lang a {
    width: var(--lang-button-size);
}

#lang ul {
    width: fit-content;
}

.lang-button {
    position: relative;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: #000000 -3px -3px 10px,
        #000000 3px 3px 10px,
        inset 0px 3px 5px rgba(255, 255, 255, 0.5),
        0px 0px 10px rgba(0, 0, 0, 0.15);

    /*box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px,
        rgba(128, 107, 107, 0.3) 0 7px 13px -3px,
        #252424 0 -3px 0 inset;*/
}

.lang-button div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#lang a:hover,
#lang a.selected {
    width: var(--lang-button-selected);
}

#lang a:hover p,
#lang a.selected p {
    font-weight: 500;
    font-size: var(--headers-5-font-size);
}

#lang a:active .lang-button {
    box-shadow: #000000 inset -2px -2px 3px,
        #000000 inset 1px 1px 6px;
}

#lang ul:hover .lang-button:not(a:hover .lang-button),
#lang a.not-selected .lang-button:not(a:hover .lang-button) {
    box-shadow: #000000 inset -2px -2px 3px,
        #000000 inset 1px 1px 6px;
}

#lang ul:hover .lang-button div:not(a:hover .lang-button div),
#lang a.not-selected .lang-button div:not(a:hover .lang-button div) {
    background-color: var(--dark-overlay);
}

#lang ul:hover p:not(a:hover p),
#lang a.not-selected p:not(a:hover p) {
    color: grey;
}

@media (max-width: 800px) {
    #lang h1 {
        display: none;
    }

    #lang #portrait-desktop {
        display: none;
    }

    #lang #portrait-phone {
        display: block;
    }

    #lang {
        gap: var(--rem-4-1);
    }

    .speech-bubble svg {
        left: 10%;
        top: 100%;
        transform: rotate(90deg);
        width: 40px;
    }
}

/*=========================================================================*/
/*                             Intro section                               */
#hero-bg {
    height: 100svh;
    filter: drop-shadow(0px 2px 0px var(--golden-accent)) drop-shadow(0px 4px 5px #000);
}

#hero-bg>div {
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    padding: calc(var(--navbar-height) + var(--rem-2-1));
}

#hero-bg .overlay {
    background-color: hsla(0, 0%, 0%, .75);
    backdrop-filter: var(--general-blur);
    height: 100%;
    width: 100%;
    position: absolute;
}

#introDiv {
    justify-content: flex-start;
    align-items: center;
    position: relative;

    width: 100rem;
    max-width: 100%;
    height: calc(100svh - var(--navbar-height) - 10rem);
    max-height: 75svh;

    padding: 0 var(--rem-4-1);
}

/* info */
#introInfo {
    z-index: 1;
    max-width: min(600px, calc(100vw - var(--rem-4-1)));
}

#introInfo>p,
#introInfo>h1 {
    text-shadow: var(--def-shadow);
}

#introInfo p#introDetails1,
#introInfo p#introDetails2 {
    font-weight: 200;
    font-size: var(--headers-5-font-size);
}

#introInfo li {
    list-style: none;
}

#introInfo img {
    width: 50px;
    filter: drop-shadow(black 0 0 2px);
}

#introInfo .button {
    filter: var(--def-filter-shadow);
}

/* image */
#introImg {
    /* justify-content: center; */
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    min-width: calc(320px - 4rem);
}

#introImg img {
    height: 100%;
    max-height: min(1000px, calc(100vw - var(--rem-4-1))*2);
    width: auto;
}

.webgl {
    display: none;
    height: 100%;
    width: 100%;
}

/*=========================================================================*/
/*                               Services                                  */

#services {
    justify-content: space-evenly;
}

.service-list {
    align-items: center;
    flex-wrap: wrap;
}

.card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    background-color: var(--dark-grey-mid);

    width: clamp(40rem, 8.523vw + 37.273rem, 70rem);
    max-width: 100%;
    aspect-ratio: 3 / 2;

    border-radius: var(--radius-2);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
    overflow: hidden;
}

.card:focus-within {
    outline: none;
    box-shadow: var(--focus-shadow);
}

.card:hover:not(.project-preview),
.card:focus-within:not(.project-preview) {
    transform: scale(1.02);
    transition: var(--default-transition);
}

.card a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card:focus-within :focus {
    outline: none;
    box-shadow: none;
}

.card .card-left {
    height: 100%;
}

.card img {
    height: clamp(20rem, 10vw + 17rem, 30rem);
    min-height: 100%;
}

.card .fit {
    height: 100%;
    width: 100%;
    max-width: unset;
    object-fit: cover;
}

.card .card-right {
    height: fit-content;
    width: 100%;
}

.card a:hover {
    color: #ffffff;
}

/*=========================================================================*/
/*                            Service pages                               */

.service-page .hero {
    position: relative;
    background-color: black;
}

.hero-background {
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.hero::before {
    content: "";
    background-color: hsla(0, 0%, 0%, .5);
    height: 100svh;
    width: 100svw;
    position: absolute;
    z-index: 1;
}

.service-page .hero h1 {
    font-size: clamp(5rem, 7.53vw + 2.59rem, 17.5rem);
    z-index: 3;
    text-shadow: var(--def-shadow);
}

#service-content {
    background-color: var(--background-secondary);
}

#tools {
    height: fit-content;
    width: 100%;
    /* border: solid 1px red; */
}

#tools img {
    height: clamp(5rem, 2.39vw + 4.235rem, 7.5rem);
    width: auto;
    /* border: solid 1px blue; */
}

#tools .tool {
    position: relative;
}

.tool-info {
    position: absolute;
    max-width: calc(100vw - 2*var(--rem-4-1));
    width: 50rem;
    height: fit-content;
    z-index: 1;
    top: calc(100% + var(--rem-1-05));
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--default-radius);
}

#tools .tool:hover .tool-info {
    display: flex;
}

#service-process {
    /* border: solid 1px red; */
    width: 75ch;
    max-width: 100%;
}

#service-process ol {
    display: flex;
    flex-direction: column;
    padding-left: var(--rem-4-1);
    gap: var(--rem-1-05);
}

#projects-preview,
#gallery-preview {
    width: 100%;
    /* overflow: hidden; */
    position: relative;
    /* border: solid 1px blue; */
    z-index: 0;
}

#projects-preview-limiter,
#gallery-preview-limiter {
    height: fit-content;
    overflow: hidden;
    /* border: solid 1px red; */
}

#projects-preview-list,
#gallery-preview-list {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    /* overflow: hidden; */
    width: fit-content;
    /* border: solid 1px green; */
    height: fit-content;
}

#projects-preview ul>li,
#gallery-preview ul>li {
    list-style: none;
    aspect-ratio: 1;
    background-size: cover;
    width: clamp(15rem, 14.34vw + 10.411rem, 30rem);
    border-radius: var(--default-radius);
    overflow: hidden;
    /* border: solid 1px greenyellow; */
}

#projects-preview ul>li {
    aspect-ratio: unset;
    width: 50rem;
    max-width: calc(100vw - 2*var(--rem-4-1));
}

#projects-preview .card:hover,
#projects-preview .card:focus-within {
    transform: scale(.98);
    transition: var(--default-transition);
}

#gallery-preview ul>li>a {
    width: 100%;
    height: 100%;
    position: relative;
}

#gallery-preview ul>li>a>div {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--general-blur);
}

#gallery-preview ul>li>a .fullscreen-prompt {
    display: none;
}

#gallery-preview ul>li>a .fullscreen-prompt p {
    font-size: var(--headers-3-font-size);
}

#gallery-preview ul>li>a:hover .fullscreen-prompt {
    bottom: 0;
    background: var(--dark-overlay);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--general-blur);
}

#projects-preview .projects-preview-nav,
#gallery-preview .gallery-preview-nav {
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 800px) {
    #service-process ol {
        display: flex;
        flex-direction: column;
    }

    #tools {
        position: relative;
    }

    #tools .tool {
        position: static;
    }

    .tool-info {
        max-width: 100%;
        width: 100%;
        top: calc(100% + var(--rem-1-05));
        left: 0;
        transform: translateX(0);
    }
}

/*=========================================================================*/
/*                             Testimonies                                 */

#testimonies {
    background-color: var(--background-secondary);
    padding-bottom: calc(var(--rem-4-1) + 8rem);
    height: fit-content;
    width: 100%;
}

#testimonies nav {
    width: 100%;
}

#testimonies ul {
    gap: 4rem;
}

.testimony {
    height: fit-content;
    width: 100%;
}

.testimony:nth-child(even) .avatar {
    order: +2;
}

.testimony:nth-child(even) .empty-space {
    order: -2;
}

.testimony:nth-child(odd) .bubble>svg {
    transform: rotate(180deg) translateX(-5px);
}

.testimony:nth-child(even) .bubble>svg {
    order: +1;
    transform: translateX(-5px);
}

#testimonies .bubble>svg {
    width: 6rem;
}

.avatar {
    position: relative;
}

.avatar,
.empty-space {
    width: 500px;
    max-width: calc(30svw - var(--rem-4-1));
}

/* ATTENTION remember to remove this once there are more*/
.empty-space {
    display: none;
}

.portrait-container {
    width: 100%;
    height: fit-content;
}

.testimony:nth-child(even) .portrait-container {
    transform: scaleX(-1);
}

.avatar img {
    max-height: auto;
    width: 90%;
}

.testimony_title {
    border-radius: var(--default-radius);
    /*position: absolute;
    top: 100%;*/
    width: 50rem;
    max-width: 100%;
}

.testimony_title p {
    font-size: var(--headers-5-font-size);
}

.bubble {
    width: 600px;
    max-width: 40svw;
}

.dialogue {
    width: 100%;
    border-radius: 50%;
    position: relative;
    text-align: center;
    padding: clamp(6rem, 0.575vw + 5.816rem, 8rem);
}

.translate-button {
    position: absolute;
    bottom: var(--rem-2-1);
    right: 50%;
    transform: translateX(50%);
    z-index: 1;
    /*font-size: var(--basic-font-size);*/
    border-radius: var(--default-radius);
    padding: var(--rem-1-05);
}

.translate-button svg {
    width: var(--headers-4-font-size);
    height: var(--headers-4-font-size);
}

@media (max-width: 1500px) {

    .empty-space {
        display: none;
    }

    .avatar {
        max-width: 40%;
    }

    .bubble {
        max-width: 60%;
    }
}

@media (max-width: 800px) {
    .bubble-cont {
        width: 100%;
        order: -1;
    }

    .avatar {
        height: fit-content;
    }

    .portrait-container {
        height: fit-content;
    }

    .avatar img {
        position: relative;
        height: fit-content;
        max-width: 90%;
    }

    #testimonies ul {
        gap: var(--rem-4-1);
    }

    .avatar {
        max-width: 100%;
    }

    .bubble {
        max-width: 100%;

        max-width: 100%;
    }

    .testimony_title {
        max-width: 100%;
    }

    .testimony:nth-child(odd) .bubble>svg,
    .testimony:nth-child(even) .bubble>svg {
        transform: rotate(90deg);
        order: 1;
        width: 4rem;
    }
}

/*=========================================================================*/
/*                               Work                                  */

/* Home page */
#project .card-left {
    pointer-events: none;
}

#project .card-right {
    padding-left: 0;
}

/* Work page */



/* Small box with button and logo */

#project-page .card-left {
    max-width: 100%;
    max-height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Larger box with information and teaser*/
#project-page .card-right {
    z-index: 1;
    max-width: 125ch;
    max-width: 100%;
}

#project-page .card-right h3 {
    font-weight: 600;
}

#project-page .card-right h5 {
    order: -1;
}

#project-page .project-box-preview {
    height: 50%;
    width: 100%;
}

#project-page .bottom-banner {
    display: flex;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

#project-page .bottom-banner img {
    width: 100%;
    height: auto;
}

@media (max-width: 800px) {
    #project-page ul {
        grid-template-columns: 1fr;
    }

    #project-page .card {
        grid-template-columns: 1fr;
        min-height: fit-content;
    }

    #project-page .card.has-bottom-banner {
        padding-bottom: calc(100vw * 0.1);
    }

    #project-page .card-left {
        display: none;
    }

}

/* ======================================================================== */
/*                               SkiNM                                    */
#skinm .one-page {
    position: relative;
    min-height: 100svh;
    height: max-content;
    max-height: unset;
}

#skinm .hero-content {
    height: calc(100svh - var(--navbar-height) - .27 * 100svw);
    min-height: 50svh;
}

#skinm .intro {
    width: 80ch;
    max-width: 100%;
    z-index: 1;
}

#skinm h2 {
    font-weight: 700;
}

#skinm p {
    width: 60ch;
    max-width: 100%;
    font-size: var(--headers-5-font-size);
}

#skinm img {
    width: 600px;
    max-width: 100%;
    font-size: var(--headers-5-font-size);
}

#skinm .title-logo {
    height: 35svh;
    max-width: 50%;
    object-fit: contain;
    z-index: 1;
}

#skinm .title-logo img {
    height: 100%;
    max-width: 50%;
    object-fit: contain;
    z-index: 1;
}

#skinm .bottom-banner {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    position: absolute;
    bottom: 0;
}

#skinm .eight-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*border-top: solid white 3px;*/
}

#skinm .logo-box {
    width: 25svw;
    height: 12svw
}

#skinm .six-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#skinm .color-box {
    position: relative;
    width: calc(100svw / 3);
    height: calc(100svh / 3.5);
}

#skinm .color-box img {
    position: absolute;
    width: 100%;
    bottom: 0;
}

#skinm .banner-box {
    position: relative;
    width: 100%;
    height: calc(100svh / 3.5);
}

#skinm .six-boxes .banner-box {
    height: calc(100vw / 7.5);
}

#skinm #big-banners .banner-box {
    height: calc(100vw / 7);
}

#skinm .banner-box img {
    position: absolute;
    width: 100%;
    bottom: 0;
}

#skinm .logo-box img {
    width: 100%;
}

#skinm .top-half,
#skinm .bottom-half {
    width: 100%;
    height: 100%;
}

#skinm .color-details {
    height: 100%;
}

#skinm #type p,
#skinm #type h2 {
    color: var(--skinm-midnight-blue) !important;
}

#skinm .banner-box img {
    position: absolute;
    bottom: 0;
}

/*  skinm COLORS  */

#skinm .blue {
    background-color: var(--skinm-clear-skies);
}

#skinm .green {
    background-color: var(--skinm-natural-green);
}

#skinm .yellow {
    background-color: var(--skinm-sunshine-yellow);
}

#skinm .orange {
    background-color: var(--skinm-orange);
}

#skinm .red {
    background-color: var(--skinm-rasberry);
}

#skinm .purple {
    background-color: var(--skinm-lavender);
}

#skinm .white {
    background-color: black;
}

#skinm .black {
    background-color: white;
}

#skinm #type {
    background-color: white;
}

@media (max-width: 1600px) {
    /*#skinm .six-boxes {
        grid-template-columns: repeat(2, 1fr);
    }*/

    /*#skinm .color-box {
        width: calc(100svw / 2);
        height: calc(100svh / 3.5);
    }*/

    #skinm .six-boxes .banner-box {
        height: calc(100vw / 7.5);
    }

    #skinm .banner-box {
        width: 100%;
        height: calc(100svh / 3.5);
    }

}

@media (max-width: 800px) {
    #skinm .one-page {
        min-height: 100svh;
        height: fit-content;
        max-height: fit-content;
    }

    #skinm #hero {
        padding-bottom: calc(100svw / 3);
    }

    #skinm .stick-up {
        justify-content: center;
    }

    #skinm .hero-content {
        height: fit-content;
        min-height: fit-content;
    }

    #skinm .title-logo {
        height: fit-content;
        max-width: 100%;
        object-fit: contain;
        z-index: 1;
    }

    #skinm .title-logo img {
        height: auto;
        max-width: 100%;
        object-fit: contain;
        z-index: 1;
    }

    #skinm .eight-boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #skinm .logo-box {
        width: 100%;
        height: 25svw;
    }

    #skinm .logo-box.blue {
        order: 1;
    }

    #skinm .logo-box.green {
        order: 3;
    }

    #skinm .logo-box.yellow {
        order: 5;
    }

    #skinm .logo-box.orange {
        order: 6;
    }

    #skinm .logo-box.red {
        order: 4;
    }

    #skinm .logo-box.purple {
        order: 2;
    }

    #skinm .logo-box.white {
        order: 8;
    }

    #skinm .logo-box.black {
        order: 7;
    }

    /*#skinm .six-boxes {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
*/
    #skinm .color-box {
        height: calc(100svh / 6);
    }

    #skinm .six-boxes .banner-box {
        height: calc(100vw / 5);
    }

    #skinm .banner-box {
        height: calc(100svh / 10);
    }
}

/* ======================================================================== */
/*                            La Strega Bianca                              */

#la-strega-bianca .intro {
    height: calc(100svh - 30svw);
    min-height: 50svh;
}

#la-strega-bianca #logo {
    height: 30svw;
    max-height: 50svh;
}

#la-strega-bianca #logo>div {
    height: 100%;
}

#la-strega-bianca .grey {
    background-color: grey;
}

#la-strega-bianca .black {
    background-color: rgb(255, 255, 255);
}

#la-strega-bianca #logo img {
    height: 100%;
    width: auto;
}

#la-strega-bianca #sailing-boat {
    height: 100svh;
    overflow: hidden;
    background-color: black;
}

#la-strega-bianca #sailing-boat img {
    height: 100%;
    width: auto;
    object-fit: cover;
}

@media (max-width: 800px) {
    #la-strega-bianca .intro {
        height: fit-content;
        min-height: fit-content;
        padding-top: var(--rem-8-1);
        padding-bottom: var(--rem-8-1);
    }

    #la-strega-bianca #logo {
        height: fit-content;
    }

    #la-strega-bianca #sailing-boat {
        order: -1;
        height: fit-content;
    }

    #la-strega-bianca #sailing-boat img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }
}

/* ======================================================================== */
/*                            Skogplanter                              */

#skogplanter #hero img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

#skogplanter h2,
#skogplanter h3 {
    font-weight: var(--headers-font-weight);
}

/*=========================================================================*/
/*                               Gallery                                  */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100svh;
}

.gallery-grid .card {
    display: flex;
}

.gallery-grid li.card {
    width: 100%;
    min-height: 100%;
    height: 100%;
}

.gallery-grid li>img {
    position: absolute;
    height: 100%;
    width: auto;
    right: 0;
    bottom: 0;
}

.gallery-grid li:nth-of-type(even)>img {
    left: 0;
}

.gallery-grid li>div {
    z-index: 2;
}

.gallery-grid p,
.gallery-grid h2 {
    text-shadow: var(--def-shadow);
}

/* tabs */
.gallery-tabs {
    padding: 0 var(--rem-1-05) var(--rem-1-05) var(--rem-1-05);
    gap: var(--rem-1-05);
}

.gallery-tab-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--button-height);
    /*width: 100%;*/
    cursor: pointer;
    text-transform: capitalize;
    font-size: var(--headers-5-font-size);
    font-weight: 500;
    border-radius: var(--default-radius);
    text-shadow: var(--def-shadow);
    position: relative;
    transition: none;
}

.gallery-tab-button.selected {
    border-radius: var(--default-radius) var(--default-radius) 0 0;
}

.gallery-tab-button.selected .gallery-tab-flare {
    content: "";
    position: absolute;
    height: var(--rem-1-05);
    width: 100%;
    background-color: inherit;
    top: 100%;
    transition: none;
}

.gallery-tab-button.selected::before,
.gallery-tab-button.selected::after {
    content: "";
    position: absolute;
    height: calc(2*var(--rem-1-05));
    width: calc(2*var(--rem-1-05));
    background-color: inherit;
    top: calc(100% - var(--rem-1-05));
    z-index: -2;
    transition: none;
}

.gallery-tab-button.selected .gallery-tab-flare::before,
.gallery-tab-button.selected .gallery-tab-flare::after {
    content: "";
    position: absolute;
    height: calc(2*var(--rem-1-05));
    width: calc(2*var(--rem-1-05));
    background-color: var(--background-main);
    bottom: 0;
    z-index: -1;
    transition: none;
}

.gallery-tab-button.selected::before,
.gallery-tab-button.selected .gallery-tab-flare::before {
    right: 100%;
}

.gallery-tab-button.selected::after,
.gallery-tab-button.selected .gallery-tab-flare::after {
    left: 100%;
}

.gallery-tab-button.selected .gallery-tab-flare::before {
    border-radius: 0 0 calc(2*var(--rem-1-05)) 0;
}

.gallery-tab-button.selected .gallery-tab-flare::after {
    border-radius: 0 0 0 calc(2*var(--rem-1-05));
}


.gallery-tab-button:not(#gallery-back-button) {
    flex-grow: 1;
}

#gallery-back-button {
    width: var(--button-height);
    padding: 0 var(--rem-1-05);
    background-color: var(--text-main);
    /* color: var(--background-main);
    text-shadow: none; */
}

#gallery-back-button:hover {
    background-color: var(--background-secondary);
    color: var(--text-main);
}

.gallery-line {
    height: calc(var(--rem-1-05) / 2);
    width: 100%;
}

@media (max-width: 800px) {
    /*.gallery-tabs {
        padding: 0 var(--rem-2-1);
        gap: var(--rem-2-1);
    }

    .gallery-tab-button:not(#gallery-back-button):not(.selected) {
        display: none;
    }

    .gallery-tab-button.selected {
        width: 100%;
        border-radius: var(--default-radius);
    }

    #gallery-back-button {
        border-radius: var(--default-radius);
        width: var(--button-height);
    }

    .gallery-line {
        display: none;
    }

    .gallery-tab-button.selected::before,
    .gallery-tab-button.selected::after,
    .gallery-tab-button.selected .gallery-tab-flare::before,
    .gallery-tab-button.selected .gallery-tab-flare::after,
    .gallery-tab-button.selected .gallery-tab-flare {
        display: none;
    }*/
}

.gallery-box {
    width: 100%;
    display: none;
}

.gallery-tab-button:active:not(.selected) {
    background-color: var(--background-main);
    color: var(--text-main);
    text-shadow: none;
}

/* media view */

#media-fullscreen .gallery-tabs {
    height: 0;
    width: 0;
    padding: 0;
    gap: 0;
    position: relative;
}

.gallery-back-button {
    display: flex;
    align-items: center;
    justify-content: left;
    height: var(--button-height);
    width: var(--button-height);
    border-radius: var(--default-radius);
    position: absolute;
    top: calc(100% + var(--rem-1-05));
    left: var(--rem-1-05);
    z-index: 6;
    padding: 0 var(--rem-1-05);
}

.gallery-back-button:hover {
    width: calc(2*var(--button-height) + 3*var(--rem-1-05));
}

.gallery-back-button svg {
    fill: var(--text-main);
}

.gallery-head {
    display: flex;
    text-align: center;
    align-items: center;
    text-transform: capitalize;
    height: calc(2 * var(--navbar-height));
}

.model-media {
    position: relative;
}

.model-media .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    align-items: start;
    justify-content: end;
}

.model-media .overlay svg {
    height: 25%;
    width: auto;
    object-fit: cover;
}

#previewer-3D {
    cursor: grab;
}

#model-overlay {
    position: absolute;
    background-color: var(--dark-overlay);
    height: 100%;
    pointer-events: none;
}

#model-overlay svg {
    height: 20rem;
    width: auto;
    object-fit: cover;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    width: 100%;
    background-color: var(--background-main);
}

.media-grid>li {
    list-style: none;
    aspect-ratio: 1;
    background-size: cover;
    max-width: 700px;
    border-radius: var(--default-radius);
    overflow: hidden;
}

.media-grid>li>a {
    width: 100%;
    height: 100%;
    position: relative;
}

.media-grid>li>a>div {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--general-blur);
}

.media-grid>li>a .fullscreen-prompt {
    display: none;
}

.media-grid>li>a .fullscreen-prompt p {
    font-size: var(--headers-3-font-size);
}

.media-grid>li>a:hover .fullscreen-prompt {
    bottom: 0;
    background: var(--dark-overlay);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--general-blur);
}

#menu-3D {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(128, 128, 128, 0.459);
    backdrop-filter: var(--general-blur);
    border-radius: 0 var(--default-radius) 0 0;
    width: fit-content;
    max-width: 50%;
}

/* custom checkbox */

.media-check-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rem-2-1);
    color: var(--text-main);
    font-size: var(--basic-font-size);
}

.media-check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.media-check {
    height: 2rem;
    width: 2rem;
    background-color: var(--background-main);
    border-radius: 50%;
    cursor: pointer;

    box-shadow: inset var(--def-shadow);

    display: flex;
    justify-content: center;
    align-items: center;
}

.media-check-container input:checked~.media-check {
    box-shadow: inset var(--min-shadow);
}

.media-check:after {
    content: "✓";
    display: none;
    font-size: 125%;
    color: white;
    text-shadow: var(--text-shadow);
}

input:checked~.media-check:after {
    display: block;
}

/*=========================================================================*/
/*                            About section                               */

#about {
    padding-top: var(--navbar-height);
}

#about-presentation{
    max-width: 85ch;
}

#about-presentation h1 {
    width: fit-content;
}

#about-presentation h1 span {
    position: relative;
    right: 50%;
    font-size: var(--headers-4-font-size);
}

.motto {
    font-size: var(--headers-4-font-size);
}

#about span,
.motto {
    display: block;
    font-family: var(--accent-font);
}

.specs-div {
    width: fit-content;
}

#about-specs {
    width: 300px;
    max-width: 100%;
    background-color: var(--background-secondary);
    border-radius: var(--default-radius);
}

#about-game {
    height: fit-content;
    width: 100%;
    background: rgb(0, 0, 0);
    border-radius: var(--default-radius);
    flex-grow: 1;
    border: 2px solid var(--golden-accent);
    overflow: hidden;
}

#about-mini-game {
    display: none;
    height: fit-content;
    width: 100%;
    max-width: 300px;
    background: rgb(0, 0, 0);
    border-radius: var(--default-radius);
    flex-grow: 1;
    border: 2px solid var(--golden-accent);
    overflow: hidden;
}

#about-phone-game {
    display: none;
    background: rgb(0, 0, 0);
    width: 100%;
    height: 50svh;
    border-top: 2px solid var(--orange-accent);
    overflow: hidden;
}

.explore-button {
    background-color: var(--orange-accent);
}

.explore-button:hover {
    background-color: rgb(255, 205, 148);
    color: black;
}

.explore-button:active {
    background-color: rgb(255, 255, 255);
}

.explore-link {
    color: var(--orange-accent);
}

.explore-link:hover {
    color: rgb(255, 205, 148);
}

.explore-link:active {
    color: rgb(255, 255, 255);
}

@media (max-width: 1400px) {
    #about-presentation h1 span {
        right: 0;
    }
}

@media (max-width: 1200px) {
    .not-not-portrait {
        display: flex;
        align-items: stretch;
    }

    #about-portrait {
        display: none;
    }

    #about-mini-portrait {
        display: block;
    }

    #about-game {
        display: none;
    }

    #about-mini-game {
        display: flex;
    }
}

@media (max-width: 800px) {
    .not-not-portrait {
        padding: var(--rem-4-1);
    }

    .not-portrait {
        flex-direction: column;
        align-items: center;
    }

    .specs-div {
        width: 100%;
        padding-bottom: calc(var(--footer-height) - var(--rem-2-1));
    }

    #about-specs {
        width: 100%;
    }

    #about-mini-game {
        display: none;
    }

    #about-phone-game {
        display: flex;
    }

    #about-mini-portrait {
        display: none;
    }

    #about-phone-portrait {
        display: block;
    }
}


/*=========================================================================*/
/*                                 Media                                   */

#media-content {
    width: 100%;
    height: fit-content;
    background: black;
    position: relative;
}

#media-content>img {
    max-height: 75svh;
    width: auto;
}

#media-content video {
    height: 75svh;
    width: auto;
}

#media-content canvas {
    height: 75svh;
    width: 100%;
}

#media-content.loading {
    height: 75svh;
}

#loading-graphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: var(--general-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#loading-graphic img {
    width: fit-content;
    height: fit-content;
}

#loading-graphic.hidden {
    display: none;
}

.media-details {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: var(--default-radius) 0 0 0;
    padding: var(--rem-1-05) var(--rem-1-05) var(--rem-1-05) var(--rem-2-1);
}

.media-details>p {
    color: white;
    text-shadow: var(--text-shadow);
    font-weight: 200;
}

.media-nav-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(1.5*var(--button-height) + 2*var(--rem-2-1));
    width: 100%;
}

.media-nav-line .media-title {
    height: 100%;
    width: 100%;
    border-left: 1px solid var(--background-secondary);
    border-right: 1px solid var(--background-secondary);
}

.media-nav-line .media-title h1 {
    font-size: var(--headers-3-font-size);
}

.media-nav {
    position: absolute;
    height: calc(1.5*var(--button-height));
    width: calc(2*var(--button-height));
    padding-left: var(--rem-2-1);
    padding-right: var(--rem-2-1);
    cursor: pointer;
}

.media-nav:hover {
    width: calc(3*var(--button-height) + 3*var(--rem-2-1));
}

.media-nav:hover p {
    font-size: var(--headers-5-font-size);
}

.media-nav svg {
    text-shadow: var(--text-shadow);
    fill: white;
    width: var(--button-height);
    height: var(--button-height);
}

.nav-previous {
    left: 0;
    justify-content: left;
    border-radius: 0 var(--default-radius) var(--default-radius) 0;
}

.nav-next {
    right: 0;
    justify-content: right;
    border-radius: var(--default-radius) 0 0 var(--default-radius);
}

.media-thumbnails {
    width: 600px;
    max-width: 100%;
    height: 600px;
    position: relative;
}

.media-thumbnail {
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 100%;
}

.media-thumbnail-600 {
    width: 600px;
    height: 600px;
}

.media-thumbnail-400 {
    width: 400px;
    height: 400px;
}

.media-thumbnail-200 {
    width: 200px;
    height: 200px;
}

.submit-button {
    height: var(--rem-3-25);
}

@media (max-width: 1200px) {
    .media-intro {
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

}

@media (max-width: 800px) {
    #media-content>img {
        height: auto;
        width: 100%;
        max-height: 75svh;
    }

    #media-content>video {
        height: auto;
        width: 100%;
    }

    #loading-graphic img {
        width: fit-content;
        height: fit-content;
    }

    .media-nav-line .media-title {
        padding: 0 calc(2*var(--button-height));
    }
}

/*************************************************************************************************
                                        footer
*************************************************************************************************/
footer {
    background-image: url("../assets/placeholders/office-background.png");
    background-size: cover;
    background-position: bottom;
    position: relative;
    border-top: 2px solid var(--golden-accent);
    /*filter: drop-shadow(0px -2px 0px var(--golden-accent)) drop-shadow(0px 4px 5px #000);*/
}

footer .overlay {
    background-color: hsla(0, 0%, 0%, .75);
    position: absolute;
    height: 100%;
    width: 100%;
    backdrop-filter: var(--general-blur);
}

.contact-title {
    width: fit-content;
    align-self: center;
}

.contact-form p,
.contact-form h2 {
    color: var(--form-text);
}

.contact-title p {
    order: -1;
    font-weight: 400;
    font-family: var(--accent-font);
    font-size: var(--headers-4-font-size);
    color: var(--golden-accent);
}


footer p,
footer a,
footer h2 {
    text-shadow: var(--text-shadow);
    z-index: 1;
}

/* Scroll down - arrow */

#scroll-down {
    left: var(--rem-1-05);
    bottom: var(--rem-1-05);
    border-radius: 50%;
}

#scroll-down svg,
#scroll-up svg {
    fill: var(--button-text-dark);
    filter: drop-shadow(black 0 0 2px);
    display: block;
    width: calc(clamp(4rem, 0.602vw + 3.807rem, 5rem) / 2.5);
}

#scroll-up svg {
    transform: rotate(180deg);
}

#scroll-up {
    left: var(--rem-1-05);
    top: var(--rem-1-05);
    border-radius: 50%;
}

.left-navbar #scroll-down,
.left-navbar #scroll-up {
    left: var(--sidebar-width);
}

.fix-button {
    position: fixed;
    height: clamp(4rem, 0.602vw + 3.807rem, 5rem);
    width: clamp(4rem, 0.602vw + 3.807rem, 5rem);
    z-index: 11;
}

.hidden {
    display: none;
}

#backend-message {
    position: fixed;
    z-index: 15;
    top: 50%;
    left: 50%;
    width: fit-content;
    min-width: 50%;
    max-width: calc(100% - var(--rem-4-1)*2);
    min-height: 50%;
    border-radius: calc(.8 * var(--button-height)/2);
    background-color: var(--backend-message-bg);
    backdrop-filter: var(--general-blur);
    overflow: hidden;
    transform: translate(-50%, -50%);
}

.message-text {
    color: var(--backend-message-color);
}

.exit-button {
    position: absolute;
    top: .5rem;
    right: .5rem;
    height: calc(.8 * var(--button-height));
    width: calc(.8 * var(--button-height));
    font-size: var(--headers-6-font-size);
    border: 1px solid;
    border-radius: 50%;
    background: none;
}

.exit-button:hover {
    background: var(--light-overlay);
}

.exit-button:active {
    background: var(--dark-overlay);
}

@media screen and (max-width: 800px) {
    #backend-message {
        min-width: calc(100% - var(--rem-4-1)*2);
    }
}


#arrow {
    position: absolute;
    top: 100svh;
    z-index: 10;
    width: 100%;
}

#arrow.visible .arrow {
    opacity: 1;
}

.arrow {
    transition: opacity .5s;
    opacity: 0;
    position: absolute;
    fill: var(--text-main);
    filter: drop-shadow(black 0 0 2px);
    z-index: 10;
    width: calc(2 * clamp(2rem, 1.205vw + 1.614rem, 4rem));
    bottom: 4rem;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: arrow;
    animation-delay: 1s;
}


@keyframes arrow {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(0, 10px);
    }

    20% {
        transform: translate(0, 0);
    }

    30% {
        transform: translate(0, 10px);
    }

    40% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

/*=========================================================================*/
/*                           MEDIA QUERIES                                 */
/*=========================================================================*/

@container (max-width: 800px) {

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-align: center;
    }

    #navbar-nav {
        display: none;
    }

    .navbar-toggler {
        display: block;
    }


    #lang-menu-mobile.open {
        top: -1rem;
        left: 4rem;
        width: max-content;
    }

    #lang-menu-mobile.open ul {
        display: flex;
        flex-direction: row;
    }

    /* Article */
    .sidebar {
        order: -1;
        width: 100%;
    }

    article input,
    article textarea {
        text-align: center;
    }

    #world-nav nav {
        column-count: 2;
    }

    .article-content {
        width: 100%;
    }

    .article-content ul {
        display: flex;
        flex-direction: column;
        align-self: center;
        align-items: flex-start;
    }

    /* intro section */
    #introDiv {
        padding: 0 var(--rem-4-1);
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #introInfo {
        align-items: center;
        text-align: center;
        justify-content: center;
        position: absolute;
        bottom: var(--rem-4-1);
    }

    #introImg {
        position: relative;
        right: 0;
        width: 100%;
        min-width: 200px;
        max-width: 450px;
        height: 100%;
        align-items: flex-start;
    }

    /* skinm */

    .mobile-pad4 {
        padding: 0 var(--rem-4-1);
    }

    .mobile-pad2 {
        padding: 0 var(--rem-2-1);
    }

    .flex-row {
        flex-direction: column;
        /* gap: 0; */
    }

    .project-40 {
        height: 40%;
        max-width: 100%;
        width: 100%;
    }

    .project-60 {
        height: auto;
    }

    .project-40 img {
        max-height: calc(100% - 3 * var(--rem-2-1) - var(--button-height));
    }

    .mobile-bottom-banner {
        padding-bottom: calc(100vw/15);
    }

    .left-foot {
        width: 100%;
        padding-top: 2rem;
        justify-content: flex-start;
    }

    .right-foot {
        width: 100%;
        /*position: absolute;*/
        bottom: 0;
    }

    #contact-graphic {
        position: relative;
        bottom: 0;
        right: 0;
        height: 100%;
        width: 100%;
        min-width: unset;
    }

    .left,
    .right {
        text-align: center;
        align-items: center;
    }

    #skill-div {
        order: 2;
    }

    #my-story-div {
        width: 100%;
    }

    /* gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .illustration-grid {
        grid-template-columns: 1fr 1fr;
    }

    .illustration-grid>button {
        max-height: 50vw;
    }

    #media-content img {
        height: auto;
        width: 100%;
        max-height: 75svh;
    }

    #media-content video {
        height: auto;
        width: 100%;
    }

    .media-row {
        flex-direction: column;
    }
}

@media only screen and (max-width: 800px) {

    body.flex-row {
        flex-direction: column;
    }

    #main.left-navbar {
        margin-left: 0;
    }

    #outline-nav.left-navbar {
        display: none;
        order: +1;
    }

    .left-navbar-toggler {
        display: none;
    }

    .left-navbar .banner {
        padding-top: calc(var(--navbar-height) + var(--rem-4-1));
    }

    /* Article */
    main.article {
        padding-top: var(--navbar-height);
        padding-bottom: var(--footer-height);
    }

    .sidebar {
        order: -1;
        width: 100%;
    }

    article input,
    article textarea {
        text-align: center;
    }

    #world-nav nav {
        column-count: 2;
    }

    .article-content {
        width: 100%;
    }

    .article-content ul {
        display: flex;
        flex-direction: column;
        align-self: center;
        align-items: flex-start;
    }

    /* intro section */
    #introDiv {
        padding: 0 var(--rem-4-1);
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #introInfo {
        align-items: center;
        text-align: center;
        justify-content: center;
        position: absolute;
        bottom: var(--rem-4-1);
    }

    #introImg {
        position: relative;
        right: 0;
        width: 100%;
        min-width: 200px;
        max-width: 450px;
        height: 100%;
    }

    /* skinm */

    .mobile-pad4 {
        padding: 0 var(--rem-4-1);
    }

    .mobile-pad2 {
        padding: 0 var(--rem-2-1);
    }

    .flex-row {
        flex-direction: column;
        /* gap: 0; */
    }

    .project-box {
        max-height: 100svh;
        height: fit-content;
    }

    .project-40 {
        height: 40%;
        max-width: 100%;
        width: 100%;
    }

    .project-60 {
        height: unset;
        max-width: 100%;
        width: 100%;
    }

    .skinm-box .project-60 {
        height: unset;
        width: unset;
    }

    .project-40 img {
        max-height: calc(40svh - 3 * var(--rem-2-1) - var(--button-height));
    }

    .mobile-bottom-banner {
        padding-bottom: calc(100vw/15);
    }

    .left-foot {
        width: 100%;
        justify-content: flex-start;
    }

    .right-foot {
        width: 100%;
        /*position: absolute;*/
        bottom: 0;
    }

    #contact-graphic {
        position: relative;
        height: 100%;
        width: 100%;
        min-width: unset;
    }

    footer {
        justify-content: center;
    }

    .left,
    .right {
        text-align: center;
        align-items: center;
    }


    #skill-div {
        order: 2;
    }

    #my-story-div {
        width: 100%;
    }

    /* gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .illustration-grid {
        grid-template-columns: 1fr 1fr;
    }

    .illustration-grid>button {
        max-height: 50vw;
    }



    .media-row {
        flex-direction: column;
    }

    .left-navbar #scroll-down,
    .left-navbar #scroll-up {
        left: 0;
    }
}