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

body {
    margin-right: 1rem;
    margin-left: 1rem;
    background-color: lightgray;
}

header {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    background-color: silver;
    border: 2px solid #c9c9c9;
    /* Blurred effect */

    padding-bottom: 2rem;

    h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
        margin-right: 1rem;
    }

    p {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
}

main {
    textarea {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    section {
        border: 1px solid silver;
        margin: 0 2rem;
        padding: 0 2rem 1rem;
        min-height: 100%;
        height: fit-content;
    }

    h2 {
        font-size: 5rem;
        margin-top: 8rem;
        position: relative;
    }

    h2::after {
        content: '';
        position: absolute;
        bottom: .75rem;
        left: 0;
        right: 0;
        height: 3px;
        border-top: 3px double darkgray;
        z-index: -1;
    }

    h3 {
        margin-top: 2rem;
    }

    h4 {
        font-size: 1.8rem;
        font-weight: 400;
        font-family: Consolas, "SF Mono", monospace;

        background-color: silver;
        border: 2px solid #c9c9c9;
        /* Blurred effect */

        padding: .5rem;
    }

    h5 {
        font-size: 1.6rem;
        border-bottom: 3px double silver;
    }

    h6 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .operation-items {
        padding: 0 2rem;
    }

    .increase-height {
        min-height: 100px;
        height: fit-content;
    }

    .json-viewer-controls {
        margin: 1rem 0;
        display: flex;
        flex-wrap : wrap;
        gap: 0.5rem;
    }

    .toggle-btn {
        padding: 0.5rem 1rem;
        border: none;
        background-color: whitesmoke;
        border-radius: 7px;
        cursor: pointer;
    }

    .toggle-btn:hover {
        background-color: #e9e9e9;
    }

    .toggle-btn.active {
        background-color: gainsboro;
    }

    hr {
        margin: 1rem 0;
        opacity: .1;
    }

    #input {
        width: 100%;
        font-size: 1.3rem;

        #input-methods {
            margin: 0 2rem;
        }

        p,
        .form-group {
            margin: 2rem 0;
        }

        label {
            margin: 0;
        }

        textarea, select {
            font-family: Consolas, "SF Mono", monospace;
        }

        textarea#inputted-code {
            font-size: 1.8rem;
            min-height: 3.2rem;
            padding: .5rem;
            margin-top: .5rem;
            margin-bottom: 1rem;
            overflow-y: hidden;
            resize: none;
        }

        select#sample-select {
            display: inline;
            width: 7rem;
        }

        input,
        select {
            font-size: 1.3rem;
            max-width: 100%;
            padding: .25rem .5rem;
        }

        button#decode-code {
            font-size: 1.3rem;
            width: 100%;
            padding: .75rem 0;
            margin-bottom: 3rem;
            background-color: silver;
            cursor: pointer;
        }
    }

    #output-json-container {
        padding: 1rem;
        margin: 1rem;
    }

    #output,
    #intermediate-information {
        p {
            font-size: 1.3rem;
            margin-left: 2rem;
            margin-bottom: 4rem;
        }

        textarea {
            font-size: .75rem;
            height: 17rem;
            margin-bottom: 2rem;
        }

        textarea#output-svg-source {
            height: 31rem;
        }

        select {
            margin: 1rem .5rem;
        }

        .svg-container {
            margin: 2rem 2rem 4rem 2rem;
        }
    }

    #output {
        label {
            margin: 1rem 0 1rem 2rem;
        }

        details {
            margin: 1rem 2rem;

            textarea {
                margin: 1rem 2rem;
            }
        }

    }

    #intermediate-information {
        label {
            margin: 1rem 0 1rem 0rem;
        }
        details {
            margin: 2rem 2rem 2rem 0rem;

            textarea {
                margin: 1rem 2rem;
                height: 31rem;
            }
        }

    }

    #processing-status {
        font-style: italic;
        font-weight: 900;
    }

}

textarea {
    white-space: nowrap;  /* Disable the text wrapping */
}

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

.grayText {
    color: gray;
}

.leftPadding-1 {
    margin-left: 1rem;
}

.marginTop-1 {
    margin-top: 4rem;
}

.hidden {
    display: none;
}