:root {
    --color1: #30343F;
    --color2: #FAFAFF;
    --color3: #E4D9FF;
    --color4: #374479;
    --color5: #6E7799;
    --color6: #C490D1;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color1);
    color: var(--color2);
}

main {
    border: 1px solid var(--color3);
    padding: 10px;
}

h1 {
    color: var(--color3);
}

fieldset {
    border: 1px dashed var(--color3);
}

label {
    display: inline-block;
    width: 200px;
}

input, button, table {
    background-color: var(--color4);
    color: var(--color3)
}

fieldset > div {
    margin: 10px;
}

fieldset input {
    width: 120px;
    padding: 5px;
    border: 2px solid var(--color5);
}

fieldset button {
    margin-left: 20px;
    padding: 5px 10px;
    border: 2px solid var(--color5);
    cursor: pointer;
}

fieldset button:hover {
    background-color: var(--color3);
    color: var(--color4);
}

table {
    border: 1px solid var(--color5);
    border-collapse: collapse;
    margin: 30px 10px;
}

th, td {
    border: 2px solid var(--color5);
    padding:5px;
}

td.grade {
    text-align: right;
}