main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 105px);
    background-image: linear-gradient(to right top, #f5f5f5, #ececec, #e4e4e4, #dbdbdb, #d3d3d3);
    padding: 40px 0px;
}

/* #region Form Styling */

    form {
        width: 95%;
        max-width: 500px;
        box-shadow: 0px 0px 5px #424242;
        padding: 20px;
        border-radius: 20px;
        background-color: white;
        margin: 0px 10px;
    }

    #messenger-form {
        display: none;
    }

    form header, dialog header {
        text-align: center;
        border-bottom: 2px solid #A82428;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    form h2, dialog h2 {
        color: #424242;
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 10px;
    }

    form p {
        margin: 0px 0px 10px 0px;
    }

    .error {
        color: #B30000;
    }

    /* #region Inputs */

        form label {
            font-weight: bold;
        }

        form input[type="number"], form input[type="text"] {
            display: block;
            width: calc(100% - 10px);
            padding: 5px;
            border-radius: 5px;
            border: thin solid gray;
            font-size: 16px;
            margin: 10px 0px;
        }

        form input[type="checkbox"]{
            accent-color: #A82428;
            transform: scale(1.4);
        }

        #middle-checkbox {
            margin: 25px 0px;
        }

        form select {
            display: block;
            width: 100%;
            padding: 5px;
            border-radius: 5px;
            font-size: 16px;
            margin: 10px 0px;
            cursor: pointer;
        }

        .checkbox-container {
            display: block;
        }

        form .checkbox-container:nth-child(n - 2){
            margin-bottom: 10px;
        }

        form textarea {
            width: calc(100% - 10px);
            padding: 5px;
            resize: none;
            margin: 10px 0px 5px 0px;
            height: 125px;
            border-radius: 5px;
            border: thin solid gray;
            font-size: 16px;
        }

    /* #endregion */

    /* #region Fieldsets */

        fieldset:not(fieldset fieldset) {
            padding: 10px;
            margin-bottom: 10px;
        }

        fieldset fieldset {
            border: none
        }

        fieldset fieldset legend {
            font-weight: normal;
            text-decoration: underline;
        }

        legend {
            font-weight: bold;
        }

        #colors-fieldset {
            height: 150px;
            overflow-y: scroll;
        }

        #colors-fieldset img {
            width: 25px;
            height: 25px;
            position: relative;
            top: 50%;
            transform: translateY(-30%);
            border: thin solid black;
        }

        .colors {
            display: grid;
            grid-template-columns: 50% 50%;
            row-gap: 10px;
        }

        #unpainted {
            display: grid;
            grid-template-columns: 100%;
            row-gap: 10px;
            margin-top: 20px;
        }

        .colors:nth-child(n+3){
            margin-top: 20px;
        }

        .colors:last-child div {
            margin-top: 10px;
        }

        #custom-color-container, #offset-container {
            display: none;
        }

        .colors-label {
            margin-left: 5px;
        }

    /* #endregion */

    /* #region Buttons */

        #buttons-grid {
            display: grid;
            grid-template-columns: calc(50% - 5px) calc(50% - 5px);
            column-gap: 10px;
            margin-top: 10px;
        }

        #buttons-grid button {
            padding: 10px 0px;
            border-radius: 10px;
            border: none;
            font-size: 20px;
            background-color: #1134A6;
            color: white;
            margin-bottom: 10px;
        }

        #buttons-grid button:active {
            background-color: #0A2270
        }

        #back-btn, #close-item-list-btn {
            position: absolute;
            background-color: rgba(0, 0, 0, 0);
            border: none;
        }

        #submit-btn, #next-btn {
            width: 100%;
            padding: 10px 0px;
            border-radius: 10px;
            background-color: #A82428;
            color: white;
            border: none;
            font-size: 20px;
            transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
        }

        #submit-btn:active, #next-btn:active {
            background-color: #7E1B1E;
        }

        #next-btn:disabled {
            background-color: silver;
            color: black;
            cursor: not-allowed;
        }

    /* #endregion */

    /* #region Item List */

    #item-list-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        max-height: 700px;
        background-color: white;
        padding: 20px;
        border: thin solid gray;
        border-radius: 20px;
    }

    #list-container {
        max-height: 300px;
        overflow-y: scroll;
        padding: 10px;
    }

    .list-item {
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0px 0px 5px #888888;
        line-height: 1.5;
    }

    .list-item:nth-child(n+2){
        margin-top: 20px;
    }

    .list-item span {
        font-weight: bold;
    }

    .delete-item-btn {
        background-color: #A82428;
        color: white;
        border: none;
        padding: 5px;
        border-radius: 5px;
        font-size: 16px;
        margin-top: 10px;
    }

    .delete-item-btn svg {
        vertical-align: -4px;
    }

    /* #endregion*/

    /* #region Dialogs */

    .message-dialog {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px;
        border-radius: 10px;
        opacity: 0;
        transition: opacity 250ms ease-in-out;
    }

    .message-dialog svg {
        vertical-align: -6px;
    }

    #success-dialog {
        background-color: #BDFFBD;
        color: #005C00;
        border: thin solid #005C00;
    }

    #error-dialog {
        background-color: #FFB8B8;
        color: #7A0000;
        border: thin solid #7A0000;
    }

    /* #endregion */

/* #endregion */

/* #region Media Queries */

@media screen and (max-width: 465px){

    .colors {
        grid-template-columns: 100%;
    }

}

/* #endregion */