@import url(https://fonts.bunny.net/css?family=work-sans:400,400i,600,600i);

:root {
    --marg: 32px;
    --rgb: 85, 0, 243;
    --rgb2: 147, 130, 254;
    --off: black;
    --on: white;
    --cor: #FFE200;
    --claro: #f0f0f0;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.05;
    --line-height-heading: 1.15;
    --line-height-body: 1.62;
    --line-height-meta: 1.35;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.1em;
    --font-size-display: clamp(2.35rem, 6vw, 4.9rem);
    --font-size-h1: clamp(1.7rem, 4vw, 3rem);
    --font-size-h2: clamp(1.35rem, 2.6vw, 2rem);
    --font-size-h3: clamp(1.1rem, 1.8vw, 1.35rem);
    --font-size-body: clamp(1rem, 1.1vw, 1.13rem);
    --font-size-small: clamp(0.82rem, 0.95vw, 0.95rem);
    --font-size-meta: clamp(0.7rem, 0.85vw, 0.83rem);
    --font-size-nav: clamp(0.72rem, 0.85vw, 0.88rem);
    --header-banner-font-size: var(--font-size-small);
    --header-banner-line-height: 1.2;
    --header-banner-padding-y: calc(var(--marg) / 2);
    --header-banner-height: calc((var(--header-banner-font-size) * var(--header-banner-line-height)) + (var(--header-banner-padding-y) * 2));
    --header-feedback-font-size: calc(var(--font-size-small) * 0.9);
    --header-feedback-line-height: 1.2;
    --header-feedback-padding-y: calc(var(--marg) / 2);
    --header-feedback-height: calc((var(--header-feedback-font-size) * var(--header-feedback-line-height)) + (var(--header-feedback-padding-y) * 2));
}

/* Para ecrãs de portáteis (largura entre 768px e 1024px) */
@media (min-width: 768px) and (max-width: 1366px) {
:root {
        --marg: 26px;
    }}

/* Para ecrãs de desktops (largura acima de 1024px) */
@media (min-width: 1367px) {
:root {
        --marg: 32px;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html {
    font-family: 'Work Sans', sans-serif;
    font-optical-sizing: auto;
    scroll-behavior: smooth;
}

body {
    background-color: var(--on);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-regular);
    --header-feedback-offset: 0px;
    --header-banner-offset: 0px;
    --header-pre-nav-offset: calc(var(--header-feedback-offset) + var(--header-banner-offset));
}

body:has(header > .global-feedback) {
    --header-feedback-offset: var(--header-feedback-height);
}

body:has(header > section > .alert) {
    --header-banner-offset: var(--header-banner-height);
}

img {
width: 100%;
height: auto;
}

@media screen and (orientation:portrait) {
html {
        font-size: calc(var(--marg)/2);
    }
}
@media screen and (orientation:landscape) {
    html {
        font-size: calc(var(--marg)/1.5);
    }
}

button {
    border: none;
    color: var(--on);
    background-color: var(--off);
    font-weight: var(--font-weight-semibold);
    height: calc(var(--marg)*1.5);
    padding: calc(var(--marg)/2);
    margin: calc(var(--marg)/6) 0;
    font-size: var(--font-size-small);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: calc(var(--marg)/6);
    cursor: pointer;
}

.delete,
.active {
    background-color: var(--on);
}

.delete:hover,
.active:hover {
    background-color: var(--off);
}

button:hover {
    background-color: rgb(var(--rgb));
}

h1,
h2,
h3 { line-height: var(--line-height-heading);}