*,
    :before,
    :after {
        box-sizing: border-box;
    }

    h1 {
        text-align: center;
    }

    div {
        margin: auto;
        text-align: center;
    }

    label {
        &[for=file] {
            padding: 20px 40px;
            border-radius: 6px;
            margin: 1rem auto;
            display: block;
            border: 1px dashed silver;
        }
    }

    label[for=file],
    .option {
        width: 400px;
    }

    canvas {
        background-color: black;
        margin: 1rem auto;
    }

    .option {
        margin: 1rem auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >*:not(p, button) {
            padding-inline: 4px;

            &:first-child {
                flex-basis: 30%;
                text-align: left;
            }

            &:last-child {
                flex-basis: 70%;
                display: flex;
                justify-content: space-around;
            }
        }

        >p {
            flex-basis: 50%;
            text-align: center;
            display: block;
        }
    }

    button {
        display: none;
        margin: 1rem auto;
        border-radius: 4px;
        background-color: dodgerblue;
        border: none;
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        padding: 0.5rem 1.4rem;
    }

    .loader {
        width: 15px;
        aspect-ratio: 1;
        border-radius: 50%;
        animation: l5 1s infinite linear alternate;
        display: none;
    }

    #preview {
        image-compare {
            max-width: 1200px;
            margin-inline: auto;
        }

        &.loading {
            .loader {
                display: block;
            }

            image-compare,
            .option {
                display: none;
            }

        }
    }

    #target-field label {
        flex-direction: column;
        row-gap: 8px;
    }

    @keyframes l5 {
        0% {
            box-shadow: 20px 0 #000, -20px 0 #0002;
            background: #000
        }

        33% {
            box-shadow: 20px 0 #000, -20px 0 #0002;
            background: #0002
        }

        66% {
            box-shadow: 20px 0 #0002, -20px 0 #000;
            background: #0002
        }

        100% {
            box-shadow: 20px 0 #0002, -20px 0 #000;
            background: #000
        }
    }