:root {
    --crust: #dce0e8;
    --mantle: #e6e9ef;
    --base: #eff1f5;
    --surface-0: #ccd0da;
    --surface-1: #bcc0cc;
    --surface-2: #acb0be;
    --overlay-0: #9ca0b0;
    --overlay-1: #8c8fa1;
    --overlay-2: #7c7f93;
    --subtext-0: #6c6f85;
    --subtext-1: #5c5f77;
    --text: #4c4f69;

    --logo-purple: #340c46;
    --logo-yellow: #fcbf00;
    --logo-pink: #e50051;
    --logo-blue: #009fe3;
}

body {
    background-color: var(--base);
    color: var(--text);
    margin: 0;
}

.site-header {
    width: 100%;
    display: flex;
    padding: 10px;
    margin-bottom: 40px;

    .site-logo img {
        height: 100px;
    }
}

.container {
    background-color: var(--mantle);
    display: grid;
    grid-template-columns: 1;
    row-gap: 20px;
    padding: 15px 50px;
    max-width: 50%;
    width: fit-content;
    margin: auto;
    border: 1px solid var(--surface-0);
    border-radius: 5px;
}

.container-content {
    margin-bottom: 10px;
    margin-top: 10px;
}

.form-elements {
    display: grid;
    grid-template-columns: 1;
    row-gap: 10px;
    margin-bottom: 15px;
    padding: 0 10px;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
}

.form-input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: var(--subtext-1);
}

.button {
    border: none;
    color: var(--mantle);
    padding: 5px 20px;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    display: inline-block;
    font-size: medium;
    cursor: pointer;
}

.button-accept {
    background-color: var(--logo-blue);
}

.button-cancel {
    background-color: var(--logo-pink);
}