/* ================================== GERAL =============================== */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    gap: 0;
    outline: none;
    color-scheme: dark; /* Isto trata de mostrar os elementos do browser na sua versão escura */
    scroll-behavior: smooth; /* Isto trata de suavizar o scroll. Parece que não funciona para o Firefox? */
    scroll-margin: 150px 0 var(--actionbar); /* Isto trata de ajustar o scroll para que os elementos focados não sejam tapados pelo cabeçalho e pelo rodapé */
    text-wrap: balance; /* Isto trata de equilibrar o comprimento das várias linhas de texto */
    /* Isto trata de colocar hífens sempre que for necessário */
    /* hyphens: auto; */
    text-underline-offset: 0.1em;

    --gradient-blue: linear-gradient(280deg, #37c6ae 1.26%, rgb(55, 198, 174, 0) 94.08%), #477cd8;
    --gradient-black: linear-gradient(313deg, rgb(18, 20, 25, 0) 6.89%, #121419 96.05%), #21252f;
    --padding: 40px;
    --Funnel-Sans: "Funnel Sans", Arial, Helvetica, sans-serif;
    --Funnel-Display: "Funnel Display", Arial, Helvetica, sans-serif;

    --actionbar: 56px;
}

html {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: fit-content;
    /* background-color: #121419; */
    font-family: var(--Funnel-Sans);
    font-weight: 800;
    color: white;
    z-index: 0;
    overflow: auto;
}

#loading {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    background: #121419;
    z-index: 1000;
    opacity: 1;
    pointer-events: all;
    transition: 0.5s all;
    cursor: wait;
}
#loading .loading-icon {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    opacity: 0.3;
    z-index: 1001;
    -moz-animation: loading infinite reverse 2s ease-in-out forwards;
    -webkit-animation: loading infinite reverse 2s ease-in-out forwards;
    animation: loading infinite reverse 2s ease-in-out forwards;
    background-color: white;
}
#loading[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.no-break {
    white-space: nowrap;
}

#reduced-motion-detector {
    display: none;
}
@media (prefers-reduced-motion: no-preference) {
    #reduced-motion-detector {
        background-color: rgb(255, 0, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    #reduced-motion-detector {
        background-color: rgb(0, 255, 0);
    }
}

stacked-alpha-video {
    display: inline-block;
}
stacked-alpha-video video {
    display: none;
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    flex-shrink: 0;
}
input[type="range"] {
    cursor: grab;
}
input[type="range"]:active {
    cursor: grabbing;
}

div:has(> label, > input):focus-within {
    accent-color: #7cc637;
    color: #7cc637;
}

/* ===================================== ANIMAÇÕES ============================================ */
/* Em versões bem antigas do Firefox */
@supports (-moz-animation-name: test) and (not ((animation-name: test))) {
    @-moz-keyframes button-wiggle {
        0%,
        100% {
            transform: scale(1);
        }
        25%,
        75% {
            transform: scale(1.2, 0.8);
        }
        50% {
            transform: scale(1.4, 0.7);
        }
    }
    @-moz-keyframes loading {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
            -webkit-clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            width: 64px;
            height: 64px;
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(-180deg);
            transform: translate(-50%, -50%) rotate(-180deg);
            -webkit-clip-path: polygon(5px 5px, calc(100% - 5px) 0.5px, calc(100% - 0.5px) calc(100% - 0.5px), 0.5px calc(100% - 5px));
            clip-path: polygon(5px 5px, calc(100% - 5px) 0.5px, calc(100% - 0.5px) calc(100% - 0.5px), 0.5px calc(100% - 5px));
            width: 48px;
            height: 48px;
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
            -webkit-clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            width: 64px;
            height: 64px;
        }
    }
}
/* Para versões antigas de vários (senão todos) os browsers */
@supports (-webkit-animation-name: test) and (not ((animation-name: test))) {
    @-webkit-keyframes button-wiggle {
        0%,
        100% {
            transform: scale(1);
        }
        25%,
        75% {
            transform: scale(1.2, 0.8);
        }
        50% {
            transform: scale(1.4, 0.7);
        }
    }
    @-webkit-keyframes loading {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
            -webkit-clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            width: 64px;
            height: 64px;
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(-180deg);
            transform: translate(-50%, -50%) rotate(-180deg);
            -webkit-clip-path: polygon(5px 5px, calc(100% - 5px) 0.5px, calc(100% - 0.5px) calc(100% - 0.5px), 0.5px calc(100% - 5px));
            clip-path: polygon(5px 5px, calc(100% - 5px) 0.5px, calc(100% - 0.5px) calc(100% - 0.5px), 0.5px calc(100% - 5px));
            width: 48px;
            height: 48px;
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
            -webkit-clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            width: 64px;
            height: 64px;
        }
    }
}

/* A versão atualizada */
@supports (animation-name: test) {
    @keyframes button-wiggle {
        0%,
        100% {
            transform: scale(1);
        }
        25%,
        75% {
            transform: scale(1.2, 0.8);
        }
        50% {
            transform: scale(1.4, 0.7);
        }
    }
    @keyframes loading {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
            -webkit-clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            width: 64px;
            height: 64px;
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(-180deg);
            transform: translate(-50%, -50%) rotate(-180deg);
            -webkit-clip-path: polygon(5px 5px, calc(100% - 5px) 0.5px, calc(100% - 0.5px) calc(100% - 0.5px), 0.5px calc(100% - 5px));
            clip-path: polygon(5px 5px, calc(100% - 5px) 0.5px, calc(100% - 0.5px) calc(100% - 0.5px), 0.5px calc(100% - 5px));
            width: 48px;
            height: 48px;
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
            -webkit-clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            clip-path: polygon(0.5px 0.5px, calc(100% - 0.5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 0.5px));
            width: 64px;
            height: 64px;
        }
    }
}

/* ============================ DIVS E SECÇÕES ============================ */
section {
    display: block;
    position: relative;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* min-height: calc(100vh - 128px); */
    min-height: calc(20vh - 128px);
    padding: 48px var(--padding);
    justify-content: flex-start;
    user-select: text;
    overflow-x: hidden;
}
section:first-of-type {
    min-height: calc(100vh - var(--actionbar));
    padding-top: 120px;
    scroll-margin: 0;
}
section:nth-of-type(odd) {
    background-color: #121419; /* As secções com número ímpar vão ser mais escuras */
}
section:nth-of-type(even) {
    background-color: #21252f; /* As secções com número par vão ser mais claras */
}

/* Caso a página web só tenha uma secção (tipo a 404.html) */
section:only-of-type {
    /* min-height: calc(100vh - 245px); */
    gap: 0;
}
section:only-of-type .button-link {
    margin-top: 20px;
}

/* Quando o rato seleciona a secção */
section.mouse-focus,
footer.mouse-focus {
    background-image: none;
}

/* Quando a secção é selecionada através do teclado ou do comando */
section:not(.mouse-focus):has(a, button:not([disabled]), [tabindex="0"], input, textarea, summary),
footer:not(.mouse-focus):has(a, button:not([disabled]), [tabindex="0"], input, textarea, summary) {
    background-image: linear-gradient(rgb(125, 200, 55, 0.3) 0%, rgb(125, 200, 55, 0.3) 100%);
}
section:not(.mouse-focus):not(:has(a, button:not([disabled]), [tabindex="0"], input, textarea, summary)),
footer:not(.mouse-focus):not(:has(a, button:not([disabled]), [tabindex="0"], input, textarea, summary)) {
    background-image: linear-gradient(rgb(144, 144, 144, 0.3) 0%, rgb(144, 144, 144, 0.3) 100%);
}

section > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 48px;
    height: 100%;
}
section > div > * {
    position: relative;
    width: 100%;
}

/* ------------------------------------------ FORMULÁRIO ----------------------------------------- */
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
}
form.selecting {
    caret-color: transparent;
}
form.writing {
    caret-color: initial;
}

form .button-link:has(button[type="submit"]) {
    display: flex;
    position: relative;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
form .button-link:has(button[type="submit"])::after {
    content: "";
    display: inline-block;
    position: relative;
    text-align: start;
    text-wrap: wrap;
    text-wrap: pretty;
}
form.success .button-link:has(button[type="submit"])::after {
    content: "E-mail enviado com sucesso!";
}
form.failed .button-link:has(button[type="submit"])::after {
    content: "Ocorreu um erro ao tentar enviar o e-mail...";
}

form * {
    border: none;
    font-family: var(--Funnel-Sans);
    font-weight: 400;
    font-size: 20px;
}
form *::placeholder,
form button {
    font-weight: 800;
}

form input,
form textarea {
    width: 100%;
    padding: 0.8em 1em;
    background-color: #21252f;
    resize: none;
    -webkit-clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 5px) calc(100% - 2px), 5px 100%);
    clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 5px) calc(100% - 2px), 5px 100%);
    text-wrap: wrap;
}
form input:read-only,
form textarea:read-only {
    caret-color: transparent;
}

form input:focus,
form textarea:focus {
    background-image: linear-gradient(rgb(125, 200, 55, 0.3) 0%, rgb(125, 200, 55, 0.3) 100%);
}

form > div {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* ==================================== POPUPS ================================== */
#exit-popup {
    display: block;
    position: fixed;
    width: calc(100% - (2 * var(--padding)));
    max-width: 640px;

    top: 50%;
    left: 50%;
    z-index: 1000;

    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-filter: blur(0) drop-shadow(2px 6px 0 rgb(0, 0, 0, 0.3));
    filter: blur(0) drop-shadow(2px 6px 0 rgb(0, 0, 0, 0.3));
}
@media (prefers-reduced-motion: reduce) {
    #exit-popup {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
}

#exit-popup[aria-hidden="true"] {
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}
#exit-popup[aria-hidden="false"] {
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

#exit-popup > div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 56px 48px;
    background-image: linear-gradient(157deg, #121419 -35.24%, #21252f 114.53%);
    -webkit-clip-path: polygon(5px 6px, 100% 0.5px, calc(100% - 12px) 100%, 0.5px calc(100% - 6px));
    clip-path: polygon(5px 6px, 100% 0.5px, calc(100% - 12px) 100%, 0.5px calc(100% - 6px));
}
#exit-popup > div::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.2); /* Este é ligeiramente mais transparente propositadamente */
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(5px 6px, 100% 0.5px, 8px 9px, 0.5px calc(100% - 6px));
    clip-path: polygon(5px 6px, 100% 0.5px, 8px 9px, 0.5px calc(100% - 6px));
}

#exit-popup > div > div {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 24px;
    /* transform: translateY(50%); */
}
#exit-popup > div > div:first-of-type {
    justify-content: flex-start;
    margin-top: 48px;
    margin-bottom: 12px;
    align-items: center;
}
#exit-popup > div > div:nth-of-type(2) {
    justify-content: flex-end;
}

#exit-popup h2 {
    text-wrap: wrap;
    text-wrap: pretty;
    margin-bottom: 0;
}
#exit-popup p {
    text-wrap: wrap;
    text-wrap: pretty;
}

/* ========================== CABEÇALHOS, LINKS E BOTÕES ======================== */
h1 {
    font-family: var(--Funnel-Display);
    font-size: 80px;
    line-height: 95%;
    font-weight: 800;
    margin-bottom: 52px;
    width: 100%;
}
section > div h1 {
    margin-top: calc(1em);
    margin-bottom: 20px;
}

h2 {
    font-family: var(--Funnel-Display);
    font-size: 48px;
    line-height: 95%;
    font-weight: 800;
    margin-bottom: 20px;
    width: 100%;
}
section > h2 {
    width: 75%;
}

h3 {
    font-family: var(--Funnel-Display);
    font-size: 40px;
    line-height: 95%;
    font-weight: 800;
    margin-bottom: 20px;
    width: 100%;
}

h4 {
    font-family: var(--Funnel-Display);
    font-size: 24px;
    line-height: 95%;
    font-weight: 800;
    width: 100%;
}

p {
    font-family: var(--Funnel-Sans);
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    width: 100%;
}
p ~ p {
    margin-top: 1em;
}
p > a {
    text-decoration: underline;
    /* color: #7cc637; */
}

/* Links */
a {
    color: white;
    text-decoration: none;
    width: fit-content;
}

a,
button,
input,
summary,
*[tabindex="0"] {
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
@media (prefers-reduced-motion: reduce) {
    a,
    button,
    input,
    summary,
    *[tabindex="0"] {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
}

button:not(:disabled) {
    cursor: pointer;
}
button:disabled {
    opacity: 0.5;
}

a:hover,
a:focus {
    color: #7cc637;
}

a:focus,
a:focus i {
    -moz-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    -webkit-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    animation: button-wiggle 0.15s ease-in-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
    a:focus,
    a:focus i {
        -moz-animation: none;
        -webkit-animation: none;
        animation: none;
    }
}

li:not(:has(i)) {
    font-family: var(--Funnel-Sans);
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    width: 100%;
}

li:focus {
    color: #7cc637;
}

/* input:hover,
input:focus {
    outline: auto;
} */

/* Botões */
.button-link {
    display: block;
    position: relative;
    -webkit-filter: drop-shadow(3px 5px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(3px 5px 0 rgb(0, 0, 0, 0.3));
    width: fit-content;
    height: fit-content;
}
.button-link a,
.button-link button {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 10px 40px;
    color: white;
    min-width: 4em;
    background: var(--gradient-blue);
    outline: none;
    border: none;

    font-size: 20px;
    font-family: var(--Funnel-Sans);
    font-weight: 800;
    text-decoration: none;
    text-align: center;

    -webkit-clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 10px) calc(100% - 3px), 5px 100%);
    clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 10px) calc(100% - 3px), 5px 100%);

    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
@media (prefers-reduced-motion: reduce) {
    .button-link a,
    .button-link button {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
}
/* Brilho */
.button-link a::before,
.button-link button::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255, 0.3);
    -webkit-clip-path: polygon(0 0, 100% 5px, 4px 3.5px, 5px 100%);
    clip-path: polygon(0 0, 100% 5px, 4px 3.5px, 5px 100%);
}
.button-link a:hover,
.button-link a:focus,
.button-link button:hover,
.button-link button:focus {
    background: #7cc637;
}

.button-link a:focus,
.button-link button:focus {
    -moz-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    -webkit-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    animation: button-wiggle 0.15s ease-in-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
    .button-link a:focus,
    .button-link button:focus {
        -moz-animation: none;
        -webkit-animation: none;
        animation: none;
    }
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: block;
    width: 48px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: none;
    transition: none;
    -webkit-filter: drop-shadow(0 4px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(0 4px 0 rgb(0, 0, 0, 0.3));
}
input[type="checkbox"]:checked {
    background-image: url(../ui/switch/on.png);
}
input[type="checkbox"]:not(:checked) {
    background-image: url(../ui/switch/off.png);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: block;
    width: 9em;
    background: transparent;
    -webkit-transition: none;
    transition: none;
}

/* Para Chromium e Safari */
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    background-color: #121419;
    position: relative;
    display: block;
    height: 6px;
    border-radius: 10px;
}
/* Para Firefox */
input[type="range"]::-moz-range-track {
    -webkit-appearance: none;
    appearance: none;
    background-color: #121419;
    position: relative;
    display: block;
    height: 6px;
    border-radius: 10px;
}

/* input[type="range"]:focus::-moz-range-track {
    background: #7cc637;
}
input[type="range"]:focus::-webkit-slider-thumb {
    background: #7cc637;
} */

/* Para Chromium e Safari */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: block;
    background-color: transparent;
    width: 24px;
    height: 24px;
    margin-top: -10px; /* Centers thumb on the track */
    background-image: url(../ui/range/thumb.png);
    /* background: var(--gradient-blue);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    mask: url(../ui/range/thumb.png);
    mask-size: cover; */
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: drop-shadow(0 4px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(0 4px 0 rgb(0, 0, 0, 0.3));
}
/* Para Firefox */
input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: block;
    outline: none;
    border: none;
    background-color: transparent;
    width: 24px;
    height: 24px;
    margin-top: -10px; /* Centers thumb on the track */
    background-image: url(../ui/range/thumb.png);
    /* background: var(--gradient-blue); */
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: drop-shadow(0 4px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(0 4px 0 rgb(0, 0, 0, 0.3));
}

/* ============================== HEADER ================================== */
header {
    display: flex;
    position: fixed;
    width: 100%;
    height: fit-content;
    /* padding: var(--padding) var(--padding) calc(var(--padding) / 2); */
    padding: var(--padding) var(--padding) 0;
    z-index: 98;
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    flex-direction: row;
    font-family: var(--Funnel-Display);
    font-size: 28px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    background: linear-gradient(180deg, rgb(18, 20, 25, 0.3) 0%, rgb(18, 20, 25, 0.2) 50%, rgb(18, 20, 25, 0) 100%);
    pointer-events: none;
}
header * {
    pointer-events: auto;
}

/* Blur do fundo quando o menu está aberto */
#background {
    width: 100vw;
    height: 100vh;
    /* content: ""; */
    top: 0;
    left: 0;
    display: block;
    position: absolute;
    background-color: rgb(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    #background {
        display: none;

        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
        opacity: unset;
    }
    #background.menu-open,
    #background.options-open,
    #background.popup-open {
        display: block;
    }
}

/* Quando o menu nav está aberto */
#background.menu-open {
    opacity: 1;
    pointer-events: auto;
}
/* Quando o menu de opções está aberto */
#background.options-open,
#background.popup-open {
    opacity: 1;
    pointer-events: auto;
    z-index: 1000;
}

header .blur-gradient {
    display: block;
    position: absolute;
    flex-direction: column;
    width: 100%;
    height: calc(100% + 16px);
    z-index: -1;
    /* background-color: red; */
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(#121419 0%, transparent 50%);
}

header .blur-gradient div:empty {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

header .blur-gradient div:nth-of-type(1) {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    -webkit-mask: linear-gradient(rgb(0, 0, 0, 1) -20%, rgb(0, 0, 0, 1) 0%, rgb(0, 0, 0, 1) 20%, rgb(0, 0, 0, 0) 30%);
    mask: linear-gradient(rgb(0, 0, 0, 1) -20%, rgb(0, 0, 0, 1) 0%, rgb(0, 0, 0, 1) 20%, rgb(0, 0, 0, 0) 30%);
}
header .blur-gradient div:nth-of-type(2) {
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
    -webkit-mask: linear-gradient(rgb(0, 0, 0, 0) 10%, rgb(0, 0, 0, 1) 20%, rgb(0, 0, 0, 1) 40%, rgb(0, 0, 0, 0) 50%);
    mask: linear-gradient(rgb(0, 0, 0, 0) 10%, rgb(0, 0, 0, 1) 20%, rgb(0, 0, 0, 1) 40%, rgb(0, 0, 0, 0) 50%);
}
header .blur-gradient div:nth-of-type(3) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask: linear-gradient(rgb(0, 0, 0, 0) 30%, rgb(0, 0, 0, 1) 40%, rgb(0, 0, 0, 1) 60%, rgb(0, 0, 0, 0) 70%);
    mask: linear-gradient(rgb(0, 0, 0, 0) 30%, rgb(0, 0, 0, 1) 40%, rgb(0, 0, 0, 1) 60%, rgb(0, 0, 0, 0) 70%);
}
header .blur-gradient div:nth-of-type(4) {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask: linear-gradient(rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0, 1) 60%, rgb(0, 0, 0, 1) 80%, rgb(0, 0, 0, 0) 90%);
    mask: linear-gradient(rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0, 1) 60%, rgb(0, 0, 0, 1) 80%, rgb(0, 0, 0, 0) 90%);
}
header .blur-gradient div:nth-of-type(5) {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask: linear-gradient(rgb(0, 0, 0, 1) 80%, rgb(0, 0, 0, 0) 100%);
    mask: linear-gradient(rgb(0, 0, 0, 1) 80%, rgb(0, 0, 0, 0) 100%);
}

/* Botão saltar para o conteúdo */
#jump-to-content {
    display: flex;
    position: absolute;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
    height: 0;
    background: #7cc637;
    color: white;
    text-align: center;
    z-index: 1000;
    top: -100%;
    left: 0;
    /* font-size: 28px; */
}

#jump-to-content:focus {
    top: 0;
    height: stretch;
    height: -webkit-fill-available; /* Para o Firefox */
}

/* Logo/texto Guilherme Costa */
.main-logo {
    font-size: 36px;
    font-family: var(--Funnel-Display);
}

/* ------------------------------ MENU NAV -------------------------------- */
/* Botão menu nav */
#nav-icon {
    display: block;
    position: relative;
    z-index: 100;
    -webkit-filter: blur(0) drop-shadow(-2px 6px 0 rgb(0, 0, 0, 0.3));
    filter: blur(0) drop-shadow(-2px 6px 0 rgb(0, 0, 0, 0.3));
    /* pointer-events: none; */
}

#nav-icon button {
    display: block;
    position: relative;
    border: 0;
    width: 80px;
    height: 80px;
    background: var(--gradient-blue);
    -webkit-clip-path: polygon(3px 2px, 100% 0.5px, calc(100% - 3px) 100%, 0.5px calc(100% - 4px));
    clip-path: polygon(3px 2px, 100% 0.5px, calc(100% - 3px) 100%, 0.5px calc(100% - 4px));
    /* pointer-events: auto; */
}
/* Brilho */
#nav-icon button::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.3);
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(3px 2px, 100% 0.5px, 6px 5px, 0.5px calc(100% - 4px));
    clip-path: polygon(3px 2px, 100% 0.5px, 6px 5px, 0.5px calc(100% - 4px));
}

#nav-icon button::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
}

/* Ícone menu fechado */
#nav-icon button[aria-expanded="false"]::after {
    -webkit-clip-path: path(
        "M14.4 24.4 14.9 16 68 14 67.5 22.4 14.4 24.4ZM13.9 44.2 13.4 35.8 66.6 37.3 67.5 46.2 13.9 44.2ZM12 63.5 13.8 56.1 67.1 59.6 65.7 68 12 63.5Z"
    );
    clip-path: path(
        "M14.4 24.4 14.9 16 68 14 67.5 22.4 14.4 24.4ZM13.9 44.2 13.4 35.8 66.6 37.3 67.5 46.2 13.9 44.2ZM12 63.5 13.8 56.1 67.1 59.6 65.7 68 12 63.5Z"
    );
}

/* Ícone menu aberto */
#nav-icon button[aria-expanded="true"]::after {
    -webkit-clip-path: path(
        "M19.9 63.2 15 56.4 33.7 39.3 15.6 20 21.8 15.6 39.5 33.9 60.1 15 65 21.8 45.3 39.9 64.3 59.6 57.8 65 39.4 45.3 19.9 63.2Z"
    );
    clip-path: path("M19.9 63.2 15 56.4 33.7 39.3 15.6 20 21.8 15.6 39.5 33.9 60.1 15 65 21.8 45.3 39.9 64.3 59.6 57.8 65 39.4 45.3 19.9 63.2Z");
}

#nav-icon button:hover,
#nav-icon button:focus {
    background: #7cc637;
}

/* Animação */
#nav-icon button:focus:not(:active, :hover) {
    -moz-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    -webkit-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    animation: button-wiggle 0.15s ease-in-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
    #nav-icon button:focus:not(:active, :hover) {
        -moz-animation: none;
        -webkit-animation: none;
        animation: none;
    }
}

/* Lista do menu */
#nav-list ul {
    position: relative;
    display: inline-block;
    min-width: 300px;
    max-width: 400px;
    min-height: 260px;
    max-height: 400px;
    overflow: auto;
    padding: 72px 48px;
    background: linear-gradient(157deg, #121419 -35.24%, #21252f 114.53%);
    /* top: var(--padding);
    right: var(--padding); */
    list-style-type: none;
    -webkit-clip-path: polygon(5px 6px, 100% 0.5px, calc(100% - 9px) 100%, 0.5px calc(100% - 6px));
    clip-path: polygon(5px 6px, 100% 0.5px, calc(100% - 9px) 100%, 0.5px calc(100% - 6px));
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -moz-transform-origin: calc(100% - 24px) 24px;
    -webkit-transform-origin: calc(100% - 24px) 24px;
    transform-origin: calc(100% - 24px) 24px;
}
@media (prefers-reduced-motion: reduce) {
    #nav-list ul {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
        -moz-transform-origin: unset;
        -webkit-transform-origin: unset;
        transform-origin: unset;
    }
}

/* Brilho */
#nav-list ul::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.2); /* Este é ligeiramente mais transparente propositadamente */
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(5px 6px, 100% 0.5px, 8px 9px, 0.5px calc(100% - 6px));
    clip-path: polygon(5px 6px, 100% 0.5px, 8px 9px, 0.5px calc(100% - 6px));
}
/* Sombra */
#nav-list {
    display: block;
    position: absolute;
    top: var(--padding);
    right: var(--padding);
    z-index: 99;
    -webkit-filter: drop-shadow(-6px 9px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(-6px 9px 0 rgb(0, 0, 0, 0.3));
    pointer-events: none;
}
#nav-list ul[aria-hidden="true"] {
    transform: scale(0);
    /* -webkit-filter: blur(3px);
    filter: blur(3px); */
    /* display: none; */
}
#nav-list ul[aria-hidden="false"] {
    transform: scale(1);
    /* -webkit-filter: blur(0);
    filter: blur(0); */
    pointer-events: auto;
    /* display: inline-block; */
}
@media (prefers-reduced-motion: reduce) {
    #nav-list ul[aria-hidden="true"] {
        display: none;
    }
    #nav-list ul[aria-hidden="false"] {
        display: block;
    }
}

#nav-list ul li {
    font-family: var(--Funnel-Display);
    font-size: 28px;
    line-height: 120%;
    font-weight: 800;
    width: 100%;
    margin-bottom: 6px;
}

#nav-list button {
    background: none;
    border: none;
    font-family: var(--Funnel-Display);
    font-size: 28px;
    text-align: start;
    font-weight: 800;
    margin-bottom: 18px;
}

/* header a:hover {
    color: white;
} */

#nav-list a,
#nav-list button {
    color: white;
    opacity: 0.5;
}

#nav-list a:hover,
#nav-list a:focus,
#nav-list button:hover,
#nav-list button:focus {
    color: inherit;
    opacity: 1;
}

#nav-list a[aria-current="page"] {
    color: #7cc637;
}

/* --------------------- OPÇÕES DE ACESSIBILIDADE -------------------- */
#options {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    width: calc(100% - (2 * var(--padding)));
    max-width: 640px;
    font-size: 18px;
    font-weight: 800;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-filter: blur(0) drop-shadow(2px 6px 0 rgb(0, 0, 0, 0.3));
    filter: blur(0) drop-shadow(2px 6px 0 rgb(0, 0, 0, 0.3));
}
@media (prefers-reduced-motion: reduce) {
    #options {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
}
#options > div {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 56px 48px;
    gap: 20px;
    background-image: linear-gradient(157deg, #121419 -35.24%, #21252f 114.53%);
    -webkit-clip-path: polygon(5px 6px, 100% 0.5px, calc(100% - 12px) 100%, 0.5px calc(100% - 6px));
    clip-path: polygon(5px 6px, 100% 0.5px, calc(100% - 12px) 100%, 0.5px calc(100% - 6px));
}
#options > div::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.2); /* Este é ligeiramente mais transparente propositadamente */
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(5px 6px, 100% 0.5px, 8px 9px, 0.5px calc(100% - 6px));
    clip-path: polygon(5px 6px, 100% 0.5px, 8px 9px, 0.5px calc(100% - 6px));
}

#options-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    -webkit-filter: blur(0) drop-shadow(-2px 6px 0 rgb(0, 0, 0, 0.3));
    filter: blur(0) drop-shadow(-2px 6px 0 rgb(0, 0, 0, 0.3));
    /* pointer-events: none; */
}

#options-icon button {
    display: block;
    position: relative;
    border: 0;
    width: 80px;
    height: 80px;
    background: var(--gradient-blue);
    -webkit-clip-path: polygon(3px 2px, 100% 0.5px, calc(100% - 3px) 100%, 0.5px calc(100% - 4px));
    clip-path: polygon(3px 2px, 100% 0.5px, calc(100% - 3px) 100%, 0.5px calc(100% - 4px));
    /* pointer-events: auto; */
}
/* Brilho */
#options-icon button::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.3);
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(3px 2px, 100% 0.5px, 6px 5px, 0.5px calc(100% - 4px));
    clip-path: polygon(3px 2px, 100% 0.5px, 6px 5px, 0.5px calc(100% - 4px));
}

#options-icon button::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    -webkit-clip-path: path(
        "M19.9 63.2 15 56.4 33.7 39.3 15.6 20 21.8 15.6 39.5 33.9 60.1 15 65 21.8 45.3 39.9 64.3 59.6 57.8 65 39.4 45.3 19.9 63.2Z"
    );
    clip-path: path("M19.9 63.2 15 56.4 33.7 39.3 15.6 20 21.8 15.6 39.5 33.9 60.1 15 65 21.8 45.3 39.9 64.3 59.6 57.8 65 39.4 45.3 19.9 63.2Z");
}

#options-icon button:hover,
#options-icon button:focus {
    background: #7cc637;
}

/* Animação */
#options-icon button:focus:not(:active, :hover) {
    -moz-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    -webkit-animation: button-wiggle 0.15s ease-in-out 1 forwards;
    animation: button-wiggle 0.15s ease-in-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
    #options-icon button:focus:not(:active, :hover) {
        -moz-animation: none;
        -webkit-animation: none;
        animation: none;
    }
}

#options fieldset {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    border: none;
}

#options legend {
    font-size: 40px;
    font-weight: 800;
    line-height: 110%;
    font-family: var(--Funnel-Display);
    margin-bottom: 0.3em;
}
#options output {
    font-weight: 400;
    /* color: white; */
}

#options ul {
    list-style: none;
}

#options[aria-hidden="true"] {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    /* -webkit-filter: blur(3px);
    filter: blur(3px); */
}
#options[aria-hidden="false"] {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    /* -webkit-filter: blur(0);
    filter: blur(0); */
}

@media (prefers-reduced-motion: reduce) {
    #options[aria-hidden="true"] {
        display: none;
    }
    #options[aria-hidden="false"] {
        display: block;
    }
}

#options > div div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding-left: 24px;
}

#options fieldset > div {
    margin-bottom: 10px;
    align-items: center;
}
#options fieldset > div div {
    width: unset;
}

/* #options li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#options li:focus-within {
    accent-color: #7cc637;
    color: #7cc637;
} */

/* =============================== MAIN ============================== */
/* main {
    padding: 150px var(--padding) 0;
} */

/* ----------------------------- INTRO ------------------------------- */
#intro {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: var(--gradient-blue);
    padding: calc(120px + 10vh) var(--padding);
    cursor: pointer;
}

#intro[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: 0.2s all;
    transition: 0.5s all;
}
@media screen and (prefers-reduced-motion: reduce) {
    #intro[aria-hidden="true"] {
        -webkit-transition: none;
        transition: none;
    }
}

#intro[aria-hidden="false"] {
    opacity: 1;
    pointer-events: all;
}

#intro > div {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: row;
    gap: 48px;
}
#intro > div > div {
    position: relative;
    display: block;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
}
.intro-title {
    font-family: var(--Funnel-Display);
    font-size: 80px;
    line-height: 95%;
    font-weight: 800;
    margin-bottom: 52px;
    width: 100%;
}

.intro-text p {
    text-wrap: pretty;
}

#intro .icons {
    width: 100%;
    height: 100%;
    /* height: fit-content; */
    padding-bottom: var(--padding);
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    /* top: 120px; */
    /* margin-top: 5vh; */
    gap: calc(var(--padding) + 16px);
    position: relative;
    font-size: 96px;
    text-align: center;
}
#intro .icons > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    gap: var(--padding);
}

#intro .intro-best {
    position: absolute;
    display: block;
    font-size: unset;
    width: calc(50% - var(--padding) - 24px);
    /* width: 100%; */
    text-wrap: pretty;
    bottom: 25vh;
}

#intro[aria-hidden="false"] ~ #scroll-n-actions #scroll-buttons {
    opacity: 0;
    pointer-events: none;
}

/* -------------------------- PÁGINA INÍCIO -------------------------- */
#hero-home {
    position: relative;
    display: block;
    padding-bottom: 0;
    min-height: 0;
    height: calc(100vh - var(--actionbar));
    /* max-height: calc(100vh - var(--actionbar)); */
}
#hero-home > div {
    position: relative;
    display: flex;
    width: 100%;
    /* height: calc(100vh - var(--actionbar)); */
    height: stretch;
    height: -webkit-fill-available;
    min-height: 0;
    max-height: none;
}

#hero-home > div > div:nth-of-type(2) {
    position: absolute;
    display: block;
    right: 0;
    width: calc(50% - 24px);
    padding: 10vh 0 25vh;
    height: calc(100vh - 120px - var(--actionbar));
}
#hero-home h1 {
    margin-top: 0;
}

#avatar {
    position: absolute;
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
    transform: translateX(calc(50% - 25vw + 12px));
    right: 50%;
}
#avatar > * {
    position: relative;
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
}

#avatar stacked-alpha-video + picture {
    display: none;
}

#avatar img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-x: visible;
}

/* Quando o vídeo tiver reproduzido, dá-lhe uma affordance */
#avatar stacked-alpha-video[title] {
    cursor: pointer;
}

#portfolio-abstract {
    padding-bottom: calc(5 * var(--padding));
    /* overflow: hidden; */
}
#portfolio-abstract * {
    position: relative;
    /* z-index: 1; */
}

/* #portfolio > picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
} */

#portfolio-abstract > picture {
    position: absolute;
    display: block;
    width: 70%;
    max-width: 500px;
    height: auto;
    right: var(--padding);
    bottom: 0;
    /* transform: translateY(15%); */
    object-fit: cover;
    /* z-index: 0; */
}

#portfolio-abstract > picture img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (hover: hover) {
    #avatar stacked-alpha-video[title] {
        -webkit-filter: brightness(1);
        filter: brightness(1);
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
    }

    #avatar stacked-alpha-video[title]:hover {
        -webkit-filter: brightness(1.1);
        filter: brightness(1.1);
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    @media screen and (hover: hover) {
        #avatar stacked-alpha-video[title] {
            -webkit-filter: brightness(1);
            filter: brightness(1);
            -webkit-transition: none;
            transition: none;
        }

        #avatar stacked-alpha-video[title]:hover {
            -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
        }
    }
}

/* ------------------------ PÁGINA PORTFÓLIO ------------------------- */
.project-list {
    width: 100%;
    list-style-type: none;
    justify-content: center;
    /* height: auto; */
    display: flex;
    gap: 10px;
    flex-direction: column;
    position: relative;
    /* height: 0; */
    -webkit-filter: drop-shadow(3px 5px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(3px 5px 0 rgb(0, 0, 0, 0.3));
}

.project-list > div {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* height: fit-content; */
    gap: 10px;
    margin: 10px 0 0;
}

.project-list li {
    width: 100%;
    flex-basis: calc(100% / 3 - 7.5px);
    max-width: calc(100% / 3);
    flex-grow: 1;
}

section:nth-of-type(odd) .project-list li > a {
    background-color: #21252f;
}

section:nth-of-type(even) .project-list li > a {
    background-color: #121419;
}

.project-list li > a {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: stretch;
    /* background-color: #21252f; */
    height: 100%;
    width: 100%;
}
section:nth-of-type(odd) .project-list li > a:focus,
section:nth-of-type(odd) .project-list li > a:hover,
section:nth-of-type(even) .project-list li > a:focus,
section:nth-of-type(even) .project-list li > a:hover {
    background-color: #7cc637;
    color: white;
}

.project-list li figure {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.project-list li > a:hover img,
.project-list li > a:focus img {
    /* background-color: #7cc637; */
    opacity: 0.5;
}

.project-list > div:nth-of-type(odd) li:nth-of-type(odd) > a,
.project-list > div:nth-of-type(even) li:nth-of-type(even) > a {
    -webkit-clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 10px) calc(100% - 3px), 5px 100%);
    clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 10px) calc(100% - 3px), 5px 100%);
}
.project-list > div:nth-of-type(odd) li:nth-of-type(even) > a,
.project-list > div:nth-of-type(even) li:nth-of-type(odd) > a {
    -webkit-clip-path: polygon(10px 5px, calc(100% - 10px) 0.5px, calc(100% - 5px) 100%, 0.5px calc(100% - 3px));
    clip-path: polygon(10px 5px, calc(100% - 10px) 0.5px, calc(100% - 5px) 100%, 0.5px calc(100% - 3px));
}

.project-list li > a picture {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    flex-shrink: 0;
}
.project-list li > a picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.project-list li > a figcaption {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    /* height: -webkit-fill-available;
    height: stretch; */

    font-family: var(--Funnel-Display);
    font-size: 40px;
    line-height: 95%;
    font-weight: 800;

    margin: 0;
    padding: 24px 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* ------------------------ PÁGINA SOBRE MIM ------------------------- */
#profile-photo {
    position: relative;
    display: flex;
    width: 100%;
    height: stretch;
    height: -webkit-fill-available;
    justify-content: flex-end;
    -webkit-filter: drop-shadow(-4px 6px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(-4px 6px 0 rgb(0, 0, 0, 0.3));
    /* -webkit-transform: translateY(calc(-2em - 64px));
    transform: translateY(calc(-2em - 64px));
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom; */
}
#profile-photo img {
    font-size: 80px;
    position: relative;
    display: block;
    width: 100%;
    max-width: 600px;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    -webkit-clip-path: polygon(0 5px, 100% 0, calc(100% - 10px) 100%, 5px calc(100% - 5px));
    clip-path: polygon(0 5px, 100% 0, calc(100% - 10px) 100%, 5px calc(100% - 5px));
}

#profile-experience {
    display: flex;
    gap: var(--padding);
}

#software-technologies {
    flex-direction: column;
    gap: var(--padding);
    margin-top: 10px;
}
#software-technologies ul {
    justify-content: flex-start;
}

/* ------------------------- PÁGINA CONTACTO ------------------------- */
/* Botões PDF */
#pdf-buttons {
    display: flex;
    position: relative;
    flex-direction: auto;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}
#pdf-buttons .button-link {
    margin: 0;
}

/* ------------------------- PÁGINA PROJETO -------------------------- */
/* Hero */
#project-hero {
    display: flex;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    gap: 0;
    /* Força a altura mínima da secção das outras páginas */
    min-height: 0;
    height: calc(100vh - var(--actionbar));
    /* height: 100%; */
    /* max-height: calc(100vh - var(--actionbar); */
    justify-content: flex-start;
}
#project-hero > div {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    z-index: 1;
}
#project-hero h1 {
    margin-top: 0;
    margin-bottom: 52px;
    padding-left: var(--padding);
    padding-right: var(--padding);
}
#project-hero:not(.mouse-focus) img {
    opacity: 0.7;
}

#project-hero > picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}
#project-hero > picture img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: 50% 40%; */
}
#project-hero .button-link {
    position: absolute;
    display: block;
    bottom: 0;
    left: var(--padding);
    transform: translateY(50%);
}

/* Abstract */
#project-abstract {
    display: flex;
    z-index: 1;
    justify-content: space-between;
    gap: calc(3 * var(--padding));
    padding-bottom: 0;
    scroll-margin: calc(24px + var(--actionbar));
    overflow: visible;
}

#project-abstract > div {
    position: relative;
    display: flex;
    flex-direction: column;
}
#project-abstract > div:nth-of-type(2) {
    gap: 10px;
}

.project-attributes {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.project-topics {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 20px;
}
.project-topics div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.software-list {
    position: relative;
    display: flex;
    list-style-type: none;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}
.software-list li {
    display: block;
    position: relative;
    -webkit-filter: drop-shadow(3px 5px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(3px 5px 0 rgb(0, 0, 0, 0.3));
    width: fit-content;
    height: fit-content;
    font-size: 16px;
    font-weight: 400;
}
.software-list li a,
.software-list li span {
    display: inline-flex;
    position: relative;
    flex-direction: row-reverse;
    color: white;
    padding: 10px 24px;
    background: var(--gradient-black);
    -webkit-clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 10px) calc(100% - 3px), 5px 100%);
    clip-path: polygon(0.5px 0.5px, 100% 5px, calc(100% - 10px) calc(100% - 3px), 5px 100%);
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    text-decoration: none;
    min-width: 4em;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .software-list li a,
    .software-list li span {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
}

.software-list li a picture,
.software-list li span picture {
    display: block;
    position: relative;
    height: 1em;
    width: fit-content;
}
.software-list li img,
.software-list li img {
    display: block;
    position: relative;
    height: 100%;
    width: auto;
}

/* Brilho */
.software-list li a::before,
.software-list li span::before {
    display: block;
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255, 0.3);
    -webkit-clip-path: polygon(0 0, 100% 5px, 3.5px 3.5px, 5px 100%);
    clip-path: polygon(0 0, 100% 5px, 3.5px 3.5px, 5px 100%);
}
.software-list li a:hover,
.software-list li a:focus {
    background: #7cc637;
}

/* Links de código-fonte, site, etc. */
.project-links {
    position: relative;
    display: flex;
    top: 100%;
    height: fit-content;
    left: 50%;
    transform: translate(-50%, calc(1em + 5px));
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.project-links a {
    gap: 0.5em;
}

/* Galeria */
#project-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(3 * var(--padding)) var(--padding);
    gap: calc(3 * var(--padding) - 10px);
    align-items: center;
    /* scroll-margin-top: calc(- var(--padding)); */
}

#project-gallery #gallery-buttons,
#project-gallery #gallery-buttons * {
    scroll-margin-top: calc(100vh * 3 / 4 + 24px);
    scroll-margin-bottom: calc(var(--actionbar) + 40px);
}

#project-gallery > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    height: auto;
}

#project-gallery > div > p {
    margin-bottom: 0;
    max-width: 1000px;
    text-wrap: wrap;
    text-wrap: pretty;
}

#project-gallery > div:has(#gallery-buttons) > p {
    position: absolute;
    display: block;
    /* padding-right: var(--padding); */
    top: 0;
    right: 0;
    width: calc(50% - 24px);
    z-index: 1;
}
#project-gallery > div:has(#gallery-buttons) > p ~ div {
    position: relative;
    display: block;
}

#project-gallery figure {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    /* flex-shrink: 1; */
    /* flex-wrap: wrap; */
    /* padding-right: var(--padding); */
    /* padding: var(--padding); */
    width: 100%;
    flex: auto;
    /* max-height: calc(100vh - 120px - var(--actionbar) - 24px); */
    gap: 48px;
}

#project-gallery figure[aria-current="true"] {
    display: flex;
}
#project-gallery figure:not([aria-current="true"]) {
    display: none;
}
#project-gallery figure > aside {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    -webkit-filter: drop-shadow(4px 6px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(4px 6px 0 rgb(0, 0, 0, 0.3));
}

/* Caso seja uma imagem, um vídeo, ou outra coisa */
#project-gallery figure > aside > *:not(span) {
    position: relative;
    display: block;
    /* background-color: red; */
    /* width: calc(50% - 24px); */
    width: 100%;
    height: auto;
    aspect-ratio: calc(4 / 3) / 1;
    object-fit: cover;

    -webkit-clip-path: polygon(0 0, 100% 5px, calc(100% - 10px) calc(100% - 10px), 10px 100%);
    clip-path: polygon(0 0, 100% 5px, calc(100% - 10px) calc(100% - 10px), 10px 100%);
}
#project-gallery figure > aside span {
    position: absolute;
    display: block;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 96px;
    text-shadow: 4px 6px 0 rgb(0, 0, 0, 0.3);
    pointer-events: none;
}

#project-gallery figure > aside span > i.fa-pause {
    transition: all 0.2s;
    opacity: 1;
}
#project-gallery figure > aside span > i.fa-pause[hide] {
    opacity: 0;
}
#project-gallery figcaption {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    font-weight: 400;
    /* font-size: 16px; */
    text-wrap: wrap;
    text-wrap: pretty;
}

#gallery-buttons {
    display: flex;
    position: absolute;
    flex-direction: row;
    bottom: 48px;
    left: calc(50% - 8px);
    transform: translateX(-100%);
    gap: 16px;
    width: fit-content;
    -webkit-filter: drop-shadow(3px 4px 0 rgb(0, 0, 0, 0.3));
    filter: drop-shadow(3px 4px 0 rgb(0, 0, 0, 0.3));
    z-index: 1;
    color: white;
}
#gallery-buttons > span {
    width: 48px;
    height: 48px;
    position: relative;
    display: block;
}

#gallery-buttons button {
    position: relative;
    display: block;
    background: var(--gradient-blue);
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    color: white;
}

#gallery-buttons.focused button {
    background: #7cc637;
}

#gallery-buttons button::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.3);
    left: 0;
    top: 0;
}

#gallery-left button {
    -webkit-clip-path: polygon(2px 4px, calc(100% - 2px) 0, 100% 100%, 0 calc(100% - 2px));
    clip-path: polygon(2px 4px, calc(100% - 2px) 0, 100% 100%, 0 calc(100% - 2px));
}
#gallery-left button::before {
    -webkit-clip-path: polygon(2px 4px, calc(100% - 2px) 0, 5px 7px, 0 calc(100% - 2px));
    clip-path: polygon(2px 4px, calc(100% - 2px) 0, 4px 6px, 0 calc(100% - 2px));
}
#gallery-right button {
    -webkit-clip-path: polygon(0 0, 100% 3px, calc(100% - 3px) calc(100% - 3px), 2px 100%);
    clip-path: polygon(0 0, 100% 3px, calc(100% - 3px) calc(100% - 3px), 2px 100%);
}
#gallery-right button::before {
    -webkit-clip-path: polygon(0 0, 100% 3px, calc(100% - 3px) calc(100% - 3px), 2px 100%);
    clip-path: polygon(0 0, 100% 3px, 2px 2px, 2px 100%);
}

#project-gallery button:hover:not(:disabled) {
    background: #7cc637;
}

/* Caso não consiga fazer :hover (por estar num telemóvel, por exemplo), tem o :hover em consideração para que a animação não se repita */
#project-gallery button:focus:not(:active, :hover) {
    -moz-animation: button-wiggle 0.15s ease-in-out 0s 1 forwards;
    -webkit-animation: button-wiggle 0.15s ease-in-out 0s 1 forwards;
    animation: button-wiggle 0.15s ease-in-out 0s 1 forwards;
}
/* Caso contrário, esquece o :hover e só liga ao :active */
@media screen and (hover: hover) {
    #project-gallery button:focus:not(:active) {
        -moz-animation: button-wiggle 0.15s ease-in-out 0s 1 forwards;
        -webkit-animation: button-wiggle 0.15s ease-in-out 0s 1 forwards;
        animation: button-wiggle 0.15s ease-in-out 0s 1 forwards;
    }
}
@media (prefers-reduced-motion: reduce) {
    /* Caso não consiga fazer :hover (por estar num telemóvel, por exemplo), tem o :hover em consideração para que a animação não se repita */
    #project-gallery button:focus:not(:active, :hover) {
        -moz-animation: none;
        -webkit-animation: none;
        animation: none;
    }
    /* Caso contrário, esquece o :hover e só liga ao :active */
    @media screen and (hover: hover) {
        #project-gallery button:focus:not(:active) {
            -moz-animation: none;
            -webkit-animation: none;
            animation: none;
        }
    }
}

/* ====================== SCROLL E AÇÕES ========================== */
#scroll-n-actions {
    display: flex;
    position: fixed;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    z-index: 100;
    pointer-events: none;
}

/* ----------------------- BOTÕES DE SCROLL ----------------------- */
#scroll-buttons {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: fit-content;
    /* margin: auto var(--padding) auto 100%; */
    /* margin-left: calc(100% - var(--padding)); */
    margin-right: var(--padding);
    margin-bottom: calc(var(--padding) + 4px);
    pointer-events: auto;
    color: white;
    /* right: var(--padding); */
    /* bottom: 92px; */
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-filter: drop-shadow(3px 4px 0 rgb(0, 0, 0, 0.3)) blur(0);
    filter: drop-shadow(3px 4px 0 rgb(0, 0, 0, 0.3)) blur(0);
    /* z-index: -3000; */
}
@media (prefers-reduced-motion: reduce) {
    #scroll-buttons {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
}
header:has(#background.menu-open) ~ #scroll-n-actions #scroll-buttons,
header:has(#background.options-open) ~ #scroll-n-actions #scroll-buttons,
header:has(#background.popup-open) ~ #scroll-n-actions #scroll-buttons {
    opacity: 1;
    -webkit-filter: brightness(70%) drop-shadow(3px 4px 0 rgb(0, 0, 0, 0.3)) blur(10px);
    filter: brightness(70%) drop-shadow(3px 4px 0 rgb(0, 0, 0, 0.3)) blur(10px);
    pointer-events: none;
}

#scroll-buttons button {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--gradient-black);
    color: white;
}
#scroll-buttons button:hover:not(:disabled) {
    background: #7cc637;
}

#scroll-up,
#scroll-down {
    position: relative;
    display: block;
    width: fit-content;
    height: fit-content;
    color: initial;
}

/* Botão scroll up */
#scroll-up button {
    -webkit-clip-path: polygon(3px 0, calc(100% - 3px) 2px, 100% calc(100% - 2px), 0% 100%);
    clip-path: polygon(3px 0, calc(100% - 3px) 2px, 100% calc(100% - 2px), 0% 100%);
}

#scroll-up button::before {
    display: block;
    position: absolute;
    content: "";
    background-color: rgb(255, 255, 255, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-clip-path: polygon(3px 0, calc(100% - 3px) 2px, 5px 2px, 0% 100%);
    clip-path: polygon(3px 0, calc(100% - 3px) 2px, 5px 2px, 0% 100%);
}
/* Botão scroll down */
#scroll-down button {
    -webkit-clip-path: polygon(2px 3px, calc(100% - 3px) 0, 100% calc(100% - 2px), 0% 100%);
    clip-path: polygon(2px 3px, calc(100% - 3px) 0, 100% calc(100% - 2px), 0% 100%);
}
#scroll-down button::before {
    display: block;
    position: absolute;
    content: "";
    background-color: rgb(255, 255, 255, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-clip-path: polygon(2px 2px, calc(100% - 3px) 0, 4px 5px, 0% 100%);
    clip-path: polygon(2px 2px, calc(100% - 3px) 0, 4px 5px, 0% 100%);
}

/* ----------------------- BARRA DE AÇÕES ----------------------- */
#actionbar {
    display: flex;
    position: relative;
    padding: 4px var(--padding);
    width: 100%;
    min-height: var(--actionbar);
    /* bottom: 0;
    left: 0; */
    /* background-color: rgb(68, 68, 68, 0.4); */
    /* background-color: rgb(33, 37, 47, 0.5); */
    background-image: linear-gradient(rgb(30, 30, 30, 0.5) 0%, rgb(18, 20, 25, 0.5) 5%, rgb(18, 20, 25, 0.5) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
    border: rgb(255, 255, 255, 0.15) inset;
    border-width: 1px 0 0;
    /* gap: 48px; */
    /* background-color: rgb(18, 20, 25); */
}

#actionbar div#main-actions {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    /* flex-wrap: wrap; */
    gap: 4px 24px;
    /* hyphens: none; */
    height: 100%;
    width: fit-content;
    justify-content: flex-start;
}

#actionbar div#main-actions div {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    /* min-width: 2em; */
    /* background-color: #7cc637; */
    width: fit-content;
    white-space: nowrap;
    /* max-width: none; */
    /* flex-grow: 1;
    flex-shrink: 1; */
}

#actionbar img {
    position: relative;
    display: block;
    width: auto;
    height: 100%;
    max-height: 36px;
    /* max-width: 36px; */
    /* max-height: 100%; */
    aspect-ratio: auto;
}

#actionbar div#main-actions div span {
    display: flex;
    position: relative;
    align-items: center;
    width: fit-content;
    /* background-color: #477cd8; */
    /* min-width: 0.2em; */
    height: 100%;
}

/* ============================= FOOTER =============================== */
footer {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(200px + var(--actionbar));
    background-color: #21252f;
    padding: 40px var(--padding) var(--actionbar);
    font-size: 20px;
    flex-direction: column;
    gap: 10px;
    /* z-index: 1; */
    /* overflow-y: visible; */
}

footer > div {
    display: flex;
    flex-direction: row;
    gap: 10px 48px;
    align-items: baseline;
}

footer #credits-link {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
}

footer #social-media {
    display: flex;
    flex-direction: row;
    gap: 10px;
    list-style-type: none;
    font-size: 28px;
}

footer #go-to-top {
    position: absolute;
    right: calc(var(--padding) + 45px); /* três píxeis a menos para tapar o espaço entre os botões */
    bottom: calc(52px + var(--padding) + var(--actionbar) + 10px + 6px);
    /* bottom: 0; */
}
footer #go-to-top a {
    height: 48px;
    -webkit-clip-path: polygon(0.5px 2px, 100% 0, calc(100% - 3px) calc(100% - 0.5px), 7px calc(100% - 3px));
    clip-path: polygon(0.5px 2px, 100% 0, calc(100% - 3px) calc(100% - 0.5px), 7px calc(100% - 3px));
    /* padding-right: 44px; */
}
footer #go-to-top a::before {
    -webkit-clip-path: polygon(0.5px 2px, 100% 0, 4px 5px, 7px calc(100% - 3px));
    clip-path: polygon(0.5px 2px, 100% 0, 4px 5px, 7px calc(100% - 3px));
}

/* ================================== MOBILE ================================= */
@media screen and (max-width: 700px) {
    /* ========================== COISAS GERAIS ======================== */
    * {
        scroll-margin: 120px 0 var(--actionbar);

        --padding: 30px;
    }

    section {
        /* min-height: calc(50vh + 120px); */
        /* justify-content: flex-end; */
        gap: 0;
    }
    section:first-of-type {
        scroll-margin-top: 0;
    }

    section > div {
        flex-direction: column;
        gap: var(--padding);
    }

    /* Caso a página web só tenha uma secção (tipo a 404.html) */
    section:only-of-type {
        min-height: calc(100vh - var(--actionbar));
        /* padding-bottom: 120px; */
    }
    section:only-of-type .button-link {
        margin-top: 20px;
    }

    /* ========================= PARÁGRAFOS E LINKS ====================== */
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 32px;
    }
    section > h2 {
        width: 100%;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    p {
        font-size: 16px;
    }

    .button-link a,
    .button-link button {
        font-size: 16px;
        padding: 10px 36px;
        min-width: 5em;
    }

    li:not(:has(i)) {
        font-size: 16px;
    }

    form * {
        font-size: 16px;
    }

    /* form button[type="submit"] {
        font-size: 16px;
    } */

    #exit-popup > div > div:first-of-type {
        margin-top: 24px;
        margin-bottom: 12px;
    }
    #exit-popup > div > div:nth-of-type(2) {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* ============================= CABEÇALHO ========================== */
    header {
        gap: 0;
        align-items: flex-end;
    }

    /* Efeito de desfoque */
    header .blur-gradient {
        height: calc(100% + 24px);
    }

    /* Logo/texto Guilherme Costa */
    .main-logo {
        font-size: 28px;
        margin-bottom: 4px;
    }

    #nav-icon button {
        width: 64px;
        height: 64px;
        /* background: var(--gradient-blue); */
    }

    /* Ícone botão fechado */
    #nav-icon button[aria-expanded="false"]::after {
        -webkit-clip-path: path(
            "M10.9 19.5 11.3 12.6 55 11 54.6 17.9 10.9 19.5ZM10.5 35.6 10.1 28.8 53.9 30 54.6 37.2 10.5 35.6ZM9 51.4 10.4 45.3 54.3 48.1 53.2 55 9 51.4Z"
        );
        clip-path: path(
            "M10.9 19.5 11.3 12.6 55 11 54.6 17.9 10.9 19.5ZM10.5 35.6 10.1 28.8 53.9 30 54.6 37.2 10.5 35.6ZM9 51.4 10.4 45.3 54.3 48.1 53.2 55 9 51.4Z"
        );
    }
    /* Ícone botão aberto */
    #nav-icon button[aria-expanded="true"]::after {
        -webkit-clip-path: path(
            "M15.9 50.6 12 45.1 27 31.4 12.5 16 17.4 12.5 31.6 27.1 48.1 12 52 17.4 36.2 31.9 51.4 47.7 46.2 52 31.5 36.3 15.9 50.6Z"
        );
        clip-path: path("M15.9 50.6 12 45.1 27 31.4 12.5 16 17.4 12.5 31.6 27.1 48.1 12 52 17.4 36.2 31.9 51.4 47.7 46.2 52 31.5 36.3 15.9 50.6Z");
    }

    #nav-list ul {
        width: calc(100vw - 2 * var(--padding));
        /* max-width: none; */
        max-width: 400px;
    }

    /* #nav-list a:not(:focus),
    #nav-list button:not(:focus) {
        opacity: 1;
    } */

    /* Opções de Acessibilidade */
    #options {
        font-size: 16px;
    }
    #options > div {
        padding: 48px 32px;
    }
    #options-icon button {
        width: 64px;
        height: 64px;
        background: var(--gradient-blue);
    }
    #options-icon button::after {
        -webkit-clip-path: path(
            "M15.9 50.6 12 45.1 27 31.4 12.5 16 17.4 12.5 31.6 27.1 48.1 12 52 17.4 36.2 31.9 51.4 47.7 46.2 52 31.5 36.3 15.9 50.6Z"
        );
        clip-path: path("M15.9 50.6 12 45.1 27 31.4 12.5 16 17.4 12.5 31.6 27.1 48.1 12 52 17.4 36.2 31.9 51.4 47.7 46.2 52 31.5 36.3 15.9 50.6Z");
    }

    #options fieldset > legend {
        font-size: 32px;
        margin-bottom: 12px;
    }

    #options fieldset > div {
        padding-left: 0;
    }

    /* #options fieldset > div > label {
        flex-grow: 2;
    } */

    #options fieldset > div:has(output) {
        /* display: flex; */
        gap: 5px;
        flex-direction: row;
        flex-wrap: wrap;
        /* max-width: 8em; */
        width: 100%;
        text-align: end;
    }
    #options fieldset > div:has(output) label {
        width: 100%;
        /* max-width: 200px; */
        text-align: start;
        /* flex-basis: 100%; */
        /* justify-content: flex-start; */
    }

    #options fieldset > div:has(output) div {
        width: 100%;
        /* max-width: 200px; */
        text-align: end;
        justify-content: flex-end;
        /* flex-basis: 100%; */
    }

    /* #options fieldset > div > div {
        gap: 0;
        flex-direction: column-reverse;
        max-width: 8em;
        width: 100%;
        text-align: right;
    } */

    /* =================================== MAIN ========================================== */
    /* --------------------------------- INTRO ------------------------------------------- */
    #intro {
        padding: var(--padding);
    }
    #intro > div {
        flex-direction: column;
        height: unset;
        margin-top: 20vh;
    }

    #intro .intro-title {
        font-size: 48px;
    }

    #intro .icons {
        font-size: 32px;
        flex-direction: row;
        gap: 32px;
        /* height: fit-content; */
    }

    #intro .intro-best {
        width: calc(100% - 2 * var(--padding));
        position: absolute;
        bottom: calc(7.5vh + var(--actionbar));
    }

    /* --------------------------------- PÁGINA INÍCIO ----------------------------------- */
    #hero-home {
        padding-left: 0;
        padding-right: 0;
        /* min-height: calc(100vh - var(--actionbar)); */
        max-height: none;
        height: auto;
    }

    #hero-home > div {
        gap: 0;
    }

    #avatar {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        right: 0;
        transform: none;
        aspect-ratio: 1 / 0.75;
        mask: linear-gradient(rgb(0, 0, 0, 1) 0%, rgb(0, 0, 0, 1) 80%, rgb(0, 0, 0, 0) 100%);
    }

    #hero-home > div > div:nth-of-type(2) {
        position: relative;
        display: block;
        width: 100%;
        padding: var(--padding) var(--padding) calc(var(--padding) * 2);
        height: auto;
    }

    #avatar {
        min-height: auto;
    }

    /* #avatar > * {
        aspect-ratio: 1/0.75;
        mask: linear-gradient(rgb(0, 0, 0, 1) 0%, rgb(0, 0, 0, 1) 80%, rgb(0, 0, 0, 0) 100%);
    } */

    #portfolio-abstract {
        padding-bottom: calc(7 * var(--padding));
    }

    /* ------------------------------- PÁGINA PORTFÓLIO ---------------------------------- */
    .project-list > div {
        flex-direction: column;
        gap: 20px;
    }
    .project-list li {
        width: 100%;
        flex-basis: auto;
        max-width: none;
        flex-grow: 1;
    }
    .project-list li > a picture {
        height: 150px;
    }
    .project-list li > a figcaption {
        padding: 20px 10px;
        font-size: 24px;
    }

    /* -------------------------------- PÁGINA PROJETO ----------------------------------- */
    #project-hero {
        max-height: 720px;
    }

    #project-abstract > div {
        gap: 24px;
    }
    #project-abstract > div:nth-of-type(2) {
        gap: 0;
    }
    #project-abstract h2 {
        margin-bottom: 10px;
    }

    #project-gallery {
        padding: calc(2 * var(--padding)) var(--padding) calc(3 * var(--padding));
    }

    #project-gallery > div > p {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
    }
    #project-gallery > div:has(#gallery-buttons) > p {
        margin-bottom: calc(var(--padding) + 10px);
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
    }

    #project-gallery figure {
        flex-direction: column;

        gap: 12px;
    }
    #project-gallery figcaption {
        padding: 0;
        margin: 32px 0 0;
    }

    .project-topics {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }
    /* .project-attributes ul {
        gap: 12px;
    } */
    .project-links {
        flex-direction: column;
        width: fit-content;
    }

    /* #project-gallery figure > figcaption {
        margin-top: calc(var(--padding) + 48px);
    } */

    #gallery-buttons {
        top: calc((100vw - 2 * var(--padding)) * 0.75 - 24px);
        left: 0;
        transform: none;
    }
    #gallery-buttons,
    #gallery-buttons * {
        scroll-margin-top: 94px;
        scroll-margin-bottom: 50vh;
    }

    /* ------------------------------- PÁGINA SOBRE MIM --------------------------------- */
    #profile-photo {
        -webkit-transform: none;
        transform: none;
    }

    #software-technologies ul {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
    }

    /* ------------------------------- PÁGINA CONTACTOS --------------------------------- */
    #pdf-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* ================================ BARRA DE AÇÕES ================================== */
    #actionbar {
        display: none;
        /* background-color: rgb(33, 37, 47, 0.5); */
    }
    #scroll-n-actions.show #actionbar {
        display: flex;
    }

    /* Rodapé */
    footer {
        flex-direction: column;
        gap: 20px;
        height: auto;
        padding-top: 48px;
        padding-bottom: var(--actionbar);
    }
    #scroll-n-actions.show ~ footer {
        padding-bottom: calc(var(--padding) + var(--actionbar));
    }

    footer > div {
        flex-direction: column;
        gap: 10px;
    }

    footer #go-to-top {
        right: var(--padding);
        top: calc(10px - (var(--padding)));
    }

    footer #go-to-top a {
        padding: 10px 36px;
        height: initial;
        -webkit-clip-path: polygon(0.5px 2px, 100% 0, calc(100% - 6px) calc(100% - 0.5px), 7px calc(100% - 3px));
        clip-path: polygon(0.5px 2px, 100% 0, calc(100% - 6px) calc(100% - 0.5px), 7px calc(100% - 3px));
    }
}

/* Caso dê tempo para me aventurar nestas merdas */
/* @media (prefers-color-scheme: light) {
    html,
    body {
        background-color: whitesmoke;
        color: black;
    }
}

@media print {
    #jump-to-content {
        display: none;
    }

    #actionbar {
        display: none;
    }
} */