* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --light-gray: #f7f7f8;
    --medium-gray: #ebedef;
    --dark-gray: #c0c0c0;
    --darker-gray: #6a737c;

    --light-blue: #3397fa;
    --light-red: #e55353;
    --light-yellow: #f9b114;
    --light-green: #2eb85c;

    --dark-blue: #321fdb;


    --box-shadow: 0 1px 1px 0 rgba(60,64,67,.2), 0 1px 2px 0 rgba(60,64,67,.3);
    --box-shadow-hover: 0 1px 3px 1px rgba(60,64,67,.2), 0 2px 8px 4px rgba(60,64,67,.1);
}

html, body {
    width: 100%;
    height: 100%;

    font-family: Arial, Helvetica, sans-serif;

    background-color: var(--medium-gray);
}

[center] {
    margin: auto;
}

[inline] {
    display: inline-block;
}

.card {
    width: auto;
    height: fit-content;
    
    display: grid;

    border-radius: 15px;
    
    overflow: hidden;

    background-color: white;

    box-shadow: var(--box-shadow);
}

.card[margin] {
    margin: 20px;
}

.card-header {
    width: auto;

    padding: 10px;

    background-color: var(--light-gray);
}

.card-body {
    width: auto;
    height: fit-content;

    overflow: auto;

    display: grid;
    gap: 10px;
    grid-auto-columns: 1fr;

    padding: 15px;
    padding-bottom: 20px;
}




.button-1 {
    color: white;

    background-color: var(--dark-blue);

    border-radius: 5px;
    border: none;
    outline: none;

    padding: 5px;
    margin: 1px;

    cursor: pointer;

    filter: brightness(100%);

    transition-property: filter;
    transition-timing-function: linear;
    transition-duration: 0.1s;
}

.button-1:hover {
    filter: brightness(130%);
}

.button-2 {
    color: white;
    font-size: large;

    background-color: var(--dark-blue);

    border-radius: 7px;
    border: none;
    outline: none;

    padding: 10px;
    margin: 2px;

    cursor: pointer;

    filter: brightness(100%);

    transition-property: filter;
    transition-timing-function: linear;
    transition-duration: 0.1s;
}

.button-2:hover {
    filter: brightness(130%);
}


.text-input {
    width: 100%;
    height: fit-content;

    border-radius: 7px;;
    border: none;
    outline: none;

    padding: 8px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;

    background-color: var(--light-gray);

    box-shadow: var(--box-shadow);

    transition-property: box-shadow;
    transition-timing-function: linear;
    transition-duration: 0.1s;
}

.text-input:focus {
    box-shadow: var(--box-shadow-hover);
}

.radio-input-container {
    display: inline-block;
    padding: 5px;

}