* {
    --white: #DBE9D8;
    --teal: #034350;
    --green: #4DC96A;
    --dark-blue: #0E0E1B;
}

body {
    background: var(--dark-blue);
    color: var(--white);
}

header  {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header .logo {
    margin: 2rem 1rem 5rem 1rem;
}

header .logo img {
    --blur: 2px;

    filter:
            drop-shadow(0px 0px var(--blur) color-mix(in srgb, var(--green), transparent 60%))
            drop-shadow(0px 1px var(--blur) color-mix(in srgb, var(--green), transparent 60%))
            drop-shadow(0px 2px var(--blur) color-mix(in srgb, var(--green), transparent 66%))
            drop-shadow(0px 3px var(--blur) color-mix(in srgb, var(--green), transparent 70%))
            drop-shadow(0px 4px var(--blur) color-mix(in srgb, var(--green), transparent 71%))
            drop-shadow(0px 5px var(--blur) color-mix(in srgb, var(--green), transparent 72%))
            drop-shadow(0px 6px var(--blur) color-mix(in srgb, var(--green), transparent 73%))
            drop-shadow(0px 7px var(--blur) color-mix(in srgb, var(--green), transparent 74%))
            drop-shadow(0px 8px var(--blur) color-mix(in srgb, var(--green), transparent 75%))
            drop-shadow(0px 9px var(--blur) color-mix(in srgb, var(--green), transparent 76%))
            drop-shadow(0px 10px var(--blur) color-mix(in srgb, var(--green), transparent 77%))
            drop-shadow(0px 11px var(--blur) color-mix(in srgb, var(--green), transparent 78%))
            drop-shadow(0px 12px var(--blur) color-mix(in srgb, var(--green), transparent 79%))
            drop-shadow(0px 13px var(--blur) color-mix(in srgb, var(--green), transparent 80%))
            drop-shadow(0px 14px var(--blur) color-mix(in srgb, var(--green), transparent 80%))
            drop-shadow(0px 15px var(--blur) color-mix(in srgb, var(--green), transparent 81%))
            drop-shadow(0px 16px var(--blur) color-mix(in srgb, var(--green), transparent 82%))
;
    /*filter: drop-shadow(0px 10px 10px color-mix(in srgb, var(--green), transparent 40%));*/
}

header nav {
    margin-left: 1rem;
    margin-right: 1rem;
}

header nav a {
    text-align: center;
    /*color: var(--green);*/
}

header nav a:not(:last-of-type):after {
    content: ' | ';
    color: white;
}

main {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;

    margin-left: 1rem;
    margin-right: 1rem;
}

section.section {
    display: flex;
    gap: 2.5rem;
    flex-direction: column;
}

footer {
    margin-top: 1rem;
    text-align: center;
}