body {
    margin: 0;
    padding: .5em .5em 0;
    background-color: #fafafa;

    height: 100vh;
    max-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 1em;
}

* {
    font-family: Arial sans-serif;
    font-size: 15pt;

    box-sizing: border-box;
}

.settings {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.setting-group {
    display: flex;
    width: 50%;
}

.setting-group:last-child{
    flex-direction: column;
    gap: .5em;
}

.input {
    display: flex;
}


.setting-group:first-child, .input {
    justify-content: space-between;
}


.setting-group label {
    display: flex;
    width: 50%;
}

.setting-group input {
    width: 100%;
}

.input-field {
    width: 100%;
    display: flex;
    gap: .5em;
}

.args {
    width: 100%;

    display: flex;
    gap: .5em;

    flex-wrap: wrap;
}

.arg {
    padding: 5px 10px;
    border: 1px solid;

    border-radius: 15px;

    display: flex;

    gap: .25em;
    align-items: center;
}

.delete-arg {
    font-size: 15px;
    color: red;
    font-weight: 600;

    cursor: pointer;
}

.content {
    flex-grow: 1;
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5em;
}

.content .buttons {
    width: 100%;
    display: flex;

    justify-content: space-between;
}

.content .buttons div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 49%;
}

.content textarea {
    height: 100%;
    width: 49%;
}

footer {
    display: flex;
    width: 100%;
    padding: .5em;
    margin-top: .5em;

    font-size: 12pt;

    text-align: center;
    align-items: center;
    justify-content: center;

    font-weight: 600;


    color: #333;
}

footer a {
    text-decoration: none;

    color: #333;
    transition: color .5s ease;
}

footer a:hover {
    color: blueviolet;
}