html {
    font-size:16px;

    --color-theme-one   :#B38F24;
    --color-theme-two   :#B36724;
    --color-theme-three :#246BB3;
    --color-theme-four  :#15191e;
    --color-theme-five  :#242119;
}

a {
    text-decoration:none;
}

@keyframes alert-slidein {
    0% {
        transform:translateY(150%);
    }
    5% {
        transform:translateY(0%);
    }
    95% {
        transform:translateY(0%);
    }
    100% {
        transform:translateY(150%);
    }
}

body {
    margin:0;
    background-color:var(--color-theme-four);
    color:#eee;
    max-width:50rem;
    min-height:100vh;
    display:grid;
    grid-template-rows:max-content 1fr max-content max-content;
    margin:auto;

    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

    & > nav {
        background-color:var(--color-theme-four);
        position:sticky; top:0;
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:max-content;
        justify-content:end;
        padding-bottom:1rem;

        & > a {
            font-weight:400;
            text-decoration:none;
            color:#fff;
            background-color:var(--color-theme-three);
            padding:0.375rem 1.125rem;
            border-bottom-left-radius:0.25rem;
            border-bottom-right-radius:0.25rem;
        }
    }

    & > main {
        display:grid;
        padding:1rem;

        img {
            justify-self:center;
            width:10rem; height:10rem;
            margin:1rem;
            border-radius:50%;
            border:0.125rem solid var(--color-theme-five);
        }
    }

    & > section {
        background-color:var(--color-theme-five);
        padding:1rem 1rem 0 1rem;
        display:grid;
        grid-gap:1rem;
        grid-auto-rows:max-content;
        overflow:clip;

        & a {
            color:#e6cc7f;
            font-size:1.25rem;
            font-weight:500;

            &:hover {
                text-decoration:underline;
            }

        }

        & > form {
            display:grid;
            grid-gap:0.5rem;

            & :is(input, textarea) {
                all:unset;
                background-color:white;
                color:#222;
                padding:0.25rem;
                border-radius:0.25rem;

                &:disabled {
                    background-color:#ddd;
                }
            }

            & > button {
                all:unset;
                display:grid;
                grid-auto-flow:column;
                grid-auto-columns:max-content;
                align-items:center;
                justify-content:center;
                grid-gap:0.5rem;
                height:2rem;
                background-color:var(--color-theme-one);
                font-weight:700;
                text-align:center;
                color:white;
                border-radius:0.25rem;

                & > img {
                    display:none;
                    width:1rem; height:1rem;
                }

                &:disabled {
                    background-color:#aaa;

                    & > img {
                        display:initial;
                    }
                    & > span {
                        display:none;
                    }
                }
            }
        }

        & > .alert {
            transform:translateY(150%);
            text-align:center;
            grid-column:1/-1;
            position:sticky; right:1rem; bottom:3rem; left:1rem;
            background-color:var(--color-theme-two);
            color:white;
            padding:0.5rem;
            border-top-left-radius:0.25rem;
            border-top-right-radius:0.25rem;

            &.active {
                animation-name:alert-slidein;
                animation-duration:8s;
                animation-fill-mode:forwards;
            }
        }
    }

    & > footer {
        font-weight:400;
        background-color:var(--color-theme-four);
        position:sticky; bottom:0;
        padding:0 1rem;
        height:3rem;
        display:grid;
        grid-auto-flow:column;
        grid-gap:0.5rem;
        align-content:center;
        justify-content:start;

        & > a {
            color:#7fb2e6;

            &:hover {
                text-decoration:underline;
            }
        }
    }
}

@media all and (min-width:640px) {
    body > main {
        grid-template-columns:1fr max-content;
        grid-auto-rows:max-content;

        & > :is(:first-child, :nth-child(4)) {
            grid-column:1/-1;
        }

        & > img {
            margin:0 0 1rem 1rem;
        }
    }
}

@media all and (min-width:736px) {
    body > section {
        grid-template-columns:1fr max-content;

        & > h2 {
            grid-column:1/-1;
        }

        & > form {
            width:20rem;
        }
    }
}

@media all and (min-width:800px) {
    html {
        font-size:2vw;
    }
}

@media all and (min-width:1200px) {
    html {
        font-size:24px;
    }
}