:root {
    --color1: rgb(70,130,39);
    --white: #fff;

    --step--2: clamp(0.69rem, calc(0.69rem + 0.04vw), 0.72rem);
    --step--1: clamp(0.83rem, calc(0.81rem + 0.12vw), 0.90rem);
    --step-0: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
    --step-1: clamp(1.20rem, calc(1.13rem + 0.36vw), 1.41rem);
    --step-2: clamp(1.44rem, calc(1.33rem + 0.55vw), 1.76rem);
    --step-3: clamp(1.73rem, calc(1.56rem + 0.82vw), 2.20rem);
    --step-4: clamp(2.07rem, calc(1.84rem + 1.17vw), 2.75rem);
    --step-5: clamp(2.49rem, calc(2.16rem + 1.64vw), 3.43rem);
}

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

html {
    font-family: 'Latina', system-ui, sans-serif;
    font-size: var(--step-0);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: radial-gradient(circle at 72% 83%, rgba(12, 12, 12,0.04) 0%, rgba(12, 12, 12,0.04) 50%,rgba(172, 172, 172,0.04) 50%, rgba(172, 172, 172,0.04) 100%),radial-gradient(circle at 57% 65%, rgba(11, 11, 11,0.04) 0%, rgba(11, 11, 11,0.04) 50%,rgba(222, 222, 222,0.04) 50%, rgba(222, 222, 222,0.04) 100%),radial-gradient(circle at 64% 31%, rgba(11, 11, 11,0.04) 0%, rgba(11, 11, 11,0.04) 50%,rgba(191, 191, 191,0.04) 50%, rgba(191, 191, 191,0.04) 100%),linear-gradient(130deg, var(--color1),rgb(47, 52, 6));}

header {
    padding: 2rem 1rem;
    text-align: center;
}

header h1 {
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--white);
    font-size: var(--step-4);
}

header :is(a, p) {
    color: var(--white);
}

main {
    flex: 1;
}

footer {
    padding: 1rem;
    text-align: center;
}
footer :is(p, a) {
    color: var(--white);
    padding: 1rem 0;
}