:root {
    --button-color: rgb(143, 60, 127);
    --button-color-focus: rgb(181, 89, 162);

    --icon-background: rgb(112, 201, 200);

    --line-color: rgb(162, 194, 145);
    --line-color-t: rgba(162, 194, 145, 0.5);

    --background-color: rgb(66, 124, 75);
    --background-color-t: rgba(66, 124, 75, 0.5);

    --size: 5.5em;
    --size-half: calc(var(--size) / 2);
    --begin: calc(var(--size) / 9.53);
    --step: calc(var(--size) / 18);
    --space: calc(var(--size) / 8.4);
    --step-s: calc(var(--step) / 1.5);

    --step-b: var(--space);
    --step-e: calc(var(--space) + var(--step));
    --step-b-2: calc(var(--space) * 2 + var(--step));
    --step-e-2: calc(var(--space) * 2 + var(--step) * 2);
    --step-b-3: calc(var(--space) * 3 + var(--step) * 2);
    --step-e-3: calc(var(--space) * 3 + var(--step) * 3);

    --small-b: calc((var(--space) * 3 + var(--step)) / 2);
    --small-e: calc(var(--small-b) + var(--step));
    --small-b-2: calc(var(--small-b) + var(--step) + var(--space));
    --small-e-2: calc(var(--small-b) + var(--step) * 2 + var(--space));

    --small-c: calc(var(--size) + var(--space) - var(--step) / 1.9);

    --bgcolor: var(--background-color);
    --color: white;
}

html {
    background: radial-gradient(circle at right,rgba(162,194,145,0) .6547619048em,rgb(162,194,145) .6547619048em,rgb(162,194,145) .9603174603em,rgba(162,194,145,0) .9603174603em,rgba(162,194,145,0) 1.6150793651em,rgb(162,194,145) 1.6150793651em,rgb(162,194,145) 1.9206349206em,rgba(162,194,145,0) 1.9206349206em,rgba(162,194,145,0) 2.5753968254em,rgb(162,194,145) 2.5753968254em,rgb(162,194,145) 2.880952381em,rgba(162,194,145,0) 2.880952381em) 0 0,radial-gradient(circle at left,rgba(162,194,145,0) 1.1349206349em,rgb(162,194,145) 1.1349206349em,rgb(162,194,145) 1.4404761905em,rgba(162,194,145,0) 1.4404761905em,rgba(162,194,145,0) 2.0952380952em,rgb(162,194,145) 2.0952380952em,rgb(162,194,145) 2.4007936508em,rgba(162,194,145,0) 2.4007936508em) 0 5.9939431913em,linear-gradient(to right top,rgb(162,194,145) .3055555556em,rgba(162,194,145,0) .3055555556em) 2.4007936508em .3055555556em,linear-gradient(to left top,rgb(162,194,145) .3055555556em,rgba(162,194,145,0) .3055555556em) 2.4007936508em .3055555556em,linear-gradient(to right bottom,rgb(162,194,145) .3055555556em,rgba(162,194,145,0) .3055555556em) 2.4007936508em .3055555556em,linear-gradient(to left bottom,rgb(162,194,145) .3055555556em,rgba(162,194,145,0) .3055555556em) 2.4007936508em .3055555556em;
    background-color: rgba(0, 0, 0, 0);
    background-size: auto, auto, auto, auto, auto, auto;
    background-size: 5.5em 5.5em;
    background-color: #427c4b;
}

body {
    background: rgba(66, 124, 75, 0.5);
}

header {
    h1, p {
        text-shadow: 0.1rem 0.1rem 0.3rem var(--button-color);
    }
}

img {
    background-color: var(--icon-background);
}

ul {
    @media (hover) {
        transition: transform 2s 0.5s, opacity 0.3s 0.5s;

        &:hover > li a:not(:hover) {
            filter: opacity(0.6);
        }
    }
}

ul li a {
    position: relative;
    background-color: var(--button-color);
}

footer a {
    color: var(--color);
    text-decoration-color: var(--button-color);
    
    &:hover, &:focus {
        text-decoration-color: var(--color);
    }
}