:root {
    --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-family: "Ubuntu", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-size: var(--fs-400);
    line-height: 1.6;

    background: radial-gradient(circle in oklab, hsl(29 56% 56% / 0.0) 0%, hsl(29 56% 56% / 0.3) 100%);

    display: grid;
    grid-template-rows: 1fr auto;
    margin-inline: 12px;

}

main {
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

main>*:where(:not(:first-child)) {
    margin-top: var(--flow-spacer, 1em);
}

h1 {
    font-size: var(--fs-500);
    line-height: 1.05;
}

a {
    color: #264a86;
}

footer {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 0px 12px;
    font-size: var(--fs-400);

    margin-block: 30px 12px;
    margin-right: 30px;
}