/**** [ SHARED BEGINS ] ****/
@font-face {
    font-family: "Geometrica ExtLt geometric";
    src:
        url("./fonts/Geometrica-ExtraLight.woff2") format("woff2"),
        url("./fonts/Geometrica-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Dry Whiteboard Marker";
    src:
        url("./fonts/DryWhiteboardMarker-Regular.woff2") format("woff2"),
        url("./fonts/DryWhiteboardMarker-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;

    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    color: black;
    background-color: rgb(14, 42, 71);

    -webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

img {
    pointer-events: none;
}

a {
    color: inherit;
    text-decoration: none;
}

section {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    height: 100vh;
    width: 100%;
    padding-right: 6vw;
}

.subtitle {
    text-align: right;
    font-size: 20px;
    padding: 16px 0;
}

.content-wrapper {
    margin: auto 0;
}

.content-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 800px;
}

.content-row > div {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;

    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* hidding non-active sections on large viewports */
@media (width >= 1300px) {
    section:not(.active) {
        display: none;
    }
}

@media (width < 1300px) {
    body > *:not(section#landing),
    body > *:not(section#landing) * {
        display: none;
    }
}

.absolute-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/**** [ END OF SHARED ] ****/
/**** [ LANDING SECTION BEGINS ] ****/
#landing {
    color: #fff;
}

body.landing {
    background-color: #0e2a47;
}

#landing > * {
    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#landing > h1 {
    padding-top: 12vh;
    font-size: 44px;
}

#landing > h2 {
    font-size: 32px;
}

#landing > p {
    margin: 8px 0;
}

#cv-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 500px;
    height: 60px;
    margin: 20px 0;
}

#cv-wrapper > a {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 2px solid white;
    cursor: pointer;

    -webkit-transition: border-color 0.25s ease-in-out;
    -ms-transition: border-color 0.25s ease-in-out;
    transition: border-color 0.25s ease-in-out;
}

#cv-wrapper > a:hover {
    border-color: orange;
}

#cv-wrapper img {
    height: 28px;
    margin-right: 8px;
}

.oninit-fade {
    opacity: 0;
}

#landing > h1.oninit-fade {
    animation-delay: 0.5s;
}

#landing > h2.oninit-fade {
    animation-delay: 2s;
}

#landing > p.oninit-fade {
    animation-delay: 3.75s;
}

#landing > span.oninit-fade {
    animation-delay: 5s;
}

#cv-wrapper.oninit-fade {
    animation-delay: 5.5s;
}

#landing-bg-plane {
    background-size: cover;
    overflow: clip;
}

#mixy-square-wrapper {
    display: block;
    height: 100%;

    animation: squareDance;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease 0.5s;
}

#mixy-square {
    position: absolute;
    bottom: 12vh;
    right: 205px;
    width: 200px;
    height: 200px;
    border-radius: 52px;
    background-position: top;

    -webkit-transform: rotate(-6deg) scaleY(-1);
    -ms-transform: rotate(-6deg) scaleY(-1);
    transform: rotate(-6deg) scaleY(-1);
}

.mixy-animation-step-1 {
    box-shadow: 20px 20px #004cff8f;
}

.mixy-animation-step-2 {
    box-shadow:
        14px 14px #0087ff87,
        20px 20px #004cff8f;
}

.mixy-animation-step-3 {
    box-shadow:
        8px 8px #00c3ff87,
        14px 14px #0087ff87,
        20px 20px #004cff8f;
}

.mixy-animation-step-4 {
    outline: 2px solid #ffffffa0;
    background-size: auto;
    background-image: url("./img/mixy.jpg");
}

@media (width < 1300px) {
    #landing > h1 {
        padding-top: 20vh;
    }

    #landing > h2 {
        padding-top: 8px;
        text-align: right;
        text-wrap: balance;
    }

    #landing > p,
    #landing > span {
        display: none;
    }

    #cv-wrapper {
        margin: 24px 0;
    }

    #cv-wrapper.oninit-fade {
        animation-delay: 3.75s;
    }

    #landing-socials-wrapper {
        opacity: 0;
    }

    #landing-socials-wrapper > div,
    #landing-socials-wrapper > a {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 12px 0;

        -webkit-transition: color 0.25s ease-in-out;
        -ms-transition: color 0.25s ease-in-out;
        transition: color 0.25s ease-in-out;
    }

    #landing-socials-wrapper img {
        max-height: 20px;
        margin-left: 12px;
        width: 20px;
        height: 20px;
        filter: invert();
    }

    #landing-socials-wrapper > div:hover,
    #landing-socials-wrapper > a:hover {
        cursor: pointer;
        font-weight: 500;
        color: orange;
    }

    #landing-socials-wrapper.oninit-fade {
        animation-delay: 4.75s;
    }

    #landing-bg-plane {
        background-size: cover;
        overflow: clip;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1010%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M627.443%2c144.459C644.735%2c145.006%2c660.512%2c134.846%2c669.154%2c119.858C677.788%2c104.885%2c678.413%2c86.304%2c669.522%2c71.482C660.866%2c57.053%2c644.24%2c49.347%2c627.443%2c50.328C612.16%2c51.22%2c600.551%2c62.574%2c593.095%2c75.945C585.87%2c88.902%2c583.415%2c104.095%2c590.064%2c117.357C597.457%2c132.103%2c610.956%2c143.938%2c627.443%2c144.459' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M887.5903571659624 97.01882484304014L867.1082026408478 168.44858637490609 984.493922201204 163.45693739664495z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-5.56473117922183 542.7531520606913L92.61478984755868 505.06556496150677 54.92720274837422 406.8860439347263-43.2523182784063 444.5736310339107z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M764.5088206484243 378.6155377324164L795.6678772733529 459.78765541219286 845.6809383282007 347.4564811074877z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M96.509%2c240.458C133.188%2c240.357%2c161.708%2c211.246%2c178.46%2c178.616C193.688%2c148.954%2c192.486%2c114.387%2c176.155%2c85.319C159.456%2c55.596%2c130.549%2c34.646%2c96.509%2c32.751C58.813%2c30.653%2c18.454%2c42.643%2c-0.129%2c75.507C-18.504%2c108.003%2c-5.096%2c146.859%2c13.775%2c179.069C32.38%2c210.826%2c59.703%2c240.559%2c96.509%2c240.458' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M77.1881696154571 629.1496021483823L237.97673715122994 660.4037336117967 269.2308686146443 499.6151660760238 108.44230107887145 468.3610346126095z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1222.9181460354503 120.75224660600787L1246.9388971710139 204.52256106807985 1330.7092116330857 180.50180993251632 1306.6884604975223 96.73149547044434z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M527.7502306949543 591.5373086392742L475.9439869289529 431.57552888862284 375.7022587182671 539.0716216605608z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1047.8527360309708 348.3508853143413L1152.3239692400732 449.4301713740713 1185.2128058101537 326.68736229270206z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M637.1689443330797 390.15491394895236L714.6121032531661 312.7117550288659 559.7257854129932 235.26859610877952z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M466.407%2c155.234C492.616%2c155.343%2c515.891%2c139.479%2c528.817%2c116.679C541.562%2c94.2%2c542.897%2c66.308%2c529.272%2c44.351C516.289%2c23.43%2c491.025%2c16.559%2c466.407%2c16.107C440.754%2c15.636%2c412.848%2c20.11%2c399.41%2c41.966C385.489%2c64.609%2c391.358%2c93.285%2c404.89%2c116.163C418.145%2c138.572%2c440.371%2c155.126%2c466.407%2c155.234' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M458.94899255090223 78.39927462115999L378.67753081216324-94.17262682878618 280.88405685742373 40.42854266258587z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M870.5729871191013 130.19569100613896L984.3250813119753 144.2727473920953 946.7910938457785 51.37286845821956z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M873.7163444493424 181.9892144905299L787.9836357554262 235.56095660952843 841.5553778744247 321.2936653034445 927.2880865683409 267.72192318444604z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1045.651%2c379.445C1101.778%2c378.562%2c1130.554%2c318.42%2c1157.673%2c269.272C1183.455%2c222.547%2c1212.597%2c169.807%2c1187.233%2c122.854C1161.059%2c74.402%2c1100.718%2c61.323%2c1045.651%2c61.905C991.813%2c62.474%2c935.493%2c78.832%2c909.162%2c125.795C883.265%2c171.985%2c902.264%2c226.262%2c927.356%2c272.894C954.308%2c322.982%2c988.779%2c380.339%2c1045.651%2c379.445' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-30.057746921058424 150.34383288567864L83.53085445296885 102.12833219393234 35.31535376122255-11.46026918009494-78.27324761280472 36.75523151165136z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M877.8257929944552 529.0686844677487L872.8819838533434 387.4965137204768 736.2536222471833 534.0124936088605z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M856.196039117611 121.46836633067745L802.1338695517924 90.25555817887687 782.3457421070008 186.9552166035052z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1206.46765138126 90.56141910261776L1173.8051459558717-50.91543514112813 1032.3282917121257-18.252929715739597 1064.9907971375142 123.22392452800628z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M238.002%2c665.512C275.281%2c666.453%2c309.088%2c646.316%2c329.349%2c615.01C351.741%2c580.412%2c363.599%2c537.292%2c344.682%2c500.678C324.409%2c461.438%2c282.083%2c435.432%2c238.002%2c438.202C197.486%2c440.748%2c169.991%2c476.249%2c152.261%2c512.768C136.993%2c544.215%2c137.194%2c580.11%2c154.305%2c610.593C171.812%2c641.78%2c202.248%2c664.61%2c238.002%2c665.512' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1010'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
    }

    #mixy-square {
        top: 12vh;
        left: calc(50% - 100px);

        -webkit-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
}

@media (width >= 1300px) {
    #landing-bg-plane {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1088%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M1020.4243632177827 450.40652040994024L1057.2743077104176 537.2195493233877 1107.23739213123 413.55657591730545z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1362.628%2c297.577C1392.059%2c298.252%2c1417.574%2c279.247%2c1432.472%2c253.856C1447.571%2c228.122%2c1451.902%2c196.44%2c1437.205%2c170.474C1422.311%2c144.16%2c1392.858%2c129.816%2c1362.628%2c130.456C1333.485%2c131.073%2c1307.102%2c147.83%2c1293.328%2c173.521C1280.262%2c197.892%2c1284.636%2c226.632%2c1298.122%2c250.774C1312.008%2c275.631%2c1334.162%2c296.924%2c1362.628%2c297.577' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M427.52%2c275.626C484.797%2c277.394%2c545.385%2c262.684%2c575.604%2c213.995C607.21%2c163.072%2c602.909%2c96.315%2c569.829%2c46.337C539.668%2c0.769%2c482.155%2c-8.629%2c427.52%2c-9.734C370.134%2c-10.895%2c305.074%2c-8.442%2c274.874%2c40.369C243.65%2c90.836%2c262.166%2c155.533%2c294.468%2c205.317C323.732%2c250.419%2c373.782%2c273.967%2c427.52%2c275.626' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M517.0030413846914 447.5427487742459L446.62638811346517 513.1700396615438 512.2536790007631 583.5466929327702 582.6303322719893 517.9194020454722z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1001.8459350447464 504.18832712166284L1164.6385750370055 541.7719694452306 1202.2222173605733 378.9793294529717 1039.4295773683143 341.3956871294039z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M141.86593016177852 510.68404631800536L241.97446678382488 481.97838536656695 148.8617070456441 346.1684109092166z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M501.6550778537473 273.79612553269914L468.8578105082193 415.8566977823011 610.9183827578213 448.6539651278291 643.7156501033493 306.5933928782271z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M424.6336863973719 60.991343127099476L402.01442512829647-29.729558701574092 277.2427030198238 49.55978411637586z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1088'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");

        -webkit-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #landing-socials-wrapper {
        display: none;
    }
}

@media (height<800px) and (max-aspect-ratio: 1) {
    #mixy-square {
        top: 6vh;
        width: 160px;
        height: 160px;
    }
}

/**** [ END OF LANDING SECTION ] ****/
/**** [ TECHSTACK SECTION BEGINS ] ****/

body.techstack {
    background-color: #dadee1;
}

body.techstack > #menu {
    color: #000;
}

body.techstack > #menu span {
    background-color: #000;
}

#language-experience > div {
    width: 76px;
    height: 60px;
    cursor: default;
}

#language-experience img {
    max-width: 40px;
    max-height: 40px;
}

#language-experience + .subtitle {
    margin-top: 30px;
}

#techstacks-experience > div {
    width: 25%;
    height: 100px;
    border-bottom: 2px solid transparent;
}

#techstacks-experience > div:hover,
#techstacks-experience > div.active {
    border-bottom-color: orange;
}

#techstacks-experience span {
    padding: 0 8px;
    pointer-events: none;
}

#techstacks-experience img {
    max-width: 55px;
}

#techstack-details-wrapper {
    max-width: 750px;
    height: 200px;
    padding-top: 20px;

    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#techstack-details-wrapper > div:not(.active) {
    display: none;
}

#techstack-details-wrapper a {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 20px;
    background-image: url("./icons/github.svg");
    cursor: pointer;
}

#techstack-details-wrapper a.homepage-link {
    width: 20px;
    height: 20px;
    background-image: url("./icons/external.svg");
}

#techstack-details-wrapper > div > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 80px;
    padding: 20px 0px;
}

#techstack-details-wrapper > div > p {
    padding: 4px 0px;
}

#techstack-details-wrapper ul {
    padding-left: 50px;
    list-style-type: "🔹  ";
}

#techstack-details-wrapper img {
    max-width: 150px;
    max-height: 100%;
}

#leggeralogo {
    font-size: 18px;
    font-family: "Righteous", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#techstack-details-wrapper img#suecabotlogo {
    max-width: 32px;
    max-height: 32px;
    margin-top: -2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#suecabotlogo + span {
    color: green;
    font-weight: bold;
    padding: 0px 8px 0px 4px;
}

#suecabotlogo + span + span {
    border-radius: 4px;
    padding: 2px 4px;
    background-color: rgb(88, 101, 242);
    color: #fff;
    font-size: 8px;
    font-weight: 500;
}

#techstack-animation-wrapper {
    animation-duration: 0.5s;
}

#techstack-bg-plane {
    --s: 136px;
    --c1: #fff;
    --c2: #ddd;
    --c3: #ccc;
    --_c: 75%, var(--c3) 52.72deg, #0000 0;
    --_g1: conic-gradient(from -116.36deg at 25% var(--_c));
    --_g2: conic-gradient(from 63.43deg at 75% var(--_c));

    height: calc(100vh + calc(2 * 136px));
    top: -136px;
    background:
        var(--_g1),
        var(--_g1) calc(3 * var(--s)) calc(var(--s) / 2),
        var(--_g2),
        var(--_g2) calc(3 * var(--s)) calc(var(--s) / 2),
        conic-gradient(
            var(--c2) 63.43deg,
            var(--c1) 0 116.36deg,
            var(--c2) 0 180deg,
            var(--c1) 0 243.43deg,
            var(--c2) 0 296.15deg,
            var(--c1) 0
        );
    background-size: calc(2 * var(--s)) var(--s);

    animation: fadeInThird;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/**** [ END OF TECHSTACK SECTION ] ****/
/**** [ HARDWARE SECTION BEGINS ] ****/

section#hardware {
    color: #fff;
    cursor: default;
}

body.hardware {
    background-color: rgb(1, 21, 7);
}

section#hardware span {
    font-size: 10px;
    font-weight: 500;
    padding-top: 12px;
    text-align: center;
    height: 22px;
}

section#hardware span.dialog-trigger {
    color: orange;
    font-weight: 500;
    cursor: pointer;
}

#hardware-gizmos {
    padding: 20px 0;
    width: 800px;
}

#hardware-gizmos > div {
    flex-direction: column;
    width: 25%;
    height: 60px;
}

#hardware-gizmos img {
    max-width: 64px;
    max-height: 64px;
}

#hardware-gizmos ~ .subtitle {
    margin-top: 30px;
}

#hardware-skills {
    padding: 8px 0;
    justify-content: center;
}

#hardware-skills > div {
    flex-direction: column;
    width: 20%;
    height: 60px;
    margin-bottom: 20px;
}

#hardware-skills img {
    max-height: 36px;
}

#hardware-bg-plane {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='yellow' fill-opacity='.2' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");

    animation: fadeInThird;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#hardware-trace-plane div {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: gold;
    opacity: 0;
}

#hardware-trace-plane div:nth-child(1) {
    top: 157px;
    left: 637px;

    animation: traceOne linear;
    animation-duration: 1.6s;
    animation-delay: 1s;
}

#hardware-trace-plane div:nth-child(2) {
    top: 461px;
    left: 621px;

    animation: traceTwo linear;
    animation-duration: 2s;
    animation-delay: calc(1.6s + 1s + 0.2s);
}

#hardware-trace-plane div:nth-child(3) {
    top: 477px;
    left: 621px;

    animation: traceThree linear;
    animation-duration: 1.5s;
    animation-delay: calc(calc(1.6s + 1s + 0.2s) + calc(2s + 0.2s));
}

#hardware-trace-plane div:nth-child(4) {
    top: 445px;
    left: 541px;

    animation: traceFour linear;
    animation-duration: 2.8s;
    animation-delay: calc(calc(1.6s + 1s + 0.2s) + calc(2s + 0.2s) + calc(1.5s + 0s));
}

#hardware-trace-plane div:nth-child(5) {
    top: 381px;
    left: 621px;

    animation: traceFive linear;
    animation-duration: 1s;
    animation-delay: calc(calc(1.6s + 1s + 0.2s) + calc(2s + 0.2s) + calc(1.5s + 0s) + calc(2.8s + 0.1s));
}

#hardware-trace-plane div:nth-child(6) {
    top: 141px;
    left: 541px;

    animation: traceFour linear;
    animation-duration: 2.8s;
    animation-delay: calc(
        calc(1.6s + 1s + 0.2s) + calc(2s + 0.2s) + calc(1.5s + 0s) + calc(2.8s + 0.1s) + calc(1s + 0.2s)
    );
}

dialog {
    z-index: 1;
    top: calc(50% - 100px);
    width: 460px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #fff;
    border-radius: 4px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 3px 6px;
    box-sizing: content-box;

    animation: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

dialog::backdrop {
    background-color: #00000045;
}

.dialog-wrapper {
    display: flex;
    flex-direction: column;
}

.dialog-wrapper > p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-radius: 4px 4px 0 0;
    padding: 0 8px;
    background-color: #111;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='gold' fill-opacity='.25' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}

.dialog-wrapper span {
    padding-left: 4px;
    color: #fff;
    font-weight: 600;
}

.dialog-wrapper button {
    width: 24px;
    height: 24px;
    margin: auto 0;
    border: solid 1px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background: rgb(243, 72, 75);
    color: #fff;
    cursor: pointer;
}

.dialog-wrapper > button:hover {
    border: solid 1px rgb(201, 201, 201);
    background: rgb(164, 49, 51);
}

.dialog-wrapper ul {
    padding: 20px;
    list-style-type: "";
}

.dialog-wrapper li {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.dialog-wrapper img {
    max-width: 32px;
    max-height: 32px;
    margin-right: 12px;
}

/**** [ END OF HARDWARE SECTION ] ****/
/**** [ EXPERIENCE SECTION BEGINS ] ****/

body.experience {
    background-color: rgb(0, 0, 0);
}

#accordion-wrapper {
    width: calc(700px + 20vw);
    padding-left: 20vw;
}

.accordion-btn {
    width: 100%;
    border: none;
    outline: none;
    margin: 0 0 8px;
    padding: 8px 12px 8px 8px;
    background-color: transparent;
    color: #fff;
    text-align: right;
    cursor: pointer;

    -webkit-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}

.accordion-btn.major-event {
    padding-right: 8px;
}

.accordion-btn.active,
.accordion-btn:hover {
    background-color: #21eaff61;
}

.accordion-btn > div {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #000;
    pointer-events: none;

    -webkit-transform: translateY(-1px) rotate(45deg);
    -ms-transform: translateY(-1px) rotate(45deg);
    transform: translateY(-1px) rotate(45deg);
}

.accordion-btn.major-event > div {
    width: 16px;
    height: 16px;

    -webkit-transform: translateY(2px) rotate(45deg);
    -ms-transform: translateY(2px) rotate(45deg);
    transform: translateY(2px) rotate(45deg);
}

.accordion-btn:hover > div,
.accordion-btn.active > div {
    border-color: black;
    background-color: #fff;
}

.accordion-btn span {
    margin-right: 24px;
    pointer-events: none;
}

.accordion-btn.major-event span {
    margin-right: 20px;
}

.accordion-panel {
    overflow: hidden;
    max-height: 0;
    margin-top: -8px;
    padding: 0 18px;
    background-color: white;
    color: #000;

    -webkit-transition: max-height 0.2s ease-out;
    -ms-transition: max-height 0.2s ease-out;
    transition: max-height 0.2s ease-out;
}

.accordion-panel > div {
    padding: 12px;
    font-size: 14px;
}

.accordion-panel p {
    margin-bottom: 8px;
}

.accordion-panel a {
    border-bottom: 2px solid #008074;
    color: #008074;
    font-weight: 500;
}

.accordion-panel span {
    font-size: 10px;
    font-weight: 500;
}

#experience-bg-plane {
    --s: 220px;
    --c1: #000000;
    --c2: #00b8a8;
    --c3: #05485a;
    --_l: #0000 calc(25% / 3), var(--c1) 0 25%, #0000 0;
    --_g: conic-gradient(from 120deg at 50% 87.5%, var(--c1) 120deg, #0000 0);

    background:
        var(--_g),
        var(--_g) 0 calc(var(--s) / 2),
        conic-gradient(from 180deg at 75%, var(--c2) 60deg, #0000 0),
        conic-gradient(from 60deg at 75% 75%, var(--c1) 0 60deg, #0000 0),
        linear-gradient(150deg, var(--_l)) 0 calc(var(--s) / 2),
        conic-gradient(at 25% 25%, #0000 50%, var(--c2) 0 240deg, var(--c1) 0 300deg, var(--c2) 0),
        linear-gradient(-150deg, var(--_l)) var(--c3);
    background-size: calc(0.866 * var(--s)) var(--s);

    animation: fadeInThird;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#experience-timeline-plane {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(6vw + 15px);
}

#experience-timeline-plane > div {
    width: 2px;
    height: 56vh;
    min-height: 336px;
    margin: calc(calc(100vh - 56vh) / 2) 0;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 1) 25%,
        rgba(255, 255, 255, 1) 75%,
        rgba(0, 0, 0, 0) 100%
    );

    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#experience-windows-plane {
    left: 190px;
    width: calc(100% - 190px);
}

#experience-windows-plane > svg {
    width: 100%;
    height: 100%;
}

#experience-windows-plane polygon {
    opacity: 0;
}

#experience-windows-plane polygon.active {
    opacity: 0.3;
}

#window-1 {
    fill: #2a9d8f;

    -webkit-transform: translate3d(487px, 343px, 0);
    -ms-transform: translate3d(487px, 343px, 0);
    transform: translate3d(487px, 343px, 0);
}

#window-2 {
    fill: rgb(142, 255, 142);

    -webkit-transform: translate3d(678px, 344px, 0);
    -ms-transform: translate3d(678px, 344px, 0);
    transform: translate3d(678px, 344px, 0);
}

#window-3 {
    fill: #ff8c42;

    -webkit-transform: translate3d(388px, 178px, 0);
    -ms-transform: translate3d(388px, 178px, 0);
    transform: translate3d(388px, 178px, 0);
}

#window-4 {
    fill: #3d85c6;

    -webkit-transform: translate3d(372px, 398px, 0) scale(-1, 1);
    -ms-transform: translate3d(372px, 398px, 0) scale(-1, 1);
    transform: translate3d(372px, 398px, 0) scale(-1, 1);
}

#window-5 {
    fill: #e6194b;

    -webkit-transform: translate3d(657px, 231px, 0) scale(-1, 1);
    -ms-transform: translate3d(657px, 231px, 0) scale(-1, 1);
    transform: translate3d(657px, 231px, 0) scale(-1, 1);
}

#window-6 {
    fill: #29a329;
    
    -webkit-transform: translate3d(277px, 236px, 0) scale(-1, 1);
    -ms-transform: translate3d(277px, 236px, 0) scale(-1, 1);
    transform: translate3d(277px, 236px, 0) scale(-1, 1);
}

#window-7 {
    fill: #a8dadc;

    -webkit-transform: translate3d(542px, 477px, 0);
    -ms-transform: translate3d(542px, 477px, 0);
    transform: translate3d(542px, 477px, 0);
}

#window-8 {
    fill: #f1fa3c;

    -webkit-transform: translate3d(443px, 201px, 0);
    -ms-transform: translate3d(443px, 201px, 0);
    transform: translate3d(443px, 201px, 0);
}

#window-9 {
    fill: #9933ff;

    -webkit-transform: translate3d(391px, 287px, 0);
    -ms-transform: translate3d(391px, 287px, 0);
    transform: translate3d(391px, 287px, 0);
}

/**** [ END OF EXPERIENCE SECTION ] ****/
/**** [ PORTFOLIO SECTION BEGINS ] ****/

section#portfolio {
    color: #fff;
}

body.portfolio {
    background-color: #004d7b;
}

#portfolio-selector > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    opacity: 0;
    cursor: pointer;
    font-size: 18px;
    font-family: "Dry Whiteboard Marker";

    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;

    -webkit-transition:
        font-size 0.25s ease-in-out,
        color 0.25s ease-in-out;
    -ms-transition:
        font-size 0.25s ease-in-out,
        color 0.25s ease-in-out;
    transition:
        font-size 0.25s ease-in-out,
        color 0.25s ease-in-out;
}

#portfolio-selector > div:hover,
#portfolio-selector > div.active {
    font-size: 28px;
    color: orange;
}

#portfolio-preview-wrapper {
    margin-top: 8px;
    position: relative;
    padding: 24px;
    font-size: 14px;
    width: 800px;
    border-radius: 8px;
    height: 380px;
    border: 2px solid #000;
    background-color: #fff;
    color: #000;
    box-shadow: 5px 7px 6px black;
}

/* double border trick */
#portfolio-preview-wrapper:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 8px;
    border: 2px solid #000;
}

#portfolio-preview-wrapper > div {
    width: 100%;
    height: 100%;

    animation: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#tetrisgo-preview {
    display: flex;
    flex-direction: column;
}

#portfolio-preview-wrapper > div:not(.active) {
    display: none;
}

#portfolio-preview-wrapper a {
    font-weight: 500;

    -webkit-transition:
        color 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
    -ms-transition:
        color 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
    transition:
        color 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
}

#portfolio-preview-wrapper a:hover {
    color: orange;
}

#portfolio-preview-wrapper > div > div {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

#portfolio-preview-wrapper #tetris-go-wrapper,
#portfolio-preview-wrapper #sueca-bot-wrapper {
    padding-left: 40px;
}

.preview-image-wrapper {
    display: flex;
    overflow: clip;
    position: relative;
}

.preview-image-wrapper > img {
    --s: 10px;
    border: calc(2 * var(--s)) solid #0000;
    outline: 1px solid #000;
    outline-offset: calc(-1 * var(--s));
    background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);

    height: 220px;
    width: 400px;
}

.portfolio-list-selector {
    font-family: "Dry Whiteboard Marker";
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.portfolio-list-selector li {
    margin: 4px 0;
    border: 2px dashed transparent;
    padding: 0 6px 1px 6px;
    border-radius: 12px;
    cursor: pointer;

    -webkit-transition: border-color 0.25s ease-in-out;
    -ms-transition: border-color 0.25s ease-in-out;
    transition: border-color 0.25s ease-in-out;
}

.portfolio-list-selector li:hover,
.portfolio-list-selector li.active {
    border-color: orange;
}

#preview-link {
    font-family: "Dry Whiteboard Marker";
    font-size: 24px;
    color: #000;
    font-weight: 500;
    position: relative;
    top: -41px;
    height: 36px;
    text-align: right;
    padding: 0px 24px 12px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 136px;
    left: 83%;
    opacity: 0.3;

    -webkit-transition:
        color 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
    -ms-transition:
        color 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
    transition:
        color 0.25s ease-in-out,
        opacity 0.25s ease-in-out;
}

#preview-link:hover {
    color: orange;
    opacity: 1;
}

#preview-link span {
    height: 34px;
    width: 34px;
    margin-top: -20px;
    margin-left: 10px;
    background-image: url("./icons/git-sketch.svg");
}

/* whiteboard planes */

.whiteboard-plane {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: -16px;
    margin-top: -360px;
    font-family: "Dry Whiteboard Marker";
}

#leggera-notes-plane {
    margin-left: 572px;
    width: 180px;
}

#leggera-preview:not(.active) ~ #leggera-notes-plane {
    display: none;
}

#leggera-notes-plane > span {
    cursor: pointer;
    opacity: 0.3;
    position: absolute;
    display: block;
    width: 52px;
    height: 52px;
    font-size: 24px;
    padding: 16px 12px;

    -webkit-transition: opacity 0.25s ease-in-out;
    -ms-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

#leggera-notes-plane > span.active,
#leggera-notes-plane > span:hover {
    opacity: 1;
}

#leggera-notes-plane > span#leggera-note-1 {
    top: 84px;
    right: 30px;
    background-image: url("./icons/post-it-red.svg");
}

#leggera-notes-plane > span#leggera-note-2 {
    top: 116px;
    right: 81px;
    padding-top: 22px;
    background-image: url("./icons/post-it-green.svg");
    font-size: 16px;
}

#leggera-notes-plane > span#leggera-note-3 {
    top: 155px;
    right: 40px;
    background-image: url("./icons/post-it-blue.svg");
}

#leggera-demo {
    position: absolute;
    display: flex;
    align-items: center;
    right: 22px;
    top: 240px;
    font-size: 22px;
    opacity: 0.3;
    cursor: pointer;
}

#leggera-demo:hover {
    opacity: 1;
}

#leggera-demo > img {
    margin-right: 8px;
}

#picture-hover-plane {
    width: 440px;
    height: 200px;
    margin-left: 162px;
    margin-top: -272px;
}

#suecabot-preview.active ~ #picture-hover-plane,
#tetrisgo-preview.active ~ #picture-hover-plane {
    display: none;
}

#picture-frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    left: -8px;
    top: 26px;
}

#hover-plane {
    --s: 10px;
    border: calc(2 * var(--s)) solid #0000;
    outline-offset: calc(-1 * var(--s));
    background: conic-gradient(from 90deg at 1px 1px, #0000 60%, #0000 0),
        radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 37%);
    height: 220px;
    width: 400px;
    background-color: #0003;

    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background-color: #0003;
    opacity: 0;
    cursor: pointer;

    -webkit-transition: opacity 0.25s ease-in-out;
    -ms-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

#picture-frame:hover #hover-plane {
    opacity: 1;
}

#click-to-zoom-plane {
    z-index: -1;
}

#click-to-zoom-wrapper {
    opacity: 1;

    -webkit-transition: opacity 0.25s ease-in-out;
    -ms-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

#suecabot-preview.active ~ #click-to-zoom-plane #click-to-zoom-wrapper,
#tetrisgo-preview.active ~ #click-to-zoom-plane #click-to-zoom-wrapper {
    opacity: 0;
}

#click-to-zoom-plane img {
    max-height: 20px;
}

#click-to-zoom {
    position: absolute;
    top: 272px;
    left: 37px;
    text-align: center;
    font-size: 25px;
    opacity: 0.3;

    -webkit-transform: rotate(-23deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(-23deg);
}

#arrow-wrapper {
    position: absolute;
    top: 250px;
    left: 125px;

    -webkit-transform: rotate(-122deg);
    -ms-transform: rotate(-122deg);
    transform: rotate(-122deg);
}

#arrow-wrapper img {
    max-height: 24px;
}

/* section planes */
#portfolio-bg-plane {
    --s: 100px;
    --c1: rgba(255, 255, 255, 0.2);
    --c2: #000b5e;
    --_g: #0000 90deg, var(--c1) 0;

    background: conic-gradient(from 90deg at 2px 2px, var(--_g)), conic-gradient(from 90deg at 1px 1px, var(--_g)),
        var(--c2);
    background-size:
        var(--s) var(--s),
        calc(var(--s) / 5) calc(var(--s) / 5);

    animation: fadeInThird;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#from-corroios-plane {
    z-index: -1;
    font-family: "Geometrica ExtLt geometric";
    font-weight: 200;
    font-style: normal;
}

#from-corroios-plane > p {
    opacity: 50%;
    font-size: 70px;
    top: 40vh;
    left: calc(-470px + 45vw); /* some voodoo */
    animation: fadeInHalf;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#from-corroios-plane > p:first-of-type {
    position: absolute;
    
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

#from-corroios-plane > p:last-of-type {
    position: relative;
    margin: 304px 0 0 306px;
    width: 680px;
}

/**** [ END OF PORTFOLIO SECTION ] ****/
/**** [ CONTACT SECTION BEGINS ] ****/

body.contact {
    background-color: rgba(255, 255, 225, 0.6);
}

body.contact > #menu {
    color: #000;
}

body.contact > #menu span {
    background-color: #000;
}

#contact p {
    max-width: 600px;
    margin: 4px 0;
    text-align: right;
}

#contact span {
    font-weight: 500;
}

#contact .subtitle {
    padding-top: 30px;
    padding-bottom: 8px;
    font-weight: 600;
}

#about-me-wrapper > .subtitle {
    padding-top: 0;
}

#contact > div:not(.absolute-plane) {
    animation: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#getintouch-wrapper > * {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    -webkit-transition: color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

#getintouch-wrapper > a:hover,
#getintouch-wrapper > div:hover {
    color: orange;
    font-weight: 500;
    cursor: pointer;
}

#getintouch-wrapper img {
    width: 20px;
    height: 20px;
    max-height: 20px;
    margin-left: 12px;
}

#contact-bg-plane {
    background-color: #fff;
    background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
        linear-gradient(#eee 0.1em, transparent 0.1em);
    background-size: 100% 1.2em;

    animation: fadeInThird;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#contact-bg-plane img {
    position: absolute;
    max-width: 100px;
    opacity: 0.35;
}

#contact-bg-plane img:nth-child(1) {
    top: 28vh;
    right: 671px;
}

#contact-bg-plane img:nth-child(2) {
    top: 10vh;
    right: 321px;
}

#contact-bg-plane img:nth-child(3) {
    top: 46vh;
    right: 791px;

    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

#contact-bg-plane img:nth-child(4) {
    top: 62vh;
    right: 591px;
}

/**** [ END OF CONTACT SECTION ] ****/
/**** [ MENU BEGINS ] ****/

#menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(50% - calc(calc(44px * 6) / 2));
    left: 5vw;
    height: calc(44px * 6);
    color: #fff;
    animation-delay: 4.25s;
}

#menu > button {
    display: flex;
    align-items: center;
    height: 44px;
    min-width: 330px;
    background: transparent;
    border: 0;
    cursor: pointer;

    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 24px;
    text-align: left;
    text-wrap: nowrap;
    color: inherit;

    -webkit-transition:
        font-size 0.25s linear,
        color 0.5s linear;
    -ms-transition:
        font-size 0.25s linear,
        color 0.5s linear;
    transition:
        font-size 0.25s linear,
        color 0.5s linear;
}

#menu img {
    filter: grayscale(100%);
    opacity: 0.7;
    max-height: 28px;
    margin-right: 12px;
}

#menu span {
    width: 2px;
    height: 100%;
    margin-right: 12px;
    background-color: #fff;
    opacity: 0.8;
    pointer-events: none;

    -webkit-transition:
        margin-right 0.2s linear,
        background-color 0.5s linear;
    -ms-transition:
        margin-right 0.2s linear,
        background-color 0.5s linear;
    transition:
        margin-right 0.2s linear,
        background-color 0.5s linear;
}

#menu > button.active,
#menu > button:hover {
    display: flex;
    align-items: center;
    font-weight: bold;
}

#menu > button.active img,
#menu > button:hover img {
    opacity: 1;
    filter: none;
}

#menu > button.active span,
#menu > button:hover span {
    margin-right: 20px;
    background-color: orange;

    -webkit-transition:
        margin-right 0.2s linear,
        background-color 0s linear;
    -ms-transition:
        margin-right 0.2s linear,
        background-color 0s linear;
    transition:
        margin-right 0.2s linear,
        background-color 0s linear;
}

/**** [ END OF MENU ] ****/
/**** [ GALLERY BEGINS ] ****/

#gallery {
    display: flex;
    z-index: 2;
    padding: 30px 50px 50px 30px;
    background: #000d;
}

#gallery:not(.active) {
    display: none;
}

#gallery-thumbs {
    z-index: -1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px 0 0 24px;
    border: 2px solid #89e9ff80;
    box-shadow:
        8px 8px #00c3ff87,
        14px 14px #0087ff87,
        20px 20px #004cff8f;
}

#gallery-thumbs > div {
    cursor: pointer;
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

#gallery-options-wrapper > div {
    height: 16vh;
    border: 3px solid #0003;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    filter: grayscale(1);

    -webkit-transition:
        filter 0.3s ease-in-out,
        border-color 0.3s ease-in-out;
    -ms-transition:
        filter 0.3s ease-in-out,
        border-color 0.3s ease-in-out;
    transition:
        filter 0.3s ease-in-out,
        border-color 0.3s ease-in-out;
}

#gallery-options-wrapper > div:hover,
#gallery-options-wrapper > div.active {
    filter: none;
    border-color: orange;
}

#gallery-options-wrapper > div:first-of-type {
    border-top-left-radius: 24px;
}

#leggera1 {
    background-image: url("./thumbs/leggera1.png");
}
#leggera2 {
    background-image: url("./thumbs/leggera2.png");
}
#leggera3 {
    background-image: url("./thumbs/leggera3.png");
}
#swell {
    background-image: url("./thumbs/swell.png");
}

#close-gallery-wrapper {
    align-content: center;
}

#close-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    cursor: default;
}

#close-gallery > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    outline: none;
    border: none;
    margin-left: -20px;
    padding: 12px;
    background-color: transparent;
    color: orange;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    filter: grayscale(1);
}

#close-gallery > div:hover {
    filter: none;
}

#close-gallery img {
    height: 30px;
    margin-right: 12px;
    filter: grayscale(1);
}

#close-gallery > div:hover > img {
    filter: none;
}

#photo-view {
    overflow: hidden;
    width: calc(100% - 300px);
    border: 2px solid #89e9ff80;
    border-radius: 0 24px 24px 0;
    border-left-width: 0;
    box-shadow:
        8px 8px #00c3ff87,
        14px 14px #0087ff87,
        20px 20px #004cff8f;
}

#picture-on-display {
    padding: 20px;
    background-origin: content-box;
    background-size: contain;
    border-radius: 0 24px 24px 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    width: 100%;
    height: calc(100% - 12vh);
    background-position: center;
    background-repeat: no-repeat;
    animation-duration: 0.5s;
}

#picture-on-display.leggera1 {
    background-image: url("./img/leggera1.png");
}

#picture-on-display.leggera2 {
    background-image: url("./img/leggera2.png");
}

#picture-on-display.leggera3 {
    background-image: url("./img/leggera3.png");
}

#picture-on-display.swell {
    background-image: url("./img/swell.png");
}

#gallery-footer {
    padding: 0 30px;
    width: 100%;
    height: 12vh;
    display: flex;
    align-items: center;
}

#gallery-footer > p {
    color: #fff;
    display: flex;
    padding-left: 8px;
    height: 44px;
    align-items: center;
    animation: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#gallery-footer > p:not(.active) {
    display: none;
}

#bg-mask {
    position: relative;
    z-index: -1;
    top: -100%;
    width: 100%;
    height: calc(100% - 12vh);
    background-color: black;
    box-shadow:
        #fff6 0px 0px 30px -12px inset,
        #fff6 0px 18px 5px -20px inset;
}

/**** [ END OF GALLERY ] ****/
/**** [ CLIPBOARD BEGINS ] ****/

#clipboard-modal {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#clipboard-modal > div {
    height: 44px;
    align-content: center;
    border: 2px solid white;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 10px 16px;
    background: #000b;
    color: #fff;
}

#clipboard-modal > div:not(.active) {
    display: none;
}

/**** [ END OF CLIPBOARD ] ****/
/**** [ FX BEGINS ] ****/

.fadding-in {
    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.fadding-out {
    animation: fadeOutThird !important;
    animation-duration: 0.5s !important;
    animation-fill-mode: forwards !important;
}

/* delays */
#language-experience > div:nth-child(2),
#techstacks-experience > div:nth-child(2),
#hardware-gizmos > div:nth-child(2),
#hardware-skills > div:nth-child(2),
#hardware-skills > div:nth-child(7),
#portfolio-row1 > div:nth-child(2) {
    animation-delay: 0.1s;
}

#language-experience > div:nth-child(3),
#techstacks-experience > div:nth-child(3),
#hardware-gizmos > div:nth-child(3),
#hardware-skills > div:nth-child(3),
#hardware-skills > div:nth-child(8),
#portfolio-row1 > div:nth-child(3) {
    animation-delay: 0.2s;
}

#language-experience > div:nth-child(4),
#techstacks-experience > div:nth-child(4),
#hardware-gizmos > div:nth-child(4),
#hardware-skills > div:nth-child(4),
#hardware-skills > div:nth-child(9),
#portfolio-row1 > div:nth-child(4) {
    animation-delay: 0.3s;
}

#language-experience > div:nth-child(5),
#hardware-skills > div:nth-child(5),
#hardware-skills > div:nth-child(10),
#portfolio-row1 > div:nth-child(5) {
    animation-delay: 0.4s;
}

#language-experience > div:nth-child(6) {
    animation-delay: 0.5s;
}

#language-experience > div:nth-child(7) {
    animation-delay: 0.6s;
}

#language-experience > div:nth-child(8) {
    animation-delay: 0.7s;
}

#language-experience > div:nth-child(9) {
    animation-delay: 0.8s;
}

#language-experience > div:nth-child(10) {
    animation-delay: 0.9s;
}