.quicksand-light {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.quicksand-medium {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.quicksand-heavy {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}



body {
    font-family: Quicksand, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: center;
}

#container, #header, #main {
    max-width: fit-content;
    margin-inline: auto;
}


table {
    border-collapse: collapse;
    margin: 1rem auto;
}

th, td {
    border: 1px solid darkgrey;
    padding: 0.3rem 0.7rem;
    margin: 1rem auto;
}

.separator {
    border-top: 0;
    border-bottom: 0;
}

th.currency_a{
    background-color: color-mix(in srgb, salmon, transparent 20%);
}

.currency_a{
    background-color: color-mix(in srgb, salmon, transparent 50%);
}

th.currency_b{
    background-color: color-mix(in srgb, skyblue, transparent 20%);
}

.currency_b{
    background-color: color-mix(in srgb, skyblue, transparent 50%);
}


#curr_a_code, #curr_b_code, #curr_a_symbol, #curr_b_symbol {
    width: 4rem;
}

#curr_rate {
    width: 8rem;
}

input {
    text-align: center;
}

a {
    padding: 0.3rem 0.7rem;
}