:root {
    --blank-color: #fff;
    --subtle-color: #d8ff9f;
    --strong-color: #14733b;
    --font-color: #222;
}

* {
    box-sizing: border-box;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    cursor: default;
    color: var(--font-color);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--subtle-color);

    nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        height: 40px;
        padding: 0 16px;

        h1 {
            font-size: 20px;
            font-weight: bold;
            color: var(--strong-color);
        }
    }

    #main-container {
        display: flex;
        place-content: center;
        place-items: center;
        flex-grow: 1;
        flex-shrink: 0;
        width: 100%;

        #center-container {
            display: flex;
            flex-direction: column;
            place-content: center;
            place-items: center;
            gap: 14px;

            #process {
                display: flex;
                width: 80%;
                font-size: 12px;

                .stage {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    width: 0;
                    flex-grow: 1;

                    .half {
                        display: flex;
                        height: 50%;
                        width: 100%;
                        place-content: center;
                        place-items: center;

                        .line {
                            width: 0;
                            flex-grow: 1;
                            background-color: var(--blank-color);
                            height: 2px;

                            .stage:first-child &:first-child,
                            .stage:last-child &:last-child {
                                opacity: 0;
                            }
                        }

                        .box {
                            flex-grow: 0;
                            flex-shrink: 0;
                            padding: 2px 10px;
                            background-color: var(--blank-color);
                        }
                    }
                }
            }

            main {
                display: block;
                background-color: var(--blank-color);
                width: 512px;
                height: 400px;
            }
        }
    }

    footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        padding: 0 24px;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        height: 40px;

        select {
            height: 100%;
            cursor: pointer;
        }

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 0 12px;
        }
    }
}